From: Donghyun Lee Date: Fri, 10 Jul 2015 06:37:06 +0000 (+0900) Subject: LB reviewed and updated X-Git-Tag: tizen_3.0/TD_SYNC/20161201~720 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=6c9f67ea4e7bba815c22154ba0aa960b5952f33e;p=sdk%2Fonline-doc.git LB reviewed and updated Signed-off-by: Donghyun Lee --- diff --git a/org.tizen.devtools/html/common_tools/emulator.htm b/org.tizen.devtools/html/common_tools/emulator.htm index 90031a1..c31125f 100644 --- a/org.tizen.devtools/html/common_tools/emulator.htm +++ b/org.tizen.devtools/html/common_tools/emulator.htm @@ -249,7 +249,7 @@

You can create, modify, delete, and list your VMs through the command line interface commands. The CLI binary is located in:

In Linux: +
In Ubuntu:
<TIZEN_SDK>/tools/emulator/bin/em-cli
In Windows®:
<TIZEN_SDK>\tools\emulator\bin\em-cli.bat

To use HW virtualization, you need:

In Linux: +

In Ubuntu:

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:

 $egrep -c '(vmx|svm)' /proc/cpuinfo

@@ -293,7 +293,7 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo

To install KVM or HAX:

In Linux: +
In Ubuntu:
No installation is required for KVM.

In Windows® and Mac OS® X: @@ -317,7 +317,7 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo

Running the Emulator

To run the Emulator with HW virtualization support in the Emulator Manager, set the CPU VT field to ON. The field is disabled if your system cannot support HW virtualization.

You can also run the Emulator with HW virtualization support from the command line, by including the -enable-kvm (in Linux) or -enable-hax (in Windows® and Mac OS® X) option in the start-up command.

You can also run the Emulator with HW virtualization support from the command line, by including the -enable-kvm (in Ubuntu) or -enable-hax (in Windows® and Mac OS® X) option in the start-up command.

Emulator Control Keys and Menu

@@ -735,7 +735,7 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo

You can control and monitor the Tizen Emulator by using ECP CLI instead of the ECP UI tool. The ECP CLI supports all the functionalities of the ECP UI. The CLI binary is located at:

In Linux: +
In Ubuntu:
<TIZEN_SDK>/tools/emulator/bin/ecp-cli
In Windows®:
<TIZEN_SDK>\tools\emulator\bin\ecp-cli.bat

Figure: Session and shell modes

Session and shell modes

In Linux, the bash-based auto-completion is used with the TAB button.

In Ubuntu, the bash-based auto-completion is used with the TAB button.

The following tables list the supported commands of the ECP CLI.

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 <installed Android SDK>/sdk/platform-tools directory. Otherwise, you can download only ADB or install Android SDK.

To install ADB:

Linux/Mac OS® X: Download ADB and then install it in the /usr/bin directory.
+
1. Ubuntu/Mac OS® X: Download ADB and then install it in the /usr/bin directory.
  
  For more information, see http://code.google.com/p/adb-fastboot-install/.
2. Download ADB and install it in the C:\ADB directory.
  
  For more information, see http://rubenalamina.mx/custom-installers/android-adb-fastboot/.
diff --git a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm index 789b0bd..4929e32 100644 --- a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm +++ b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm @@ -45,8 +45,8 @@
The following symbols are used to define the supported operating system for each shortcut:
- : Windows®
- : Ubuntu
- : Windows®
- : Mac OS®
@@ -65,22 +65,22 @@ Delete - + Delete Rename - + F2 Refresh - + F5 Property - + Alt+Enter @@ -99,7 +99,7 @@ Build all - + Ctrl+B @@ -108,22 +108,22 @@ Make target build - + Shift+F9 Rebuild last target - + F9 Build project - + F10 Run last launched - + Ctrl+F11 @@ -146,27 +146,27 @@ Step into - + F5 Step over - + F6 Step return - + F7 Resume - + F8 Debug - + Ctrl+F11 @@ -175,12 +175,12 @@ Debug last launched - + F11 Toggle breakpoint - + Ctrl+Shift+B @@ -203,7 +203,7 @@ Content assist - + Ctrl+Space @@ -222,7 +222,7 @@ New project and file using the Wizard - + Ctrl+N @@ -231,7 +231,7 @@ New project and file - + Ctrl+Alt+N @@ -240,7 +240,7 @@ Open resource - + Ctrl+Shift+R @@ -249,12 +249,12 @@ Properties - + Alt+Enter Save - + Ctrl+S @@ -263,7 +263,7 @@ Save all - + Ctrl+Shift+S @@ -272,7 +272,7 @@ Close - + Ctrl+W @@ -281,7 +281,7 @@ Close all - + Ctrl+Shift+W @@ -290,12 +290,12 @@ Refresh - + F5 Rename - + F2 @@ -314,7 +314,7 @@ Find and replace - + Ctrl+F @@ -323,7 +323,7 @@ Quick fix - + Ctrl+1 @@ -332,7 +332,7 @@ Redo - + Ctrl+Z @@ -341,7 +341,7 @@ Undo - + Ctrl+Z @@ -350,7 +350,7 @@ Go to line - + Ctrl+L @@ -359,7 +359,7 @@ Delete line - + Ctrl+D @@ -368,7 +368,7 @@ Go to matching bracket - + Ctrl+Shift+P @@ -377,32 +377,32 @@ Move lines down - + Alt+ Move lines up - + Alt+ Show tooltip - + F2 Open declaration - + F3 Open type hierarchy - + F4 Open type - + Ctrl+Shift+T @@ -411,7 +411,7 @@ To lower case - + Ctrl+Shift+Y @@ -420,7 +420,7 @@ To upper case - + Ctrl+Shift+Z @@ -429,7 +429,7 @@ Correct indentation - + Ctrl+I @@ -438,7 +438,7 @@ Format - + Ctrl+Shift+F @@ -447,7 +447,7 @@ Add/remove comment - + Ctrl+/ @@ -456,7 +456,7 @@ Add/remove block comment - + Ctrl+Shift+/ @@ -479,7 +479,7 @@ Rename-refactoring - + Alt+Shift+R @@ -488,7 +488,7 @@ Move-refactoring - + Alt+Shift+V @@ -497,7 +497,7 @@ Change method signature - + Alt+Shift+C @@ -506,7 +506,7 @@ Extract method - + Alt+Shift+M @@ -515,7 +515,7 @@ Extract local variable - + Alt+Shift+L @@ -538,7 +538,7 @@ Insert snippet - + Ctrl+Shift+I @@ -548,7 +548,7 @@ New launch configuration - + Alt+Shift+F12 @@ -557,7 +557,7 @@ Forward launch history - + Alt+Shift+[ @@ -566,7 +566,7 @@ Backward launch history - + Alt+Shift+] @@ -591,7 +591,7 @@ HTML editor Vertical layout - + Ctrl+Shift+F9 @@ -600,7 +600,7 @@ Graphical designer - + Ctrl+Shift+F10 @@ -609,7 +609,7 @@ Horizontal layout - + Ctrl+Shift+F11 @@ -618,7 +618,7 @@ Source code - + Ctrl+Shift+F12 @@ -627,7 +627,7 @@ Preview - + Ctrl+4 @@ -636,7 +636,7 @@ Code minifier - + Ctrl+5 @@ -645,7 +645,7 @@ Code beautifier - + Ctrl+6 @@ -654,7 +654,7 @@ Assignment tracing - next - + Ctrl+] @@ -664,7 +664,7 @@ Assignment tracing - previous - + Ctrl+[ @@ -688,22 +688,22 @@ About Tizen Dynamic Analyzer - + F1 Configuration - + F2 Enable the source view of the toolbar - + F3 Select the Timeline tab - + Ctrl+1 @@ -712,7 +712,7 @@ Select the File tab - + Ctrl+2 @@ -721,7 +721,7 @@ Select the Thread tab - + Ctrl+3 @@ -730,7 +730,7 @@ Select the User Interface tab - + Ctrl+4 @@ -739,7 +739,7 @@ Select the Summary tab - + Ctrl+5 @@ -749,7 +749,7 @@ Select the Range tab - + Ctrl+6 @@ -758,7 +758,7 @@ Start/stop trace - + Ctrl+g @@ -767,7 +767,7 @@ Open trace - + Ctrl+o @@ -776,7 +776,7 @@ Save trace - + Ctrl+s @@ -785,7 +785,7 @@ Replay - + Ctrl+p @@ -794,7 +794,7 @@ Toggle the range information between create and remove - + Ctrl+r @@ -803,7 +803,7 @@ Open the search dialog box - + Ctrl+f @@ -812,7 +812,7 @@ Delete the saved file of the open trace dialog box - + Delete @@ -835,7 +835,7 @@ Delete virtual machine - + Delete @@ -844,12 +844,12 @@ Launch virtual machine - + Enter Select virtual machine - + Arrow key @@ -868,82 +868,82 @@ Always on Top - + Ctrl+F2 Close - + F4 Control Panel - + Ctrl+F6 Detailed Info - + Ctrl+F1 Force Close - + Ctrl+F4 Rotate next - + Ctrl+Num+9 Rotate prev - + Ctrl+Num+7 Scale next - + Ctrl+F10 Scale prev - + Ctrl+F9 Screen Shot - + Ctrl+F7 Shell - + Ctrl+F5 Home - + F1 Menu - + F2 Power - + F3 Volume + - + Ctrl+Num++ Volume - - + Ctrl+Num+- @@ -966,57 +966,57 @@ Device Tree - + Alt+D Network - + Alt+N Uninstaller - + Alt+U HDS (Host Directory Sharing) - + Alt+H Upper menu focus movement - + Up Underneath menu focus movement - + Down Collapse tree menu - + Left Expand tree menu - + Right Move focus to next control - + Tab Move focus to previous control - + Shift + Tab Menu selection - + Enter @@ -1025,72 +1025,72 @@ Battery - + Alt+B RSSI - + Alt+R 3-Axis sensor - + Alt+A Light - + Alt+I Proximity - + Alt+X Pressure - + Alt+E Ultraviolet - + Alt+V Heart Rate Monitor - + Alt+M Ear Jack - + Alt+K USB - + Alt+S SD Card - + Alt+D Location - + Alt+L Telephony - + Alt+T Memory - + Alt+O @@ -1098,52 +1098,52 @@ Battery - + Alt+B 3-Axis sensor - + Alt+A Light - + Alt+I Proximity - + Alt+X Pressure - + Alt+E Ultraviolet - + Alt+V Heart Rate Monitor - + Alt+M Touch gesture - + Alt+G USB - + Alt+S Memory - + Alt+O diff --git a/org.tizen.devtools/html/images/Thumbs.db b/org.tizen.devtools/html/images/Thumbs.db deleted file mode 100644 index 02e945d..0000000 Binary files a/org.tizen.devtools/html/images/Thumbs.db and /dev/null differ diff --git a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm index 818f26b..aeacca9 100644 --- a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm +++ b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm @@ -34,6 +34,8 @@
<metadata> Element
<background-category> Element +

@@ -336,6 +338,45 @@

<metadata key="testkey" value="testvalue"/>

+ +

<background-category> Element

The <background-category> element represents category of the application running on the background.

+ + + + + + + +

+<background-category> element
Category of the application that is allowed to run on the background + For more information on the relationship between the elements, see the Element hierarchy. + Occurrences: + + 1 or more (optional) + + Attributes: + + value +

+<background-category> element

Category of the application that is allowed to run on the background

For more information on the relationship between the elements, see the Element hierarchy.

Occurrences:

1 or more (optional)

Attributes:

value

+ + + + + + + +

+value attribute
Value of background category + Expected value: + + String + +

+value attribute

Value of background category

Expected value:

String

For example:

<background-category value="download"/>
+

+ + 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 index a4174bc..2774185 100644 --- a/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm +++ b/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm @@ -175,6 +175,12 @@ + + + <background-category> + + + <ui-application> @@ -229,6 +235,12 @@ + + + <background-category> + + + <account> @@ -618,6 +630,11 @@ <datacontrol> 1 or more (optional) + + <background-category> + 1 or more (optional) + +

Attributes:

<background-category>

Attributes:

nodisplay
taskmanage
type
auto-restart
on-boot

-auto-restart attribute

Indicates whether the application is relaunched automatically if it is terminated abnormally.

- - - - - - - - - -

Note
This attribute is not supported in Tizen wearable devices.

- -

Expected value:

true
false

-on-boot attribute

Indicates whether the application is launched automatically on device booting time or application installation time.

- - - - - - - - - -

Note
This attribute is not supported in Tizen wearable devices.

- -

Expected value:

true
false

For example:

<icon>

<label>

<support-size>

Attributes:

Widget application icon image.

Occurrences:

1
1 or more (optional)

Expected value:

Widget application text.

Occurrences:

1
1 or more (optional)

Expected value:

Size supported by the widget application.

Occurrences:

1
1 or more

Attributes:

Indicates the update period in seconds.

Multiples of 1800 only allowed.

Expected value:

Time in seconds
The low memory killer is terminating your application in a low memory situation.

Because the service application has no UI, it also has no pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.

Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.

Application state changes are managed by the underlying framework. For more information about application state transitions, see Managing Application States and Transitions.

http://tizen.org/privilege/alarm.set

public

Setting alarms

The application can set alarms and wake the device up at scheduled times.

http://tizen.org/privilege/apphistory.read

public

Reading application usage statistics

The application can read the statistics of application usage, such as which applications have been used frequently or recently.

http://tizen.org/privilege/appmanager.kill

platform

Closing applications

The application can close other applications..

The application can close other applications.

http://tizen.org/privilege/appmanager.kill.bgapp

public

Closing background applications

This application can request to close applications running in the background.

http://tizen.org/privilege/appmanager.launch

http://tizen.org/privilege/healthinfo

public

Reading health information

The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.

http://tizen.org/privilege/ime

public

http://tizen.org/privilege/imemanager

public

Managing input methods

This application can manage installed input methods.

http://tizen.org/privilege/inputgenerator

platform

Generating touch and key events

This application can simulate keys being pressed and touch interactions with the screen.

http://tizen.org/privilege/keymanager

http://tizen.org/privilege/keymanager.admin

platform

Locking/unlocking secure repository

The application can lock and unlock a password-protected storage, and manage password changes for it.

Deprecated since 2.4.

http://tizen.org/privilege/led

Managing location settings

The application can control your location service settings.

http://tizen.org/privilege/mapservice

public

Using map services

The application can use map services such as Geocoder, Places, and Route (Direction).

http://tizen.org/privilege/mediacontroller.client

public

Controlling media player

The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.

http://tizen.org/privilege/mediacontroller.server

public

Accepting remote controls

The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.

http://tizen.org/privilege/mediahistory.read

public

Reading media playback statistics

The application can read the statistics concerning the music and videos played on the device, such as the peak times for playing music or videos.

http://tizen.org/privilege/message.read

public

Sending text and multimedia messages and updating their statuses

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.

http://tizen.org/privilege/minicontrol.provider

public

Showing toolbar

The application can show a small toolbar on the notification panel or lock screen while it is open.

http://tizen.org/privilege/network.get

public

http://tizen.org/privilege/packagemanager.admin

platform

Installing/and uninstalling application packages and clearing caches

The application can install and uninstall application packages, and clear application caches.

Installing/and uninstalling application packages

The application can install and uninstall application packages.

http://tizen.org/privilege/packagemanager.clearcache

public

Clearing other applications' caches

The application can clear other applications' caches.

http://tizen.org/privilege/packagemanager.info

Managing shortcuts

The application can create and delete shortcuts.

http://tizen.org/privilege/systemmonitor

public

Monitoring system resources

The application can read system information, including information from the CPU and RAM.

http://tizen.org/privilege/systemsettings

public

Managing unrestricted system settings

The application can read and write unrestricted system settings. This privilege was deprecated after the Tizen version 2.3.

The application can read and write unrestricted system settings.

Deprecated since 2.3.1.

http://tizen.org/privilege/systemsettings.admin

http://tizen.org/privilege/account.read

public

Reading accounts

This application can read accounts.

http://tizen.org/privilege/account.write

public

Managing accounts

This application can create, edit, and delete accounts.

http://tizen.org/privilege/alarm.get

public

Closing applications

The application can close other applications.

http://tizen.org/privilege/appmanager.kill.bgapp

public

Closing background applications

This application can request to close applications running in the background.

http://tizen.org/privilege/appmanager.launch

public

Reading health information

The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.

http://tizen.org/privilege/ime

public

http://tizen.org/privilege/imemanager

public

Managing input methods

This application can manage installed input methods.

http://tizen.org/privilege/inputgenerator

platform

Generating touch and key events

This application can simulate keys being pressed and touch interactions with the screen.

http://tizen.org/privilege/keymanager

public

http://tizen.org/privilege/keymanager.admin

platform

Locking/unlocking secure repository

The application can lock and unlock a password-protected storage, and manage password changes for it.

Deprecated since 2.4

http://tizen.org/privilege/led

Managing location settings

The application can control your location service settings.

http://tizen.org/privilege/mapservice

public

Using map services

The application can use map services such as Geocoder, Places, and Route (Direction).

http://tizen.org/privilege/mediacontroller.client

public

Controlling media player

The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.

http://tizen.org/privilege/mediacontroller.server

public

Accepting remote controls

The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.

http://tizen.org/privilege/message.read

public

Sending text and multimedia messages and updating their statuses

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.

http://tizen.org/privilege/minicontrol.provider

public

Showing toolbar

The application can show a small toolbar on the notification panel or lock screen while it is open.

http://tizen.org/privilege/network.get

public

http://tizen.org/privilege/packagemanager.admin

platform

Installing/uninstalling application packages and clearing caches +

Installing/uninstalling application packages +

The application can install and uninstall application packages.

http://tizen.org/privilege/packagemanager.clearcache

public

Clearing other applications' caches

The application can install and uninstall application packages, and clear application caches.

The application can clear other applications' caches.

http://tizen.org/privilege/packagemanager.info

Accessing secure elements

The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.

http://tizen.org/privilege/systemmonitor

public

Monitoring system resources

The application can read system information, including information from the CPU and RAM.

http://tizen.org/privilege/systemsettings.admin

platform

There are 2 types of submodules - Tizen native modules and open source modules. The integration of open source modules in the native API structure allows you to add additional features by using well-known open source libraries. This is particularly advantageous for developers who are familiar with certain libraries because they can quickly add features and use previously written code in certain cases.

The following figure and table define the mobile native API layout. The table describes the API modules and the functionality of all their 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.

The following figure and tables define the Tizen native API layout. The tables describe the API modules and the functionality of all their submodule APIs within that module. The tables also act as reference sources for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.

Figure: Native API layout

Native API layout

Note
Except as noted, the mobile native APIs are available since Tizen 2.3.

Figure: Mobile native API layout

Mobile native API layout

Guides: Network
Tutorials: Network

Table: Mobile native API modules
API submodule	Functionality
Account	The Account API module features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the oauth2 authorization. + Documentation: + + Guides: Account + Tutorials: Account +	Account Manager	The Account APIs provide CRUD (Create, Read, Update, Delete) account management functionality.
		OAuth 2.0 + (since 2.4)	The OAuth 2.0 APIs provide an easy way to gain an access token between server and client.
		Sync Manager + (since 2.4)	The Sync Manager API helps applications in scheduling their data sync operations.
Application Framework	The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user's application preferences. @@ -95,15 +129,15 @@
		Shortcut	Adds application shortcuts to the device home screen, which is the main landing screen of the device. -
		Widget	Widget (since 2.3.1)	Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.
		Base	The Base API contains submodule APIs for internationalization support and contains various open source libraries. +	Base	The Base API contains submodule APIs for internationalization support and contains various open source libraries. Documentation: Guides: Base @@ -112,8 +146,13 @@	C++ Standard Library	Standard C++ library.
						zlib (since 2.4)	zlib is used for in-memory compression and decompression.
						EGlibc	Glibc	Standard C library.
						i18n	Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.

						LibXML	This library can be used to parse XML documents such as the Application Manifest.

						Minizip	Provides a library to process files in the .zip format. It can be used to zip, unzip and compress files.

OpenMP	Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors.
Sqlite	Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.
Content	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. +	Content	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. Documentation: Guides: Content @@ -157,10 +196,14 @@
				Media Content	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.
				Context	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. +	Service Adaptor (since 2.4)	The Service Adaptor API provides developer with common interfaces like using local service for various service infra.
Context	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. Documentation: Guides: Context @@ -169,12 +212,20 @@			Context		Detects user activities, such as walking, running, and being in a moving vehicle with a device.
		Gesture Recognition	Gesture Recognition	Detects user gestures on devices, such as tilt, snap, and double-tap.
		Contextual History (since 2.4)	Allows you to query statistics and patterns derived from contextual history data.
		Contextual Trigger (since 2.4)	The Contextual Trigger API provides a way to define rules, each of which can trigger a specified action when the rule is satisfied.
Location	The Location API module allows the geographical position of a device to be determined for use with location-based services. +	Location	The Location API module allows the geographical position of a device to be determined for use with location-based services. Documentation: Guides: Location @@ -183,14 +234,22 @@	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.
Geofence Manager (since 2.4)	This Geofence Manager API provides service related to geofence(geo-fence).
Maps Service (since 2.4)	Maps API provides a developer with a set of functions, helping to create Maps aware applications.
Messaging	The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device. Documentation: Guides: Messaging Tutorials: Messaging - -	Email	Allows composing, sending, and receiving of email messages.
		Multimedia	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. - Documentation: +	Multimedia	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. + Documentation: Guides: Multimedia Tutorials: Multimedia	Image Util	Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.

libEXIF	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.
Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.
Media Controller (since 2.4)	The Media Controller API provides functions for communication between the media controller server and the media controller client.
Media Tool	Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.
Metadata Extractor	Extracts metadata information from an input media file.
Metadata Editor (since 2.4)	The Metadata Editor API provides functions for editing the metadata of several popular audio format.
Media Vision (since 2.4)	Media Vision library provides functionality for barcodes detection and generation.
OpenAL	Efficiently renders multichannel 3D audio.
Recorder	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.
Screen Mirroring (since 2.4)	The Screen Mirroring API provides functions for screen mirroring as sink.
Sound Manager	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.
Thumbnail Util (since 2.4)	The Thumbnail Util API provides functions for creating the thumbnail from an input media file.
Tone Player	Plays and stops tones.					Bluetooth	Manages Bluetooth devices. This involves launching the Bluetooth adapter and discovering, connecting, and bonding with other Bluetooth devices.
Connection	Gets network connection information, such as IP address, proxy information, gateway information, connection state, and data transfer statistics.

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

NFC	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.
Wi-Fi	Manages Wi-Fi connections and monitors the state of Wi-Fi connections.
Wi-Fi Direct	Manages the settings of Wi-Fi Direct™. This submodule API also provides functions to connect and disconnect remote devices that use Wi-Fi Direct™.
Smartcard	Smartcard + (since 2.3.1)	Provides application communication to the SE applet methods.
Privilege Info	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.
Social	The Social API module contains submodule APIs to manage personal data, such as contacts and calendars on a device. Documentation: @@ -342,17 +422,22 @@	Manages phone contact information, such as address books, persons, and phone logs.
		System	The System API module contains submodule APIs for system management. +	System	The System API module contains submodule APIs for system management. Documentation: Guides: System Tutorials: System -	Device	Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.

Feedback (since 2.4)	The Feedback API provides functions to play sound or vibration associated with properties.
Media key	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.
System Settings	Manages system settings, such as the lock screen settings.
T-trace (since 2.4)	The T-trace API provides functions for writing trace message to the system trace buffer.
dlog	Sends log output and filters log messages from the dlog logging service.
Telephony	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. +					Telephony	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. Documentation: Guides: Telephony @@ -391,41 +481,53 @@	Telephony Information	Obtains call, network, and SIM information.
UI Framework	The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text. +					Telephony
		Phonenumber Utils (since 2.4)	The phonenumber utils API provides methods for parsing and formatting phone numbers.
		UI Framework	The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text. Documentation: UI Guides: EFL Guides: Graphics and UI Framework Tutorials: Graphics and UI Framework	Cairo	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.	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. Cairo EvasGL APIs have been newly added since 2.3.1.
				EFL
				EFL	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.
				EFL UTIL	Gets and sets the priority order of notification windows.

EFL Extension (since 2.3.1)	Enhances the EFL libraries and includes device-specific features (such as support for the hardware Back key).
External Output Manager (since 2.4)	The External Output Manager provides APIs for external outputs.
Fontconfig and Freetype	A text rendering library and font-handling library to let applications find a font or closely matching font.
OpenGL ES 1.1 and 2.0	Library for rendering 3D and 2D graphics in embedded systems.
Minicontrol (since 2.4)	Provides functions for creating EFL socket window and displaying EFL socket window.
TBM Surface	The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.
UIX	The UIX API module contains submodule APIs for managing sound data, such as voice commands. +	UIX	The UIX API module contains submodule APIs for managing sound data, such as voice commands. Documentation: Guides: UIX @@ -437,7 +539,15 @@	TTS	This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.
UIX
Input Method (since 2.4)	The Input Method API provides the functions for starting IME application lifecycle, methods to interact with current UI state of IME, and getting attributes/events.
Voice control (since 2.4)	The Voice control API provides functions for registering command and getting notification when registered command is recognized.
Web	The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents. Documentation: @@ -447,32 +557,29 @@	Json-Glib	This library allows reading and parsing of JavaScript Object Notation (JSON) documents.

		libOAuth	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.
WebView	Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.

The following figure and table define the wearable native API layout. The table describes the API modules and the functionality of all their 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.

The following table describes the API modules in the wearable profile and the functionality of all their submodule APIs.

Note
The wearable native profile is available since Tizen 2.3.1.

Figure: Wearable native API layout

Wearable native API layout

Note
The wearable native profile is available since Tizen 2.3.1.

Guides: Network
Tutorials: Network

Table: Wearable native API modules
Functionality
Account	The Account API module features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the oauth2 authorization. + Documentation: + + Guides: Account + Tutorials: Account +	Account Manager	The Account APIs provide CRUD (Create, Read, Update, Delete) account management functionality.
		OAuth 2.0 (since 2.4)	The OAuth 2.0 APIs provide easy way to gain access token between server and client.
		Sync Manager (since 2.4)	The Sync Manager API helps applications in scheduling their data sync operations.
Application Framework	The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user's application preferences. Documentation: @@ -537,8 +663,8 @@	Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.
		Base	The Base API contains submodule APIs for internationalization support and contains various open source libraries. +	Base	The Base API contains submodule APIs for internationalization support and contains various open source libraries. Documentation: Guides: Base @@ -548,7 +674,11 @@	Standard C++ library.
						EGlibc	zlib (since 2.4)	zlib is used for in-memory compression and decompression.
						Glibc	Standard C library.
						i18n	Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.

						LibXML	This library can be used to parse XML documents such as the Application Manifest.

						Minizip	Provides a library to process files in the .zip format. It can be used to zip, unzip and compress files.

		OpenMP	Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors.
Sqlite	Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.
Content	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. +	Content	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, and access the EXIF information of an image file. Documentation: Guides: Content @@ -588,7 +718,11 @@
Content				Media Content	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.
Download (since 2.4)	Creates and manages one or more download requests. Content is downloaded from servers through an HTTP connection.
Context	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. @@ -604,8 +738,8 @@	Detects user gestures on devices, such as tilt, snap, and double-tap.
Context		Location	The Location API module allows the geographical position of a device to be determined for use with location-based services. +	Location	The Location API module allows the geographical position of a device to be determined for use with location-based services. Documentation: Guides: Location @@ -614,14 +748,17 @@	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.
Maps Service (since 2.4)	Maps API provides a developer with a set of functions, helping to create Maps aware applications.			Location
Messaging	The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device. +	The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS and MMS, of the device. Documentation: Guides: Messaging Tutorials: Messaging - -	Messages	Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.
Messaging			Multimedia	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. - Documentation: +	Multimedia	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. + Documentation: Guides: Multimedia Tutorials: Multimedia	Image Util	Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.

libEXIF	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.
Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.
Media Controller (since 2.4)	The Media Controller API provides functions for communication between the media controller server and the media controller client.
Media Tool	Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.
Metadata Extractor	Extracts metadata information from an input media file.
Metadata Editor (since 2.4)	The Metadata Editor API provides functions for editing the metadata of several popular audio format.
Media Vision (since 2.4)	Media Vision library provides functionality for barcodes detection and generation.
OpenAL	Efficiently renders multichannel 3D audio.	Sound Manager					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.
Thumbnail Util (since 2.4)	The Thumbnail Util API provides functions for creating the thumbnail from an input media file.
Tone Player	Plays and stops tones.	Bluetooth					Manages Bluetooth devices. This involves launching the Bluetooth adapter and discovering, connecting, and bonding with other Bluetooth devices.
Connection	Gets network connection information, such as IP address, proxy information, gateway information, connection state, and data transfer statistics.

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

NFC	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.
Privilege Info	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.
System	The System API module contains submodule APIs for system management. +
		Social	The Social API module contains submodule APIs to manage personal data, such as contacts on a device. + Documentation: + + Guides: Contact + Tutorials: Contact	Contacts (since 2.4)	Manages phone contact information, such as address books, persons, and phone logs.
		System	The System API module contains submodule APIs for system management. Documentation: Guides: System Tutorials: System -	Device	Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.

				Feedback (since 2.4)	The Feedback API provides functions to play sound or vibration associated with properties.
				Media key	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.
				System Settings	Manages system settings, such as the lock screen settings.
				T-trace (since 2.4)	The T-trace API provides functions for writing trace message to the system trace buffer.
dlog	Sends log output and filters log messages from the dlog logging service.
Telephony	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. +			Telephony	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. Documentation: Guides: Telephony Tutorials: Telephony	Telephony Information	Obtains call, network, and SIM information.
UI Framework	The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text. +			Telephony
				Phonenumber Utils (since 2.4)	The phonenumber utils API provides methods for parsing and formatting phone numbers.
		UI Framework	The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text. Documentation: UI Guides: EFL Guides: Graphics and UI Framework Tutorials: Graphics and UI Framework	Cairo	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.	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. This module also includes Cairo EvasGL APIs which have been designed to support hardware-accelerated rendering.
				EFL
				EFL	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.
				EFL UTIL	Gets and sets the priority order of notification windows.

EFL Extension	Enhances the EFL libraries and includes device-specific features (such as support for rotary events).
External Output Manager (since 2.4)	The External Output Manager provides APIs for external outputs.
Fontconfig and Freetype	A text rendering library and font-handling library to let applications find a font or closely matching font.
OpenGL ES 1.1 and 2.0	Library for rendering 3D and 2D graphics in embedded systems.
Minicontrol (since 2.4)	Provides functions for creating EFL socket window and displaying EFL socket window.
TBM Surface	The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.
UIX	The UIX API module contains submodule APIs for managing sound data, such as voice commands. +	UIX	The UIX API module contains submodule APIs for managing sound data, such as voice commands. Documentation: Guides: UIX @@ -838,7 +1022,16 @@	TTS	This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.
UIX
Input Method (since 2.4)	The Input Method API provides the functions for starting IME application lifecycle, methods to interact with current UI state of IME, and getting attributes/events.
Voice control (since 2.4)	The Voice control API provides functions for registering command and getting notification when registered command is recognized.
Web	The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents. Documentation: @@ -852,10 +1045,10 @@	libOAuth	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.

		WebView	Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.

Attached Debugging

The attached debugging method is effective for debugging Tizen applications that have no external interaction with the UI, such as middle-ware and libraries. This method attaches the "gdb" debugger to an application which is running in a target.

If the IDE workspace has a project that contains the source code of the application currently running on the target, you can apply "attach debugging" at a source level.

To debug an application that is already running on the emulator or a device

To debug an application that is already running on the emulator or a device:

In the Project Explorer view, right-click the project and select Debug As > Tizen native Application - Attach.
Note that the source code of the project should be related to the application that is running on the target.
In the Project Explorer view, right-click the project and select Debug As > Tizen native Application - Attach.
+
Note that the source code of the project must be related to the application that is running on the target.

Remote Debugging

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 "GDB client" on the host side and a "GDB server" on the target side. Both sides must be connected by serial or TCP/IP communication.

Figure: Remote debugging

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 fixed: 1 1; on part1 for the correct calculation to fix the problem:

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 fixed: 1 1; on part1 for the correct calculation to fix the problem:

ERR<4357>: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.

Deprecated since 2.3.1

http://tizen.org/privilege/telephony

Deprecated since 2.4.

Deprecated since 2.3.1

http://tizen.org/privilege/telephony

The <TIZEN_SDK_DATA> directory is different for different platforms:

In Ubuntu: /home/${USER_NAME}/tizen-sdk-data (in mobile Web projects) or /home/${USER_NAME}/tizen-wearable-sdk-data (in wearable Web projects)
In Windows® XP: C:\tizen-sdk-data (in mobile Web projects) or C:\tizen-wearable-sdk-data (in wearable Web projects)
In Windows® 7: C:\tizen-sdk-data (in mobile Web projects) or C:\tizen-wearable-sdk-data (in wearable Web projects)
In Linux: /home/${USER_NAME}/tizen-sdk-data (in mobile Web projects) or /home/${USER_NAME}/tizen-wearable-sdk-data (in wearable Web projects)

The project 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.

The following table describes the files included in a user template in addition to the project folder content.

Use the Emulator Manager:
1. Start the Emulator Manager using the Desktop (in Linux) or Start menu (in Windows®), or using the command line.
2. Start the Emulator Manager using the Desktop (in Ubuntu) or Start menu (in Windows®), or using the command line.
3. In the Emulator Manager window, select the Emulator image in the Name column.
  If you are using the Emulator Manager for the first time, you must create an Emulator image. To create an Emulator image, click Create New, set the image details, and click Save.
4. Click Launch.

download

background-network

- +

Content

Notification Types
Notification Layouts

Related Info

Notification Tutorial

Active notification

Notification Layouts

5 types of layouts are provided. The notifications layout can be one of the following:

NOTIFICATION_LY_NOTI_EVENT_SINGLE -
Layout for notification. Used to inform single event.
NOTIFICATION_LY_NOTI_EVENT_MULTIPLE -
Layout for notification. Used to inform multiple event.
NOTIFICATION_LY_NOTI_THUMBNAIL -
Layout for notification. Used to display images.
NOTIFICATION_LY_ONGOING_EVENT -
Layout for ongoing notification. Used to display text message.
NOTIFICATION_LY_ONGOING_PROGRESS -
Layout for ongoing notification. Used to display progress.

The following notification layouts are provided:

NOTIFICATION_LY_NOTI_EVENT_SINGLE +
Layout for a single event notification.
NOTIFICATION_LY_NOTI_EVENT_MULTIPLE +
Layout for a multiple event notification.
NOTIFICATION_LY_NOTI_THUMBNAIL +
Layout for a notification displaying images.
NOTIFICATION_LY_ONGOING_EVENT +
Layout for an ongoing notification displaying a text message.
NOTIFICATION_LY_ONGOING_PROGRESS +
Layout for an ongoing notification displaying progress.

Figure: Notification layouts

Notification layouts

diff --git a/org.tizen.guides/html/native/context/history_n.htm b/org.tizen.guides/html/native/context/history_n.htm index abb4866..4c17180 100644 --- a/org.tizen.guides/html/native/context/history_n.htm +++ b/org.tizen.guides/html/native/context/history_n.htm @@ -50,7 +50,7 @@ -

The Contextual History API provides history data about application usage, media playback, communications, and device settings. When an application reads each type of history data, the application must set filters (mandatory and optional) to specify the necessary statistics. The following example shows how to get information about the 5 most frequently used applications from the last 30 days.

The Contextual History API provides history data about application usage, media playback, communications, and device settings. When an application reads each type of history data, the application can set filters to specify the necessary statistics. The following example shows how to get information about the 5 most frequently used applications from the last 30 days.

 // Setting filter key and values
 context_history_filter_set_int(filter, CONTEXT_HISTORY_FILTER_RESULT_SIZE, 5);
@@ -65,7 +65,7 @@ Once the context_hist
 
 History Data Types
 
-Through contextual history, you can mainly retrieve statistics for 3 types of usages logs, including application usage, media playback, and communications. The following table summarizes the available history data types and required privileges.
+Through contextual history, you can mainly retrieve statistics for 3 categories of usage logs, including application usage, media playback, and communications. The following table summarizes the available history data types and required privileges.
 
 
@@ -154,7 +154,7 @@ Once the context_hist
 			
-			
@@ -174,6 +174,13 @@ Once the context_hist
 			
 		
+			
+
 			
-			
-			
-			
-		
-		
-			
-			
-			
+			
+			
+
 			
diff --git a/org.tizen.guides/html/native/graphics/opengles_n.htm b/org.tizen.guides/html/native/graphics/opengles_n.htm
index 60060f7..218b477 100644
--- a/org.tizen.guides/html/native/graphics/opengles_n.htm
+++ b/org.tizen.guides/html/native/graphics/opengles_n.htm
@@ -29,8 +29,6 @@
         Related Info

             OpenGL ES Tutorial
-			OpenGL ES API for Mobile Native
-			OpenGL ES API for Wearable Native
             
@@ -41,7 +39,7 @@
  
 The OpenGL ES overview shows the interaction among Graphics subsystems, OpenGL ES, and EGL defined by the Khronos Group.
 
-OpenGL ES is a standard specification defining a cross-language, cross-platform OpenGL ES API (in mobile and wearable applications) 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.)
+OpenGL ES is a standard specification defining a cross-language, cross-platform OpenGL ES 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.)
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.
 
diff --git a/org.tizen.guides/html/native/social/service_adaptor_n.htm b/org.tizen.guides/html/native/social/service_adaptor_n.htm
index 7f2236f..450521d 100644
--- a/org.tizen.guides/html/native/social/service_adaptor_n.htm
+++ b/org.tizen.guides/html/native/social/service_adaptor_n.htm
@@ -38,7 +38,7 @@
 
 Service Adaptor
 
-You can manage adaptors, which function as agents between the Service Adaptor Client and the related plugins, to take advantage of various services. For example, the Auth and Storage adaptors allow you to access the Auth and Service Plugins to use services, such as Amazon, Box, Dropbox, Googledrive, Onedrive, and Sugarsync.
+You can manage adaptors, which function as agents between the Service Adaptor Client and the related plugins, to take advantage of various services. For example, the Auth and Storage adaptors allow you to access the Auth and Service Plugins to use services, such as Amazon, Box, Dropbox, Google Drive, Onedrive, and Sugarsync.
 
 Figure: Service adaptor structure
 
diff --git a/org.tizen.guides/html/native/system/sysinfo_n.htm b/org.tizen.guides/html/native/system/sysinfo_n.htm
index f476908..2addb7f 100644
--- a/org.tizen.guides/html/native/system/sysinfo_n.htm
+++ b/org.tizen.guides/html/native/system/sysinfo_n.htm
@@ -807,6 +807,21 @@ the Tizen reference implementation.
 	 
+       
+     
+        
+    
+    
+       
+     
+        
+    
+    
+       
+		
+        
+    
+	
diff --git a/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm b/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm
index e75ac8b..d63d03f 100644
--- a/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm
+++ b/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm
@@ -23,8 +23,8 @@
 		Related Info

 			Voice Control Tutorials	
-			Voice Control API for Mobile Native
-			Voice Control API for Wearable Native
+			Voice Control API for Mobile Native
+			Voice Control API for Wearable Native
 			
diff --git a/org.tizen.sampledescriptions/html/images/application_control_0.png b/org.tizen.sampledescriptions/html/images/application_control_0.png
new file mode 100644
index 0000000..bb234ac
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/application_control_0.png differ
diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_mn1.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn1.png
new file mode 100644
index 0000000..14cabdf
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn1.png differ
diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_mn2.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn2.png
new file mode 100644
index 0000000..9581113
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn2.png differ
diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_mn3.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn3.png
new file mode 100644
index 0000000..c70a20b
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn3.png differ
diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_mn4.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn4.png
new file mode 100644
index 0000000..e7bc1ac
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn4.png differ
diff --git a/org.tizen.sampledescriptions/html/images/notification_manager_wn.png b/org.tizen.sampledescriptions/html/images/notification_manager_wn.png
new file mode 100644
index 0000000..4e45076
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/notification_manager_wn.png differ
diff --git a/org.tizen.sampledescriptions/html/images/puzzle.png b/org.tizen.sampledescriptions/html/images/puzzle.png
new file mode 100644
index 0000000..f42967f
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/puzzle.png differ
diff --git a/org.tizen.sampledescriptions/html/images/puzzle_main.png b/org.tizen.sampledescriptions/html/images/puzzle_main.png
new file mode 100644
index 0000000..3080518
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/puzzle_main.png differ
diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_0.png b/org.tizen.sampledescriptions/html/images/quickpanel_0.png
new file mode 100644
index 0000000..22f29e3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_0.png differ
diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_1.png b/org.tizen.sampledescriptions/html/images/quickpanel_1.png
new file mode 100644
index 0000000..c92dfef
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_1.png differ
diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_2.png b/org.tizen.sampledescriptions/html/images/quickpanel_2.png
new file mode 100644
index 0000000..e5542b8
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_2.png differ
diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_3.png b/org.tizen.sampledescriptions/html/images/quickpanel_3.png
new file mode 100644
index 0000000..5db6695
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_3.png differ
diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_4.png b/org.tizen.sampledescriptions/html/images/quickpanel_4.png
new file mode 100644
index 0000000..3304bd1
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_4.png differ
diff --git a/org.tizen.sampledescriptions/html/images/rotary_timer.png b/org.tizen.sampledescriptions/html/images/rotary_timer.png
new file mode 100644
index 0000000..9c8d76e
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/rotary_timer.png differ
diff --git a/org.tizen.sampledescriptions/html/images/rotary_timer_set.png b/org.tizen.sampledescriptions/html/images/rotary_timer_set.png
new file mode 100644
index 0000000..340a82a
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/rotary_timer_set.png differ
diff --git a/org.tizen.sampledescriptions/html/images/sketch1.png b/org.tizen.sampledescriptions/html/images/sketch1.png
new file mode 100644
index 0000000..7ea8a88
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch1.png differ
diff --git a/org.tizen.sampledescriptions/html/images/sketch2.png b/org.tizen.sampledescriptions/html/images/sketch2.png
new file mode 100644
index 0000000..dfaf71a
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch2.png differ
diff --git a/org.tizen.sampledescriptions/html/images/sketch3.png b/org.tizen.sampledescriptions/html/images/sketch3.png
new file mode 100644
index 0000000..20c1d99
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch3.png differ
diff --git a/org.tizen.sampledescriptions/html/images/sketch4.png b/org.tizen.sampledescriptions/html/images/sketch4.png
new file mode 100644
index 0000000..5bccfeb
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch4.png differ
diff --git a/org.tizen.sampledescriptions/html/images/sketch5.png b/org.tizen.sampledescriptions/html/images/sketch5.png
new file mode 100644
index 0000000..2db8899
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch5.png differ
diff --git a/org.tizen.sampledescriptions/html/images/stopwatch_screenshot.png b/org.tizen.sampledescriptions/html/images/stopwatch_screenshot.png
new file mode 100644
index 0000000..e8a3b0c
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stopwatch_screenshot.png differ
diff --git a/org.tizen.sampledescriptions/html/images/stopwatch_structure.png b/org.tizen.sampledescriptions/html/images/stopwatch_structure.png
new file mode 100644
index 0000000..1b5d313
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stopwatch_structure.png differ
diff --git a/org.tizen.sampledescriptions/html/images/stopwatch_structure2.png b/org.tizen.sampledescriptions/html/images/stopwatch_structure2.png
new file mode 100644
index 0000000..7b9cc63
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stopwatch_structure2.png differ
diff --git a/org.tizen.sampledescriptions/html/images/stopwatch_structure4.png b/org.tizen.sampledescriptions/html/images/stopwatch_structure4.png
new file mode 100644
index 0000000..4014ab3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stopwatch_structure4.png differ
diff --git a/org.tizen.sampledescriptions/html/images/system_info_1.png b/org.tizen.sampledescriptions/html/images/system_info_1.png
new file mode 100644
index 0000000..eee77e0
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/system_info_1.png differ
diff --git a/org.tizen.sampledescriptions/html/images/system_info_2.png b/org.tizen.sampledescriptions/html/images/system_info_2.png
new file mode 100644
index 0000000..bea3ab3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/system_info_2.png differ
diff --git a/org.tizen.sampledescriptions/html/images/system_info_3.png b/org.tizen.sampledescriptions/html/images/system_info_3.png
new file mode 100644
index 0000000..b7ed9ec
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/system_info_3.png differ
diff --git a/org.tizen.sampledescriptions/html/index.htm b/org.tizen.sampledescriptions/html/index.htm
index 75a457d..6bf6ea0 100644
--- a/org.tizen.sampledescriptions/html/index.htm
+++ b/org.tizen.sampledescriptions/html/index.htm
@@ -87,6 +87,8 @@
 	
 		Mobile Native
 		
+			Application Control
+			Bluetooth Chat
 			Bundle
 			Cairo Basic
 			Cairo EvasGL
@@ -107,11 +109,16 @@
 			Pedometer			
 			Piano
 			Preference
+			Puzzle
+			Quickpanel
 			Scheduler
 			Scroller Index
 			SelfCamera
 			SensorApp
 			Simple Homescreen
+			Sketch
+			Stopwatch
+			System Info
 			Taskmanager
 			UI Components
 			Volume			
@@ -164,9 +171,11 @@
 			(Circle) Cairo Basic
 			(Circle) Cairo EvasGL
 			(Circle) Email
+			(Circle) Rotary Timer
 			(Circle) Setting Time
 			(Circle) Settings
 			(Rectangle) Email
+			(Rectangle) NotificationManager
 			(Rectangle) Settings
 			(Rectangle) UI Dialer
 			Analog Watch
diff --git a/org.tizen.sampledescriptions/html/mobile_n/application_control_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/application_control_sd_mn.htm
new file mode 100644
index 0000000..55c5e32
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/application_control_sd_mn.htm
@@ -0,0 +1,196 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	Application Control Sample Overview
+
+
+
+
+
+	
+
+
+	
+		
+	
+  Application Control Sample Overview
+The Application Control sample application uses the App Control API to search for applications supporting specific operations. The following operations have been selected in this application:
+
+	APP_CONTROL_OPERATION_VIEW: enables data display
+	APP_CONTROL_OPERATION_PICK: picks an item from the data
+	APP_CONTROL_OPERATION_COMPOSE: composes (for example a message)
+
+The figure below illustrates the application view.
+	Figure: Application control view
+	
+
+
+In the main window the application launch panel enables the user to choose one of the available operations, and search, run, and stop found applications. The message composing area enables the user to compose a message, set the destination address, and send it using the default email application.
+
+Prerequisites
+To ensure proper application execution, the following privileges must be set:
+ 
+  http://tizen.org/privilege/appmanager.kill.bgapp
+  http://tizen.org/privilege/appmanager.launch
+  http://tizen.org/privilege/email
+  http://tizen.org/privilege/datasharing
+ 
+
+Implementation
+Application Launch Panel
+
+The controller_search_app() function is invoked on a search button click event.
+
++void controller_search_app(int selected_operation_id)
+{
+   app_control_h app_control = NULL;
+
+   model_free_app_control_selection();
+
+   const char *operation = model_get_operation_name(selected_operation_id);
+   if (!operation)
+      return;
+
+   int ret = app_control_create(&app_control);
+   // Error handling
+
+   ret = app_control_set_operation(app_control, operation);
+   // Error handling
+
+   ret = app_control_foreach_app_matched(app_control, app_control_application_matched_cb, NULL);
+   // Error handling
+
+   app_control_destroy(app_control);
+}
+
+
+After the call to the app_control_foreach_app_matched() function, the app_control_application_matched_cb() function is called for each installed application that meets the criteria specified by the operation type. On each call to this function, one radio button is added to the popup window.
++static bool app_control_application_matched_cb(app_control_h app_control, const char *appid, void *user_data)
+{
+   bool new_radio_group = false;
+
+   if (!view_is_shown_popup_window()) 
+   {
+      new_radio_group = true;
+      // Error handling
+   }
+
+   if (view_add_popup_window_radio_button(appid, new_radio_group))
+      model_add_application_id(appid);
+
+   view_disable_button(controller_data.viewdata, BUTTON_EXECUTE, EINA_FALSE);
+
+   return true;
+}
+
+
+Once the user has chosen an application from the popup window, the Execute button becomes available. The following code is invoked upon the click event.
+The following code launches the selected application using app_control_send_launch_request() API function. Note that it also sets some additional operation data using the app_control_add_extra_data() function. This way, if the application supports these data keys, its behaviour is altered. For instance, the email application is started in the message creation mode. All the necessary message fields are filled with the defined extra data and the message is ready to be sent.
++void controller_execute(void)
+{
+   // Declare the variables
+
+   if (!model_get_app_control_selection(&operation, &appid)) 
+   {
+      // Error handling
+   }
+
+   int ret = app_control_set_operation(controller_data.launch_app_control, operation);
+   // Error handling
+
+   ret = app_control_set_app_id(controller_data.launch_app_control, appid);
+   // Error handling
+
+   ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_TO, COMPOSE_OP_RECIPIENT);
+   if (ret == APP_CONTROL_ERROR_NONE)
+      ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_CC, COMPOSE_OP_RECIPIENT_CC);
+   if (ret == APP_CONTROL_ERROR_NONE)
+      ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_BCC, COMPOSE_OP_RECIPIENT_BCC);
+   if (ret == APP_CONTROL_ERROR_NONE)
+      ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_SUBJECT, COMPOSE_OP_SUBJECT);
+   if (ret == APP_CONTROL_ERROR_NONE)
+      ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_TEXT, COMPOSE_OP_MESSAGE);
+
+   // Error handling
+
+   ret = app_control_send_launch_request(controller_data.launch_app_control, __app_control_launch_reply_cb, NULL);
+   // Error handling
+
+   view_disable_button(controller_data.viewdata, BUTTON_KILL, EINA_FALSE);
+}
+
+
+
+Message Composing Area
+
+This sample application also gives the user the possibility to compose a message and launch the default email application for the message to be sent. When Send message button is clicked, the following code is executed:
+
++void controller_send_message(const char *email_address, const char *email_body)
+{
+   app_control_h app_control = NULL;
+
+   int ret = app_control_create(&app_control);
+   // Error handling
+
+   ret = app_control_set_launch_mode(app_control, APP_CONTROL_LAUNCH_MODE_GROUP);
+   // Error handling
+
+   ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_COMPOSE);
+   // Error handling
+
+   ret = app_control_set_app_id(app_control, EMAIL_APP_ID);
+   // Error handling
+
+   ret = app_control_add_extra_data(app_control, APP_CONTROL_DATA_TO, email_address);
+   // Error handling
+
+   ret = app_control_add_extra_data(app_control, APP_CONTROL_DATA_SUBJECT, EMAIL_DEFAULT_MESSAGE_SUBJECT);
+   // Error handling
+
+   ret = app_control_add_extra_data(app_control, APP_CONTROL_DATA_TEXT, email_body);
+   // Error handling
+
+   ret = app_control_send_launch_request(app_control, __app_control_launch_reply_cb, NULL);
+   // Error handling
+
+   app_control_destroy(app_control);
+}
+
+  
+  
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm
new file mode 100644
index 0000000..1598d1c
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm
@@ -0,0 +1,607 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	Bluetooth Chat Sample Overview
+
+
+
+
+
+	
+
+
+	
+		
+	
+  Bluetooth Chat Sample Overview
+
+The Bluetooth Chat sample application demonstrates how you can send and receive data between two devices.
+
+The following figure illustrates the screens of the sample application.
+
+Figure: Bluetooth Chat screens
+ 
+
+The main screen has 2 buttons for finding devices and creating a server. The chat room screen is created with the [UI Sample] MessageBubble sample application. 
+
+Implementation
+
+By clicking the buttons, the application calls the bt_mgr_initialize() function, and checks whether the Bluetooth is on or off. If Bluetooth is off, the application calls the Bluetooth ON/OFF application to turn on Bluetooth.
+Figure: Bluetooth ON/OFF application
+
+ 
+
+If the bt_mgr_initialize() function is called and Bluetooth is on, it draws proper layouts according to the roles of the application, as a client or a server.
++void bt_mgr_initialize(void *data, bt_mgr_type type)
+{
+   appdata_s *ad = NULL;
+   bt_adapter_state_e bt_ad_state = BT_ADAPTER_DISABLED;
+   bt_adapter_visibility_mode_e bt_ad_visibility = BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE;
+   int ret = 0;
+   int duration = 1;
+
+   ad = (appdata_s *)data;
+   ret_if(!ad);
+
+   ret = bt_initialize();
+   ret_if(ret != BT_ERROR_NONE);
+
+   ret = bt_adapter_get_state(&bt_ad_state);
+   ret_if(ret != BT_ERROR_NONE);
+
+   if (bt_ad_state == BT_ADAPTER_DISABLED) 
+   {
+      _onoff_operation();
+   } 
+   else 
+   {
+      switch(type) 
+      {
+         case BT_MGR_SEARCH:
+            _search_layout_create(ad);
+            break;
+         case BT_MGR_WAIT:
+            ret = bt_adapter_get_visibility(&bt_ad_visibility, &duration);
+            if (ret != BT_ERROR_NONE) 
+            {
+               _E("Failed to get the adapter visibility");
+               return;
+            }
+
+            if (bt_ad_visibility != BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE) 
+            {
+               _server_layout_create(ad);
+            } 
+            else 
+            {
+               _visibility_operation_set();
+            }
+            break;
+      }
+   }
+}
+static void _onoff_operation(void)
+{
+   int ret = 0;
+   app_control_h service = NULL;
+
+   app_control_create(&service);
+   ret_if(!service);
+
+   app_control_set_operation(service, "http://tizen.org/appcontrol/operation/edit");
+   app_control_set_mime(service, "application/x-bluetooth-on-off");
+   ret = app_control_send_launch_request(service, NULL, NULL);
+   if (ret != APP_CONTROL_ERROR_NONE) 
+   {
+      _E("Failed to relaunch Bluetooth On/off app");
+   }
+
+   app_control_destroy(service);
+}
+
+
+Client
+
+A client is an application which is started by clicking the button, Search Friends. It draws its own layout by the _search_layout_create() function, which is called by the bt_mgr_initialize() function. The layout is a list of the found devices.
++static void _search_layout_create(appdata_s *ad)
+{
+   int ret = 0;
+
+   ret_if(!ad);
+   ret_if(!ad->navi);
+
+   ad->role = BT_SOCKET_CLIENT;
+
+   s_info.list = elm_list_add(ad->navi);
+   ret_if(!s_info.list);
+
+   evas_object_event_callback_add(s_info.list, EVAS_CALLBACK_DEL, _on_search_del_cb, ad);
+   evas_object_size_hint_weight_set(s_info.list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(s_info.list, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_list_go(s_info.list);
+   elm_naviframe_item_push(ad->navi, "Search Friends", NULL, NULL, s_info.list, NULL);
+
+   ret = bt_socket_set_connection_state_changed_cb(_socket_conn_state_changed_cb, ad);
+   ret_if(ret != BT_ERROR_NONE);
+
+   _discovery_start(ad);
+}
+
+
+While drawing the list, the application starts finding devices by the _discovery_start() function. Set the device discovery state changed callback, and update the list whenever new device is found.
++static void _discovery_start(appdata_s *ad)
+{
+   bt_error_e ret = BT_ERROR_NONE;
+
+   ret_if(!ad);
+   ret_if(ad->bt);
+
+   ad->bt = TRUE;
+
+   ret = bt_adapter_set_device_discovery_state_changed_cb(_adapter_discovery_state_changed_cb, ad);
+   ret_if(ret != BT_ERROR_NONE);
+
+   ret = bt_adapter_start_device_discovery();
+   ret_if(ret != BT_ERROR_NONE);
+}
+
+static void _adapter_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)
+{
+   appdata_s *ad = NULL;
+   bt_adapter_device_discovery_info_s *new_device_info = NULL;
+   int ret = 0;
+
+   ad = (appdata_s *)user_data;
+   ret_if(!ad);
+
+   ret_if(!s_info.list);
+   ret_if(result != BT_ERROR_NONE);
+
+   switch (discovery_state) 
+   {
+      case BT_ADAPTER_DEVICE_DISCOVERY_STARTED:
+         _D("BT_ADAPTER_DEVICE_DISCOVERY_STARTED");
+         break;
+      case BT_ADAPTER_DEVICE_DISCOVERY_FINISHED:
+         _D("BT_ADAPTER_DEVICE_DISCOVERY_FINISHED");
+         ret = bt_adapter_unset_device_discovery_state_changed_cb();
+         if (ret != BT_ERROR_NONE) 
+         {
+            _E("[BT_ADAPTER_DEVICE_DISCOVERY_FINISHED] Failed to unset the state discovery cb");
+            return;
+         }
+         ad->bt = FALSE;
+         break;
+      case BT_ADAPTER_DEVICE_DISCOVERY_FOUND:
+         _D("BT_ADAPTER_DEVICE_DISCOVERY_FOUND");
+         if (discovery_info != NULL && s_info.list != NULL) 
+         {
+            new_device_info = malloc(sizeof(bt_adapter_device_discovery_info_s));
+            if (new_device_info != NULL) 
+            {
+               _D("Device Name is: %s", discovery_info->remote_name);
+               memcpy(new_device_info, discovery_info, sizeof(bt_adapter_device_discovery_info_s));
+               new_device_info->remote_address = strdup(discovery_info->remote_address);
+               new_device_info->remote_name = strdup(discovery_info->remote_name);
+               elm_list_item_append(s_info.list, new_device_info->remote_name, 
+                                    NULL, NULL, _click_friend_item_cb, new_device_info);
+               elm_list_go(s_info.list);
+            }
+         }
+         break;
+   }
+}
+
+
+If an item on the list is clicked, the application starts to bond with the target device, and requests to connect to the target server.
++static void _socket_conn_state_changed_cb(int result, bt_socket_connection_state_e connection_state, 
+                                          bt_socket_connection_s *connection, void *user_data)
+{
+   appdata_s *ad = (appdata_s *)user_data;
+   ret_if(!ad);
+
+   ret_if(result != BT_ERROR_NONE);
+
+   if (connection_state == BT_SOCKET_CONNECTED) 
+   {
+      if (connection != NULL) 
+      {
+         _D("Connected %d %d", ad->socket_fd, connection->socket_fd);
+         ad->role = connection->local_role;
+         ad->socket_fd = connection->socket_fd;
+         elm_naviframe_item_pop(ad->navi);
+         bt_chat_room_layout_create(ad);
+         if (s_info.noti) 
+         {
+            evas_object_del(s_info.noti);
+            s_info.noti = NULL;
+         }
+      } 
+      else 
+      {
+         _D("No connection data");
+      }
+   } 
+   else 
+   {
+      ad->socket_fd = -1;
+      _D("Disconnected");
+   }
+}
+
+static void _device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
+{
+   int ret = 0;
+
+   if (result != BT_ERROR_NONE) 
+   {
+      _E("Failed result: %d", result);
+      goto DEL_NOTI;
+   }
+
+   if (device_info != NULL &&
+   !strncmp(device_info->remote_address, s_info.info->remote_address, strlen(device_info->remote_address))) 
+   {
+      ret = bt_socket_connect_rfcomm(s_info.info->remote_address, BT_MGR_UUID);
+      if (ret != BT_ERROR_NONE) 
+      {
+         _E("[bt_socket_listen_and_accept_rfcomm] Failed");
+         goto DEL_NOTI;
+      }
+   } 
+   else 
+   {
+      _D("[bond create cb] Bonded with another device");
+      goto DEL_NOTI;
+   }
+
+   return;
+
+DEL_NOTI:
+
+   if (s_info.noti) 
+   {
+      evas_object_del(s_info.noti);
+      s_info.noti = NULL;
+   }
+
+   return;
+}
+
+If successfully connected with the target, the _socket_conn_state_changed_cb() function is called and the application moves to the chat room layout by calling the _bt_chat_room_layout_create() function.
+
+
+Server
+
+A server is an application which is started by clicking Wait a friend. The role of this application  is making a server for chatting, and waiting for a client. Before drawing the proper layout, the application checks whether the device is discoverable or not by the _search_layout_create() function. If the device is not discoverable, the application calls the Bluetooth Visibility Application.
++static void _visibility_operation_set(void)
+{
+   app_control_h service = NULL;
+   int ret = 0;
+
+   app_control_create(&service);
+   ret_if(!service);
+
+   app_control_set_operation(service, "http://tizen.org/appcontrol/operation/edit");
+   app_control_set_mime(service, "application/x-bluetooth-visibility");
+   ret = app_control_send_launch_request(service, NULL, NULL);
+   if (ret != APP_CONTROL_ERROR_NONE) 
+   {
+      _E("Failed to relaunch Bluetooth Visibility app");
+   }
+
+   app_control_destroy(service);
+}
+
+
+A server application also registers the callback for detecting the state of the socket connection. The callback function is same as that of client. The application creates a server, and when the socket connection state changes to BT_SOCKET_CONNECTED, it moves to the chat room layout.
++static void _server_layout_create(appdata_s *ad)
+{
+   Evas_Object *layout = NULL;
+   Evas_Object *progress = NULL;
+   char edj_path[PATH_MAX] = { 0, };
+
+   ad->role = BT_SOCKET_SERVER;
+
+   app_resource_get(CREATE_SERVER, edj_path, (int)PATH_MAX);
+   layout = elm_layout_add(ad->navi);
+   goto_if(!layout, ERROR);
+   elm_layout_file_set(layout, edj_path, "create_server");
+   evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+   progress = elm_progressbar_add(layout);
+   goto_if(!progress, ERROR);
+   elm_object_style_set(progress, "process_large");
+   evas_object_size_hint_min_set(progress, 100, 100);
+   evas_object_size_hint_align_set(progress, 0.5, 0.5);
+   evas_object_size_hint_weight_set(progress, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_progressbar_pulse(progress, EINA_TRUE);
+
+   elm_object_part_content_set(layout, "progress", progress);
+
+   elm_naviframe_item_push(ad->navi, "Wait a Friend", NULL, NULL, layout, NULL);
+
+   _server_create(ad);
+
+   return;
+
+ERROR:
+   if (layout) 
+   {
+      evas_object_del(layout);
+      layout = NULL;
+   }
+
+   if (progress) 
+   {
+      evas_object_del(progress);
+      progress = NULL;
+   }
+
+   return;
+}
+
+
+
+Chat Room
+To implement the chat room layout and send a message:
+
+
+Draw the layout:
++static Evas_Object *_main_view_create(appdata_s *ad)
+{
+   Evas_Object *main_scroller = NULL;
+   Evas_Object *input_field_table = NULL;
+
+   retv_if(!ad, NULL);
+
+   main_scroller = elm_scroller_add(ad->navi);
+   goto_if(!main_scroller, ERROR);
+   elm_scroller_bounce_set(main_scroller, EINA_FALSE, EINA_TRUE);
+   evas_object_size_hint_weight_set(main_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(main_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(main_scroller);
+
+   s_info.main_box = elm_box_add(main_scroller);
+   goto_if(!s_info.main_box, ERROR);
+   elm_box_align_set(s_info.main_box, 0, 0);
+   evas_object_size_hint_weight_set(s_info.main_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_show(s_info.main_box);
+
+   s_info.bubble_scroller = elm_scroller_add(s_info.main_box);
+   goto_if(!s_info.bubble_scroller, ERROR);
+   elm_scroller_bounce_set(s_info.bubble_scroller, EINA_FALSE, EINA_TRUE);
+   evas_object_size_hint_weight_set(s_info.bubble_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(s_info.bubble_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+   s_info.bubble_box = elm_box_add(s_info.bubble_scroller);
+   goto_if(!s_info.bubble_box, ERROR);
+   elm_box_align_set(s_info.bubble_box, 0, 0);
+   evas_object_size_hint_weight_set(s_info.bubble_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_show(s_info.bubble_box);
+   elm_box_padding_set(s_info.bubble_box, ELM_SCALE_SIZE(10), ELM_SCALE_SIZE(15));
+
+   elm_object_content_set(s_info.bubble_scroller, s_info.bubble_box);
+   evas_object_show(s_info.bubble_scroller);
+   elm_box_pack_end(s_info.main_box, s_info.bubble_scroller);
+
+   input_field_table = _input_field_table_create(ad);
+   goto_if(!input_field_table, ERROR);
+   evas_object_show(input_field_table);
+   elm_box_pack_end(s_info.main_box, input_field_table);
+   elm_object_content_set(main_scroller, s_info.main_box);
+
+   return main_scroller;
+
+ERROR:
+   if (main_scroller) 
+   {
+      evas_object_del(main_scroller);
+      main_scroller = NULL;
+   }
+
+   if (input_field_table) 
+   {
+      evas_object_del(input_field_table);
+      input_field_table = NULL;
+   }
+
+   return NULL;
+}
+
+static void _on_main_scroller_del_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+   if (s_info.main_box) 
+   {
+      evas_object_del(s_info.main_box);
+      s_info.main_box = NULL;
+   }
+
+   if (s_info.bubble_scroller) 
+   {
+      evas_object_del(s_info.bubble_scroller);
+      s_info.bubble_scroller = NULL;
+   }
+
+   if (s_info.bubble_box) 
+   {
+      evas_object_del(s_info.bubble_box);
+      s_info.bubble_box = NULL;
+   }
+
+   if (s_info.input_field_entry) 
+   {
+      evas_object_del(s_info.input_field_entry);
+      s_info.input_field_entry = NULL;
+   }
+}
+
+
+Manage the connection state changes: 
++static void _socket_conn_state_changed_cb(int result, bt_socket_connection_state_e connection_state, 
+                                          bt_socket_connection_s *connection, void *user_data)
+{
+   Evas_Object *noti = NULL;
+   appdata_s *ad = NULL;
+
+   ad = (appdata_s *)user_data;
+   ret_if(!ad);
+   ret_if(result != BT_ERROR_NONE);
+
+   _D("[_socket_conn_state_changed_cb] Changed");
+   if (connection_state == BT_SOCKET_DISCONNECTED) 
+   {
+      _I("[_socket_conn_state_changed_cb] Disconnected");
+      ad->socket_fd = -1;
+      noti = bt_noti_popup_create(ad->navi, "Disconnected with the Friend", EINA_FALSE);
+   }
+}
+
+
+Receive the data:
++static void _socket_data_received_cb(bt_socket_received_data_s *data, void *user_data)
+{
+   Evas_Object *bubble_table = NULL;
+   char *message = NULL;
+
+   ret_if(!data);
+
+   message = strndup(data->data, data->data_size);
+   goto_if(!message, ERROR);
+
+   bubble_table = _bubble_table_create(s_info.bubble_box, MESSAGE_BUBBLE_RECEIVE, message, _current_time_get());
+   goto_if(!bubble_table, ERROR);
+
+   evas_object_show(bubble_table);
+   elm_box_pack_end(s_info.bubble_box, bubble_table);
+
+   evas_object_event_callback_add(s_info.bubble_box, EVAS_CALLBACK_RESIZE, _bubble_box_resize_cb, NULL);
+
+   free(message);
+
+   return;
+
+ERROR:
+   if (bubble_table) 
+   {
+      evas_object_del(bubble_table);
+      bubble_table = NULL;
+   }
+
+   if (message) 
+   {
+      free(message);
+      message = NULL;
+   }
+
+   return;
+}
+
+
+The chat room is created by calling the bt_chat_room_layout_create() function. The function draws the layout for chatting, and unsets the callback of connection state change and reregisters it. It also registers the data received callback. When the message is received from the target, the application makes a message bubble for a new message.
++void bt_chat_room_layout_create(appdata_s *ad)
+{
+   Evas_Object *main_scroller = NULL;
+   int ret = -1;
+
+   bt_socket_set_data_received_cb(_socket_data_received_cb, NULL);
+
+   ret = bt_socket_unset_connection_state_changed_cb();
+   ret_if(ret != BT_ERROR_NONE);
+
+   ret = bt_socket_set_connection_state_changed_cb(_socket_conn_state_changed_cb, ad);
+   ret_if(ret != BT_ERROR_NONE);
+
+   main_scroller = _main_view_create(ad);
+   ret_if(!main_scroller);
+
+   evas_object_event_callback_add(main_scroller, EVAS_CALLBACK_DEL, _on_main_scroller_del_cb, NULL);
+   elm_naviframe_item_push(ad->navi, "Chatting", NULL, NULL, main_scroller, NULL);
+}
+
+
+
+Send a message:
++static void _message_send(appdata_s *ad)
+{
+   Evas_Object *bubble_table = NULL;
+   Evas_Object *noti = NULL;
+   const char *main_text = NULL;
+   int ret = 0;
+
+   ret_if(!ad);
+   ret_if(!s_info.input_field_entry);
+
+   main_text = elm_entry_entry_get(s_info.input_field_entry);
+   ret_if(!main_text || (strlen(main_text) == 0));
+
+   ret = bt_socket_send_data(ad->socket_fd, main_text, strlen(main_text)+1);
+   if (ret == -1) 
+   {
+      _E("[bt_socket_send_data] send to fail : %s", main_text);
+      noti = bt_noti_popup_create(ad->navi, "Send Failed", EINA_FALSE);
+      evas_object_show(noti);
+   } 
+   else 
+   {
+      bubble_table = _bubble_table_create(s_info.bubble_box, MESSAGE_BUBBLE_SENT, elm_entry_entry_get(s_info.input_field_entry), _current_time_get());
+      ret_if(!bubble_table);
+
+      evas_object_show(bubble_table);
+      elm_box_pack_end(s_info.bubble_box, bubble_table);
+      elm_entry_entry_set(s_info.input_field_entry, "");
+
+      evas_object_event_callback_add(s_info.bubble_box, EVAS_CALLBACK_RESIZE, _bubble_box_resize_cb, NULL);
+   }
+}
+
+When the user clicks SEND, the message on the input area is sent to the target device. If sending is successful, the application makes a message bubble for the sent message.
+
+
+
+
+
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm
new file mode 100644
index 0000000..0977978
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm
@@ -0,0 +1,259 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	Puzzle Sample Overview
+
+
+
+
+
+	
+
+
+	
+		
+	
+  Puzzle Sample Overview
+
+The Puzzle sample application demonstrates how to implement a complex view using recursive composition of the standard EFL components.
+
+The following figure illustrates the main view of the Puzzle application in its normal state.
+
+Figure: Puzzle main view
+
+
+Implementation
+
+To create the Puzzle:
+
+Add the required privileges.
+To use the Puzzle, the application has to request permission by adding the corresponding privileges to the tizen-manifest.xml file. In this case, the systemsettings privilege (http://tizen.org/privilege/systemsettings) is added to allow getting the system setting value.
+
+Create the layout for the Puzzle preview. 
+The puzzle_create() function creates the main layout of the Puzzle application.
++void puzzle_create(appdata_s *data)
+{
+   _D("Puzzle_create");
+   ret_if(!data);
+   // Make a 6X6 image object
+   for (i = 0; i < 37; i++)
+   {
+      ad->piece[i] = evas_object_image_filled_add(ad->e);
+      ad->piece_pos[i] = i;
+      evas_object_image_file_set(ad->piece[i], ad->smile_img_path, NULL);
+      ret = evas_object_image_load_error_get(ad->piece[i]);
+      if (ret != EVAS_LOAD_ERROR_NONE) 
+      {
+         _E("Failed to load image");
+      }
+      evas_object_data_set(ad->piece[i], "position", (void *)i);
+   }
+
+   evas_object_image_size_get(ad->piece[36], &ad->origin_image_width, &ad->origin_image_height);
+   _D("The original image width: %d, height: %d", ad->origin_image_width, ad->origin_image_height);
+
+   // Divide the size of a real image into a puzzle
+   extract_region_width = ad->origin_image_width/PIECE;
+   extract_region_height = ad->origin_image_height/PIECE;
+
+   // Divide the size of the puzzle of the screen into a PIECE
+   puzzle_width = ad->full_image_width/PIECE;
+   puzzle_height = ad->full_image_height/PIECE;
+
+   for (y = 0; y < PIECE; y++)
+   {
+      for (x = 0; x < PIECE; x++)
+      {
+         evas_object_move(ad->piece[y*PIECE + x], ad->puzzle_start_x + x*(2+puzzle_width),
+                          ad->puzzle_start_y + y*(2+puzzle_height));
+         evas_object_image_load_region_set(ad->piece[y*PIECE + x], x*extract_region_width, 
+                                           y*extract_region_height, extract_region_width, extract_region_height);
+         evas_object_resize(ad->piece[y*PIECE + x], puzzle_width, puzzle_height);
+
+         evas_object_event_callback_add(ad->piece[y*PIECE + x], EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+         evas_object_event_callback_add(ad->piece[y*PIECE + x], EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+
+         if (y == 3 && x == 3) 
+         {
+            evas_object_color_get(ad->piece[y*PIECE + x], &ad->r, &ad->g, &ad->b, &ad->a);
+            evas_object_color_set(ad->piece[y*PIECE + x], ad->r, ad->g, ad->b, 0);
+
+            ad->white_piece = y*PIECE + x;
+         }
+
+         evas_object_show(ad->piece[y*PIECE + x]);
+      }
+   }
+   ad->size = PIECE;
+   ad->start = 0;
+}
+
+
+Move the piece and match the picture.
+The move_***_cb() function move the piece to ***. When moving the piece to ***, if there is a piece already, this function returns with no action.
++int move_puzzle_to_right(void *data)
+{
+   retv_if(!data, 0); 
+
+   appdata_s *ad = data;
+   int x1, y1, w1, h1; 
+   int x2, y2, w2, h2; 
+   int white_piece = ad->white_piece;
+   int size = ad->size;
+   int temp;
+   // There is a puzzle
+   if (!(white_piece%size)) 
+   {
+      return SAMPLE_APP_ERROR_OK;
+   }
+
+   evas_object_image_load_region_get(ad->piece[white_piece -1], &x1, &y1, &w1, &h1);
+   evas_object_image_load_region_get(ad->piece[white_piece], &x2, &y2, &w2, &h2);
+   // Exchange the position
+   evas_object_image_load_region_set(ad->piece[white_piece - 1], x2, y2, w2, h2);
+   evas_object_image_load_region_set(ad->piece[white_piece], x1, y1, w1, h1);
+
+   evas_object_color_set(ad->piece[white_piece], ad->r, ad->g, ad->b, ad->a);
+   evas_object_color_set(ad->piece[white_piece - 1], ad->r, ad->g, ad->b, 0); 
+
+   evas_object_show(ad->piece[white_piece]);
+   evas_object_show(ad->piece[white_piece - 1]);
+
+   temp = ad->piece_pos[white_piece];
+   ad->piece_pos[white_piece] = ad->piece_pos[white_piece - 1]; 
+   ad->piece_pos[white_piece - 1] = temp;
+
+   ad->white_piece = white_piece - 1;
+
+   if (ad->piece_pos[ad->white_piece] == size*size-1 && ad->start == 1) 
+   {
+      puzzle_correct_cb(ad);
+   }
+
+   return 1;
+}
+
+
+Complete the puzzle. 
+If the image object is located in its original position, the puzzle_correct_cb() function is called to show the original picture of the puzzle.
++void puzzle_correct_cb(appdata_s *data)
+{
+   ret_if(!data);
+
+   for (i = 0; i < ad->size * ad->size; i++)
+   {
+      if (ad->piece_pos[i]!=i) 
+      {
+         return;
+      }
+   }
+   // Make a popup for congraturations
+   popup = elm_popup_add(win);
+   elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+
+   eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+   elm_object_part_text_set(popup, "title,text", "Correct!!");
+   evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+   layout = elm_layout_add(popup);
+   elm_layout_file_set(layout, ad->puzzle_edj_path, "popup_image_list_layout");
+   evas_object_size_hint_weight_set(layout, 0, 0);
+   evas_object_size_hint_align_set(layout, 0, EVAS_HINT_FILL);
+   elm_object_content_set(popup, layout);
+
+   // Show the original picture of the puzzle
+   img = elm_image_add(layout);
+   elm_image_file_set(img, ad->correct_img_path, NULL);
+   elm_image_aspect_fixed_set(img, EINA_FALSE);
+
+   evas_object_size_hint_min_set(img, 400, 400);
+   evas_object_size_hint_max_set(img, 400, 400);
+   elm_object_part_content_set(layout, "elm.swallow.content", img);
+
+   // Make a popup delete button
+   btn = elm_button_add(popup);
+   elm_object_style_set(btn, "popup");
+   elm_object_text_set(btn, "OK");
+   elm_object_part_content_set(popup, "button1", btn);
+   evas_object_smart_callback_add(btn, "clicked", con_button_clicked_cb, popup);
+   evas_object_show(popup);
+
+   ad->start = 0;
+}
+
+
+Select the level of the puzzle. 
+
+Figure: Puzzle levels
+
+
+The user can select the level of the puzzle. Select a 4X4 puzzle or a 5X5 puzzle. To change the number of pieces, the puzzle_change() function is called. It works in the same way as the puzzle_create() function, but the value of PIECE is different.
++void _level_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   ret_if(!data);
+
+   appdata_s *ad = data;
+   Evas_Object *popup = NULL;
+
+   popup = evas_object_data_get(ad->win, "popup");
+
+   if (elm_check_state_get(ad->check1) == 1) 
+   {
+      if (!puzzle_change(ad, 4))
+      {
+         LOGE("Fail puzzle change");
+      }   
+   } 
+   else if (elm_check_state_get(ad->check2) == 1) 
+   {
+      if (!puzzle_change(ad, 5)) 
+      {
+         LOGE("Fail puzzle change");
+      }
+   }
+   evas_object_del(popup);
+}
+
+
+
+
+
+  
+  
+  
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm
new file mode 100644
index 0000000..cff1496
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm
@@ -0,0 +1,612 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	Quickpanel Sample Overview
+
+
+
+
+
+	
+
+
+	
+		
+	
+  Quickpanel Sample Overview
+The Quickpanel sample application demonstrates how to create a custom quickpanel window and use volume, LED, and Wi-Fi APIs to acquire and set related device settings.
+The following figure illustrates the application screens.
+
+Figure: Quickpanel screens
+
+    
+
+
+To make a quickpanel window visible, the user has to drag it from the upper section of the device's screen to the bottom. Three buttons appear at the top of the screen. With the buttons, the user can control the following device functionalities:
+
+ Light: allows to control device's LED settings,
+ Wi-Fi: allows to activate and deactivate Wi-Fi internal circuit,
+ Sound: allows to switch the device into silent mode.
+
+Tap the icon to switch the setting on or off.
+In the middle of the screen there is a list of currently pending notifications. Tap any of them to dismiss the notification and launch the application to see its details.
+
+The following figure illustrates the quickpanel layout structure.
+
+Figure: Quickpanel layout structure
+
+ 
+
+
+Prerequisites
+This application requires the following privileges to be set:
+
+ http://tizen.org/privilege/network.get
+ http://tizen.org/privilege/volume.set
+ http://tizen.org/privilege/network.set
+ http://tizen.org/privilege/bluetooth
+ http://tizen.org/privilege/led
+ http://tizen.org/privilege/notification
+
+You are able to run the application only on devices supporting the following features:
+
+
+ http://tizen.org/feature/network.wifi
+ http://tizen.org/feature/led
+
+
+Implementation
+
+The Quickpanel application follows the MVC pattern. Aside from standard native application module with the main() function, it consists of:
+
+ controler.c module
+ light.c, notifications.c, sound.c, and wifi.c modules serving as the model
+ main_view.c, control_panel.c, and noti_list.c modules serving as the view
+
+
+
+Controller
+
+The application is initialized with the controler_init() function. This function creates the main view and initializes the rest of the modules. It also adds callbacks to the main view for control panel item click and notification list item click. This is how information about user interactions is delivered to the controller module.
++Eina_Bool
+controler_init(void)
+{
+   // Declare the variables
+
+   ret = system_settings_get_value_string(SYSTEM_SETTINGS_KEY_DEVICE_NAME, &device_name);
+
+   // Error handling
+
+   ret = system_settings_get_value_string(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, &wallpaper);
+
+   // Error handling
+
+   result = main_view_create_base_gui(device_name);
+
+   // Error handling
+
+   main_view_add_callbacks(__ui_state_changed_cb, __noti_clicked_cb);
+
+   __init_modules();
+
+   return EINA_TRUE;
+}
+
+The __init_modules() function initializes Wi-Fi, light, sound and notification modules. It also checks states of the modules and updates the main view to reflect them.
+Each module initialization procedure takes one or more callbacks as parameters. These callbacks are used to inform the controller module about the changes in respective modules. This is essential because these settings can also be changed from outside of the Quickpanel application and the view has to be updated accordingly.
++static void
+__init_modules(void)
+{
+   bool result = false;
+
+   result = wifi_init(__wifi_activated_cb, __wifi_deactivated_cb, __wifi_device_state_changed_cb);
+
+   // Error handling
+
+   if (wifi_is_active())
+      main_view_update(ICON_TYPE_WIFI, ICON_ACTION_ACTIVATION);
+
+   result = light_init(__light_state_change_cb);
+
+   // Error handling
+
+   if (light_is_active())
+      main_view_update(ICON_TYPE_LIGHT, ICON_ACTION_ACTIVATION);
+
+   result = sound_init(__sound_state_change_cb);
+
+   // Error handling
+
+   if (sound_is_active())
+      main_view_update(ICON_TYPE_SOUND, ICON_ACTION_ACTIVATION);
+
+   result = notifications_init(__noti_list_update_cb);
+
+   // Error handling
+}
+
+
+Model
+
+
+Light:
+Currently the LED API does not deliver any interface to receive information about the light state change, so the light module is implemented using a polling timer callback to deliver this information to the controller module.
++bool
+light_init(light_state_change_cb state_change_cb)
+
+   // Declare the variables
+
+   light_data.change_cb = state_change_cb;
+
+   if(light_data.change_cb) 
+   {
+      light_data.poll_timer = ecore_timer_add(LIGHT_POLL_INTERVAL_SEC, __light_poll_timeout_cb, NULL);
+      if(!light_data.poll_timer) 
+      {
+         // Error handling
+
+         light_data.change_cb = false;
+
+         return false;
+      }
+   }
+
+   return true;
+}
+
+static Eina_Bool
+__light_poll_timeout_cb(void *data)
+{
+   // Declare the variables
+
+   if (light_is_active()) 
+   {
+      light_data.change_cb(true);
+   } 
+   else 
+   {
+      light_data.change_cb(false);
+   }
+
+   return ECORE_CALLBACK_RENEW;
+}
+
+
+Sound:
+In case of the Volume API, use the sound_manager_set_volume_changed_cb() function. The sound module uses this interface to communicate changes to the controller.
+The Quickpanel sample application takes into account changes in three sound types (as it serves as mute/unmute application):
+
+ System: volume level of system sounds such as key taps
+ Notification: volume level of notification sounds (such as incoming SMS or email)
+ Ringtone: volume level of an incoming call
+
+When the user wants to mute the phone, the application stores the initial volumes of these types and sets the current values to 0. The preserved volume values are restored when the user unmutes the phone.
+
++bool
+sound_init(sound_state_change_cb change_cb)
+{
+   // Declare the variables
+
+   result = sound_manager_set_volume_changed_cb(__volume_changed_cb, NULL);
+
+   // Error handling
+
+   sound_data.change_cb = change_cb;
+
+   sound_data.system_sound_level = __get_sound_level(SOUND_TYPE_SYSTEM);
+   sound_data.notification_sound_level = __get_sound_level(SOUND_TYPE_NOTIFICATION);
+   sound_data.ringtone_sound_level = __get_sound_level(SOUND_TYPE_RINGTONE);
+
+   return true;
+}
+
+static void
+__volume_changed_cb(sound_type_e type, unsigned int volume, void *user_data)
+{
+   // Declare the variables
+
+   if (sound_data.muting_progress > MUTING_PROGRESS_NONE &&
+      sound_data.muting_progress < MUTING_PROGRESS_MUTING_COMPLETE &&
+      volume == 0) 
+   {
+      sound_data.muting_progress++;
+
+      if (sound_data.muting_progress >= MUTING_PROGRESS_MUTING_COMPLETE) 
+      {
+         sound_data.muting_progress = MUTING_PROGRESS_NONE;
+         if (sound_data.change_cb)
+            sound_data.change_cb(sound_is_active());
+      }
+
+      return;
+   }
+
+   switch (type) 
+   {
+      case SOUND_TYPE_SYSTEM:
+         sound_data.system_sound_level = (int)volume;
+         break;
+      case SOUND_TYPE_NOTIFICATION:
+         sound_data.notification_sound_level = (int)volume;
+         break;
+      case SOUND_TYPE_RINGTONE:
+         sound_data.ringtone_sound_level = (int)volume;
+         break;
+      default:
+
+      return;
+   }
+
+   if (sound_data.change_cb)
+      sound_data.change_cb(sound_is_active());
+}
+
+
+
+Wi-Fi:
+To use the Wi-Fi API functions, call the wifi_initialize() function first. A callback is registered for Wi-Fi state changes using the wifi_set_device_state_changed_cb() function. The registered callback function informs the controller module about Wi-Fi circuit state changes.
++bool
+wifi_init(wifi_activated_cb act_cb, wifi_deactivated_cb deact_cb, wifi_device_state_changed_cb dev_state_change)
+{
+   int ret = WIFI_ERROR_NONE;
+   ret = wifi_initialize();
+
+   // Error handling
+
+   ret = wifi_set_device_state_changed_cb(dev_state_change, NULL);
+
+   // Error handling
+
+   if(act_cb && !wifi_data.act_cb)
+      wifi_data.act_cb = act_cb;
+
+   if(deact_cb && !wifi_data.deact_cb)
+      wifi_data.deact_cb = deact_cb;
+
+   return true;
+}
+
+
+Switching the Wi-Fi circuit on or off is an asynchronous operation, so the act_cb() and deact_cb() functions have to be used to inform the controller module if the operation was successful.
++void
+wifi_set_on(void)
+{
+   int res = WIFI_ERROR_NONE;
+
+   if (!wifi_is_active()) 
+   {
+      res = wifi_activate(wifi_data.act_cb, NULL);
+      // Error handling
+   } 
+   else 
+   {
+      if (wifi_data.act_cb)
+         wifi_data.act_cb(WIFI_ERROR_NONE, NULL);
+   }
+}
+
+void
+wifi_set_off(void)
+{
+   int res = WIFI_ERROR_NONE;
+
+   if (wifi_is_active()) 
+   {
+      res = wifi_deactivate(wifi_data.deact_cb, NULL);
+      // Error handling
+   } 
+   else 
+   {
+      if (wifi_data.deact_cb)
+         wifi_data.deact_cb(WIFI_ERROR_NONE, NULL);
+   }
+}
+
+
+
+Notifications:
+Notifications module implementation is timer based. The code periodically checks whether any system notifications exist, and if so, puts them into the notifications list.
+Notifications initialization code takes a single parameter, the controller callback function, to communicate when the notifications list needs to be updated.
++bool
+notifications_init(noti_list_update_cb update_cb)
+{
+   // Declare the variables
+   noti_data.notifications = eina_inarray_new(sizeof(notification_item_t), NOTI_ARRAY_STEP);
+
+   // Error handling
+
+   noti_data.change_cb = update_cb;
+
+   if (noti_data.change_cb) 
+   {
+      noti_data.poll_timer = ecore_timer_add(NOTI_POLL_INTERVAL_SEC, __noti_poll_timeout_cb, NULL);
+
+      // Error handling
+
+      return true;
+   }
+}
+
+
+The polling uses the notification_get_list() function to retrieve all notifications. It then saves this information in an array of notification_item_t objects.
+There are two notificaton types, NOTIFICATION_TYPE_NOTI and NOTIFICATION_TYPE_ONGOING. Each time new lists are retrieved, the old ones are freed and all notification handles are invalidated. The controller module is informed about a new notification using the noti_data.change_cb()function.
+
++static Eina_Bool
+__noti_poll_timeout_cb(void *data)
+{
+   // Declare the variables
+
+   __free_array_elements();
+   __free_temporary_lists();
+
+   ret = notification_get_list(NOTIFICATION_TYPE_NOTI, -1, &list);
+
+   // Error handling
+
+   noti_data.noti_list_h = list;
+   __process_list(list);
+
+   ret = notification_get_list(NOTIFICATION_TYPE_ONGOING, -1, &list);
+
+   // Error handling
+
+   noti_data.ongoing_list_h = list;
+   __process_list(list);
+
+   if (noti_data.change_cb)
+      noti_data.change_cb(noti_data.notifications);
+
+   return ECORE_CALLBACK_RENEW;
+}
+
+
+
+
+View
+
+Main view initialization part takes place with the main_view_create_base_gui() function. It creates the three view elements: a quickpanel window, the notifications list, and the control panel.
++Eina_Bool
+main_view_create_base_gui(char *device_name)
+{
+   vds.win = create_win();
+
+   // Error handling
+
+   if(!__quickpanel_setup())
+      return EINA_FALSE;
+
+   vds.layout = create_layout(device_name);
+
+   // Error handling
+
+   vds.noti_list = noti_list_create(vds.layout);
+
+   // Error handling
+
+   elm_layout_content_set(vds.layout, PART_CONTENT, vds.noti_list);
+
+   vds.toolbar = control_panel_create(vds.layout, __light_click_cb, __wifi_click_cb, __sound_click_cb);
+
+   // Error handling
+
+   return EINA_TRUE;
+}
+
+
+The quickpanel window type is at first created as a standard window.
++static Evas_Object *
+create_win(void)
+{
+   Evas_Object *bg = NULL;
+   Evas_Object *win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+
+   // Error handling
+
+   bg = elm_bg_add(win);
+
+   // Error handling
+
+   elm_win_resize_object_add(win, bg);
+   evas_object_color_set(bg, QP_BG_COLOR_R, QP_BG_COLOR_G, QP_BG_COLOR_B, 255);
+   evas_object_show(bg);
+
+   elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_HIDE);
+   elm_win_autodel_set(win, EINA_TRUE);
+   elm_win_alpha_set(win, EINA_TRUE);
+
+   // Window rotation support code
+
+   evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
+   eext_object_event_callback_add(win, EEXT_CALLBACK_BACK, win_back_cb, NULL);
+   evas_object_smart_callback_add(win, "rotation,changed", __ui_rotation_cb, NULL);
+
+   evas_object_show(win);
+
+   return win;
+}
+
+
+Next, the window is given special properties and class with the __quickpanel_setup() function.
+
++static Eina_Bool
+__quickpanel_setup(void)
+{
+   // Declare the variables
+
+   Ecore_X_Window xwin = 0;
+   elm_win_quickpanel_set(vds.win, EINA_TRUE);
+   elm_win_quickpanel_priority_major_set(vds.win, 300);
+
+   xwin = elm_win_xwindow_get(vds.win);
+
+   // Error handling
+
+   ecore_x_icccm_name_class_set(xwin, "QUICKPANEL", "QUICKPANEL");
+
+   elm_win_screen_size_get(vds.win, NULL, NULL, &w, &h);
+
+   vds.win_height = h;
+   vds.win_width = w;
+
+   set_ui_geometry_info();
+   set_ui_handler_info();
+   ecore_idler_add(ui_refresh_idler_cb, NULL);
+
+   return EINA_TRUE;
+}
+
+
+Window geometry is constantly monitored with the ui_refresh_idler_cb() and __ui_rotation_cb() callback functions. This information is acquired and passed to the underlying X Window System using the set_ui_geometry_info() and set_ui_handler_info() helper functions.
++static void
+set_ui_geometry_info(void)
+{
+   int max_height_window = 0;
+   Evas_Coord win_y = 0;
+
+   if (vds.angle == 90 || vds.angle == 270) 
+   {
+      max_height_window = vds.win_width;
+   } 
+   else 
+   {
+      max_height_window = vds.win_height;
+   }
+
+   evas_object_geometry_get(vds.win, NULL, &win_y, NULL, NULL);
+
+   vds.gl_distance_from_top = win_y - ELM_SCALE_SIZE(QP_HANDLE_H);
+   vds.gl_distance_to_bottom = ELM_SCALE_SIZE(QP_HANDLE_H);
+   vds.gl_limit_height = max_height_window - vds.gl_distance_from_top - vds.gl_distance_to_bottom;
+}
+ 
+static void
+set_ui_handler_info(void)
+{
+   int contents_height = 0;
+
+   contents_height = vds.gl_distance_from_top + vds.gl_limit_height;
+
+   set_ui_handler_input_region(contents_height);
+   set_ui_handler_content_region(contents_height);
+}
+ 
+static void
+set_ui_handler_input_region(int contents_height)
+{
+   // Declare the variables
+
+   xwin = elm_win_xwindow_get(vds.win);
+
+   switch (vds.angle) 
+   {
+      case 0:
+         window_input_region = set_window_region(0, contents_height,
+         vds.win_width, ELM_SCALE_SIZE(QP_HANDLE_H));
+         break;
+      case 90:
+         window_input_region = set_window_region(contents_height, 0,
+         ELM_SCALE_SIZE(QP_HANDLE_H), vds.win_height);
+         break;
+      case 180:
+         window_input_region = set_window_region(
+         0, vds.win_height - contents_height - ELM_SCALE_SIZE(QP_HANDLE_H),
+         vds.win_width, ELM_SCALE_SIZE(QP_HANDLE_H));
+         break;
+      case 270:
+         window_input_region = set_window_region(
+         vds.win_width - contents_height - ELM_SCALE_SIZE(QP_HANDLE_H),
+         0, ELM_SCALE_SIZE(QP_HANDLE_H), vds.win_height);
+         break;
+   }
+
+   // Error handling
+
+   atom_window_input_region = ecore_x_atom_get(STR_ATOM_WINDOW_INPUT_REGION);
+   ecore_x_window_prop_card32_set(xwin, atom_window_input_region, window_input_region, 4);
+
+   free(window_input_region);
+}
+ 
+static void
+set_ui_handler_content_region(int contents_height)
+{
+   // Declare the variables
+
+   xwin = elm_win_xwindow_get(vds.win);
+
+   switch (vds.angle) 
+   {
+      case 0:
+         window_contents_region = set_window_region(0, 0,
+         vds.win_width, contents_height);
+         break;
+      case 90:
+         window_contents_region = set_window_region(0, 0,
+         contents_height, vds.win_height);
+         break;
+      case 180:
+         window_contents_region = set_window_region(
+         0, vds.win_height - contents_height, vds.win_width, contents_height);
+         break;
+      case 270:
+         window_contents_region = set_window_region(
+         vds.win_width - contents_height, 0,
+         contents_height, vds.win_height);
+         break;
+   }
+
+   // Error handling
+
+   atom_window_contents_region = ecore_x_atom_get(STR_ATOM_WINDOW_CONTENTS_REGION);
+   ecore_x_window_prop_card32_set(xwin, atom_window_contents_region, window_contents_region, 4);
+
+   free(window_contents_region);
+}
+
+
+  
+  
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
index c56a082..5045557 100644
--- a/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
@@ -42,6 +42,14 @@
       
+	
+     
+     
+	
+	
+     
+     
+	
@@ -122,6 +130,14 @@
      
+	
+     
+     
+    
+	
+     
+    
+    
@@ -144,6 +160,18 @@
      
+     
+     
+    
+	
+     
+     
+    
+	
+     
+     
+    
+	
diff --git a/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm
new file mode 100644
index 0000000..b067472
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm
@@ -0,0 +1,754 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	Sketch Sample Overview
+
+
+
+
+
+	
+
+
+	
+		
+	
+  Sketch Sample Overview
+
+The Sketch application demonstrates how to implement an image view and change the color using raw image data of the standard EFL components.
+The following figure illustrates the main screen of the Sketch.
+
+Figure: Sketch main screen
+
+
+
+This sample consist of implementing the layout, creating an image, adding the palette, pen, and eraser, saving the image, and using popup menus.
+
+Implementation
+
+Layout
+The layout_create() function makes the application frame, move buttons, icons, and some icons linked to each callback function. This function creates a popup component using the elm_ popup_add() function.
++static int _layout_create(appdata_s *ad)
+{
+   // Image
+   img = image_create(ad);
+   retv_if(!img, TIZEN_ERROR_OUT_OF_MEMORY);
+
+   // Clear button
+   btn = evas_object_image_filled_add(ad->e);
+   retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+   evas_object_image_file_set(btn, IMG_DIR"clear.png", NULL);
+   elm_object_part_content_set(ad->layout, "clear", btn);
+   evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, eraser_clear_cb, ad);
+
+   // Palette
+   for(i =0; i<4; i++)
+   {
+      ad->temp_color[i] = 0;
+      ad->save_color[i] = 0;
+   }
+   ad->color_pos = 13;
+   btn = evas_object_image_filled_add(ad->e);
+   retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+   elm_object_part_content_set(ad->layout, "palette", btn);
+   evas_object_image_file_set(btn, IMG_DIR"color.png", NULL);
+   evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, palette_select_cb, ad);
+
+   // Eraser
+   ad->eraser = 0;
+   ad->eraser_size = 5;
+   btn = evas_object_image_filled_add(ad->e);
+   retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+   evas_object_image_file_set(btn, IMG_DIR"eraser.png", NULL);
+   elm_object_part_content_set(ad->layout, "eraser", btn);
+   evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, eraser_select_cb, ad);
+
+   // Pen
+   ad->pen_size = 5;
+   ad->a = 255;
+   ad->r = 0;
+   ad->g = 0;
+   ad->b = 0;
+   btn = evas_object_image_filled_add(ad->e);
+   retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+   evas_object_image_file_set(btn, IMG_DIR"pen.png", NULL);
+   elm_object_part_content_set(ad->layout, "pen", btn);
+   evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, pen_select_cb, ad);
+
+   // Save
+   btn = evas_object_image_filled_add(ad->e);
+   retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+   evas_object_image_file_set(btn, IMG_DIR"save.png", NULL);
+   elm_object_part_content_set(ad->layout, "save", btn);
+   evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, save_select_cb, ad);
+
+   evas_object_show(ad->layout);
+
+   return TIZEN_ERROR_NONE;
+}
+
+
+Image
+
+The image_create() function creates the white background image which consists of the arrays that each mean raw pixel data. To use the raw data as an evas_object_image, the evas_object_image_data_set() function is used.
++Evas_Object *image_create(appdata_s *ad)
+{
+   Evas_Object *img = NULL;
+   int pixel;
+   retv_if(!ad, NULL);
+
+   // image
+   ad->canvas = malloc(4*(ad->img_w)*(ad->img_h));
+   pixel = 255<<24 | 255<<16 | 255<<8 | 255;
+   memset(ad->canvas, pixel, 4*(ad->img_w)*(ad->img_h));
+
+   img = evas_object_image_filled_add(ad->e);
+   if (!img) 
+   {
+      _E("Fail to filled image");
+      free(ad->canvas);
+
+      return NULL;
+   }
+
+   evas_object_image_size_set(img, ad->img_w, ad->img_h);
+   evas_object_image_alpha_set(img, EINA_TRUE);
+   evas_object_image_fill_set(img, 0, 0, ad->img_w, ad->img_h);
+   evas_object_image_data_set(img, ad->canvas);
+
+   evas_object_move(img, 5, (ad->img_h*0.3));
+   evas_object_resize(img, ad->img_w, ad->img_h);
+
+   evas_object_event_callback_add(img, EVAS_CALLBACK_MOUSE_DOWN, _move_start_cb, ad);
+   evas_object_event_callback_add(img, EVAS_CALLBACK_MOUSE_UP, _move_end_cb, ad);
+
+   evas_object_show(img);
+   ad->img = img;
+
+   return img;
+}
+
+
+When the move event callback in image object is called, the color of the moved pixel is changed by the _draw_cb() and _move_cb() functions.
+
+
+ The _draw_cb() function changes the color in the raw image data:
++static void _draw_cb(int x, int y, void *data, Evas_Object* obj)
+{
+   ret_if(!data);
+
+   appdata_s *ad = NULL;
+   Evas_Object* img = NULL;
+   unsigned int pixel;
+   int i, j, draw_size;
+
+   ad = data;
+   img = obj;
+   pixel =  ad->a<<24 | ad->r<<16 | ad->g<<8 | ad->b;
+
+   if (ad->eraser) 
+   {
+      draw_size = ad->eraser_size;
+   } 
+   else 
+   {
+      draw_size = ad->pen_size;
+   }
+
+   for (i=draw_size*-1;i<draw_size+1;i++) 
+   {
+      for (j=draw_size*-1;j<draw_size+1;j++) 
+      {
+         if (x - (ad->canvas_x) + i >= ad->img_w || x - (ad->canvas_x) + i <= 0 || y - (ad->canvas_y) + j >= ad->img_h || y - (ad->canvas_y) + j <=0) 
+         {
+            break;
+         }
+         ad->canvas[ad->img_w * (y - (ad->canvas_y) + j) + (x - ad->canvas_x) + i] = pixel;
+      }
+   }
+   evas_object_image_data_update_add(img, 0, 0, ad->img_w, ad->img_h);
+   evas_object_show(img);
+}
+
+
+The _move_cb() function draws the line using Bresenham algorithms:
++static void _move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+   ret_if(!data);
+   ret_if(!obj);
+
+   appdata_s* ad = NULL;
+   Evas_Object *img = NULL;
+   Evas_Event_Mouse_Move *mouse = NULL;
+
+   // Draw
+   int dx, dy;
+   int p_value;
+   int inc_2dy, inc_2dydx;
+   int inc_value;
+   int ndx;
+
+   ad = data;
+   img = obj;
+   mouse = event_info;
+
+   evas_object_geometry_get(img, &ad->canvas_x, &ad->canvas_y, NULL, NULL);
+
+
+   if (0 == ad->prev_x) 
+   {
+      ad->prev_x = mouse->cur.canvas.x;
+      ad->prev_y = mouse->cur.canvas.y;
+      _draw_cb(ad->prev_x, ad->prev_y, ad, img);
+   } 
+   else 
+   {
+      ad->cur_x = mouse->cur.canvas.x;
+      ad->cur_y = mouse->cur.canvas.y;
+
+      dx = abs(ad->cur_x - ad->prev_x);
+      dy = abs(ad->cur_y - ad->prev_y);
+
+      if (0 == ad->prev_x) 
+      {
+         ad->prev_x = mouse->cur.canvas.x;
+         ad->prev_y = mouse->cur.canvas.y;
+         _draw_cb(ad->prev_x, ad->prev_y, ad, img);
+      } 
+      else 
+      {
+         ad->cur_x = mouse->cur.canvas.x;
+         ad->cur_y = mouse->cur.canvas.y;
+         dx = abs(ad->cur_x - ad->prev_x);
+         dy = abs(ad->cur_y - ad->prev_y);
+         if (dy <= dx) 
+         {
+            inc_2dy = 2*dy;
+            inc_2dydx = 2 *(dy - dx);
+            if (ad->cur_x < ad->prev_x) 
+            {
+               ndx = ad->prev_x;
+               ad->prev_x = ad->cur_x;
+               ad->cur_x = ndx;
+               ndx = ad->prev_y;
+               ad->prev_y = ad->cur_y;
+               ad->cur_y = ndx;
+            }
+            if (ad->prev_y < ad->cur_y) 
+            {
+               inc_value = 1;
+            } 
+            else 
+            {
+               inc_value = -1;
+            }
+
+            _draw_cb(ad->prev_x, ad->prev_y, ad, img);
+            p_value = 2 * dy - dx;
+            for (ndx = ad->prev_x; ndx< ad->cur_x; ndx++) 
+            {
+               if (0 > p_value) 
+               {
+                  p_value += inc_2dy;
+               } 
+               else 
+               {
+                  p_value += inc_2dydx;
+                  ad->prev_y += inc_value;
+               }
+               _draw_cb(ndx, ad->prev_y, ad, img);
+            }
+         } 
+         else 
+         {
+            inc_2dy = 2*dx;
+            inc_2dydx = 2* (dx-dy);
+            if (ad->cur_y < ad->prev_y) 
+            {
+               ndx = ad->prev_y;
+               ad->prev_y = ad->cur_y;
+               ad->cur_y = ndx;
+               ndx = ad->prev_x;
+               ad->prev_x = ad->cur_x;
+               ad->cur_x = ndx;
+            }
+            if (ad->prev_x < ad->cur_x) 
+            {
+               inc_value = 1;
+            } 
+            else 
+            {
+               inc_value = -1;
+            }
+            _draw_cb(ad->prev_x, ad->prev_y, ad, img);
+            p_value = 2 * dx -dy;
+            for (ndx = ad->prev_y; ndx < ad->cur_y; ndx++) 
+            {
+               if (0 > p_value) 
+               {
+                  p_value += inc_2dy;
+               } 
+               else 
+               {
+                  p_value += inc_2dydx;
+                  ad->prev_x += inc_value;
+               }
+               _draw_cb(ad->prev_x, ndx, ad, img);
+            }
+         }
+      }
+      ad->prev_x = mouse->cur.canvas.x;
+      ad->prev_y = mouse->cur.canvas.y;
+   }
+}
+ 
+
+
+
+Palette
+
+Figure: Palette screen
+
+
+The create_colorselector() function is called when the palette icon is clicked. This function controls the pen's and background's color using the colorselector component that is created with the elm_colorselector_add() function.
++static Evas_Object *_create_colorselector(Evas_Object *parent, appdata_s *data)
+{
+   retv_if(!data, NULL);
+
+   // Add a color palette component
+   appdata_s *ad = NULL;
+
+   Evas_Object *colorselector = NULL;
+   Elm_Object_Item *it = NULL;
+   Eina_List *color_list = NULL;
+
+   ad = data;
+
+   colorselector = elm_colorselector_add(parent);
+   retv_if(!colorselector, NULL);
+   elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);
+   evas_object_size_hint_fill_set(colorselector, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_size_hint_weight_set(colorselector, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+   color_list = elm_colorselector_palette_items_get(colorselector);
+   it = eina_list_nth(color_list, ad->color_pos);
+
+   elm_object_item_signal_emit(it, "elm,state,selected", "elm");
+
+   return colorselector;
+}
+
+static Evas_Object *_create_colorselector_layout(Evas_Object *parent, appdata_s *data)
+{
+   retv_if(!parent, NULL);
+   retv_if(!data, NULL);
+
+   Evas_Object *layout = NULL;
+   Evas_Object *colorselector = NULL;
+
+   // Layout
+   layout = elm_layout_add(parent);
+   retv_if(!layout, NULL);
+   elm_layout_file_set(layout, ELM_DEMO_EDJ, "colorselector_popup_layout");
+   evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(layout, 0, EVAS_HINT_FILL);
+   elm_object_content_set(parent, layout);
+
+   evas_object_show(layout);
+
+   colorselector = _create_colorselector(layout, data);
+   if (!colorselector) 
+   {
+      _E("fail to create colorselector");
+      evas_object_del(layout);
+      return NULL;
+   }
+   elm_object_part_content_set(layout, "colorpalette", colorselector);
+   evas_object_smart_callback_add(colorselector, "color,item,selected", _item_clicked_cb, data);
+
+   return layout;
+}
+
+
+The _palette_button_cb() function is called when OK button is clicked. This function changes the color. If the pen checkbox is checked, the pen's color changes to the clicked color.
++static void _palette_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   ret_if(!data);
+
+   appdata_s *ad = NULL;
+   Evas_Object *popup = NULL;
+
+   int pixel;
+   int w, h;
+
+   ad = data;
+
+   if (1 == elm_check_state_get(ad->check1)) 
+   {
+      pixel = 255<<24 | ad->temp_color[1]<<16 | ad->temp_color[2]<<8 | ad->temp_color[3];
+
+      for (h = 0; h< ad->img_h; h ++) 
+      {
+         for (w = 0; w<ad->img_w; w++) 
+         {
+            ad->canvas[ad->img_w*h + w] = pixel;
+         }
+      }
+      evas_object_image_data_update_add(ad->img, 0, 0, ad->img_w, ad->img_h);
+      evas_object_show(ad->img);
+   } 
+   else if (1 == elm_check_state_get(ad->check2)) 
+   {
+      if (ad->eraser) 
+      {
+         ad->save_color[1] = ad->temp_color[1];
+         ad->save_color[2] = ad->temp_color[2];
+         ad->save_color[3] = ad->temp_color[3];
+      } 
+      else 
+      {
+         ad->r = ad->temp_color[1];
+         ad->g = ad->temp_color[2];
+         ad->b = ad->temp_color[3];
+      }
+   }
+
+   popup = evas_object_data_del(ad->win,"popup");
+   if (popup) 
+   {
+      evas_object_del(popup);
+   }
+}
+ 
+
+Pen
+
+Figure: Pen screen
+
+
+The pen_cb() function is called when the pen icon is clicked. This function controls the pen size from 1 to 10 using the elm_slider_add() function. 
++void pen_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+   ret_if(!data);
+
+   appdata_s *ad = NULL;
+   Evas_Object *popup = NULL;
+   Evas_Object *layout = NULL;
+   Evas_Object *slider = NULL;
+
+   ad = data;
+
+   // Popup
+   popup = popup_create(ad, "Pen", _pen_button_cb);
+   ret_if(!popup);
+
+   // Layout
+   layout = elm_layout_add(popup);
+   goto_if(!layout, ERROR);
+   elm_layout_file_set(layout, ELM_DEMO_EDJ, "popup_text_slider_view_layout");
+   evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_object_content_set(popup, layout);
+
+   // Slider
+   slider = elm_slider_add(layout);
+   goto_if(!slider, ERROR);
+   elm_slider_indicator_show_set(slider, EINA_TRUE);
+   evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_slider_indicator_format_set(slider, "%1.0f");
+   elm_slider_min_max_set(slider, 1, 10);
+   elm_slider_value_set(slider, ad->pen_size);
+
+   elm_object_part_content_set(layout, "slider", slider);
+   ad->pen_size= elm_slider_value_get(slider);
+
+   evas_object_data_set(popup, "slider", slider);
+   evas_object_data_set(ad->win, "popup", popup);
+
+   return;
+
+ERROR:
+   evas_object_del(slider);
+   evas_object_del(layout);
+   popup_destroy(popup);
+
+   return;
+}
+
+Clicking OK button calls the pen_clicked_cb() function and saves the selected value in the slider.
++static void _pen_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   ret_if(!data);
+
+   appdata_s *ad = NULL;
+
+   Evas_Object *popup = NULL;
+   Evas_Object *slider = NULL;
+
+   ad = data;
+
+   popup = evas_object_data_del(ad->win, "popup");
+   slider = evas_object_data_del(popup, "slider");
+
+   ad->pen_size= elm_slider_value_get(slider);
+   evas_object_del(popup);
+}
+
+
+
+Eraser
+
+Figure: Eraser screens
+ 
+
+The eraser_cb() function is called when the eraser icon is clicked. This function controls the eraser size from 1 to 10 using a slider component. The eraser functionality is maintained until the eraser icon is clicked again.
++static void _eraser_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   ret_if(!data);
+
+   appdata_s *ad = NULL;
+
+   Evas_Object *popup = NULL;
+   Evas_Object *slider = NULL;
+   Evas_Object *eraser = NULL;
+
+   ad = data;
+
+   popup = evas_object_data_del(ad->win, "popup");
+   slider = evas_object_data_del(popup, "slider");
+   eraser = evas_object_data_del(slider, "eraser");
+
+   ad->eraser_size= elm_slider_value_get(slider);
+
+   ad->save_color[1] = ad->r;
+   ad->save_color[2] = ad->g;
+   ad->save_color[3] = ad->b;
+
+   ad->r = 255;
+   ad->g = 255;
+   ad->b = 255;
+   ad->a = 255;
+
+   evas_object_image_file_set(eraser, IMG_DIR"eraser2.png",NULL);
+   elm_object_part_content_set(ad->layout, "eraser", eraser);
+   evas_object_show(eraser);
+
+   ad->eraser = 1;
+
+   evas_object_del(popup);
+}
+
+void eraser_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+   ret_if(!data);
+
+   appdata_s *ad = NULL;
+
+   Evas_Object *popup = NULL;
+   Evas_Object *layout = NULL;
+   Evas_Object *slider = NULL;
+
+   ad = data;
+
+   if (ad->eraser) 
+   {
+      ad->r = ad->save_color[1];
+      ad->g = ad->save_color[2];
+      ad->b = ad->save_color[3];
+
+      evas_object_image_file_set(obj, IMG_DIR"eraser.png", NULL);
+      elm_object_part_content_set(ad->layout, "eraser", obj);
+      evas_object_show(obj);
+
+      ad->eraser = 0;
+
+      return;
+   }
+
+   // Popup
+   popup = popup_create(ad, "Eraser", _eraser_button_cb);
+   ret_if(!popup);
+
+   // Layout
+   layout = elm_layout_add(popup);
+   goto_if(!layout, ERROR);
+
+   elm_layout_file_set(layout, ELM_DEMO_EDJ, "popup_text_slider_view_layout");
+   elm_object_part_text_set(layout, "elm.text.description", "Size");
+   evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_object_content_set(popup, layout);
+
+   // Slider
+   slider = elm_slider_add(layout);
+   goto_if(!slider, ERROR);
+   elm_slider_indicator_show_set(slider, EINA_TRUE);
+   evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_slider_indicator_format_set(slider, "%1.0f");
+   elm_slider_min_max_set(slider, 1, 10);
+   elm_slider_value_set(slider, ad->eraser_size);
+   elm_object_part_content_set(layout, "slider", slider);
+   ad->eraser_size= elm_slider_value_get(slider);
+
+   evas_object_data_set(slider, "eraser", obj);
+   evas_object_data_set(popup, "slider", slider);
+   evas_object_data_set(ad->win, "popup", popup);
+
+   return;
+
+ERROR:
+   evas_object_del(slider);
+   evas_object_del(layout);
+   popup_destroy(popup);
+
+   return;
+}
+ 
+
+Save
+
+The save() function is called when the save icon is clicked. This function saves the image in the /opt/usr/media/Images/sketch/ directory using the evas_object_image_save() function. If a sketch directory does not exist, it is created by the mkdir() function.
++void save_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+   ret_if(!data);
+
+   appdata_s *ad = NULL;
+   Evas_Object *popup = NULL;
+   Evas_Object *layout = NULL;
+   Evas_Object *btn = NULL;
+
+   char *buf = NULL;
+   char dir[256] = {0, };
+   int i=0;
+
+   ad = data;
+
+   // Popup
+   popup = elm_popup_add(ad->win);
+   ret_if(!popup);
+   elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+   eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+   elm_object_part_text_set(popup, "title,text", "Save");
+   evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+   // Layout
+   layout = elm_layout_add(popup);
+   goto_if(!layout, ERROR);
+   elm_layout_file_set(layout, ELM_DEMO_EDJ, "popup_text_view_layout");
+   evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_object_content_set(popup, layout);
+
+   // OK button
+   btn = elm_button_add(popup);
+   goto_if(!btn, ERROR);
+   elm_object_style_set(btn, "popup");
+   elm_object_text_set(btn, "OK");
+   elm_object_part_content_set(popup, "button1", btn);
+   evas_object_smart_callback_add(btn, "clicked", _cancel_clicked_cb, popup);
+
+   evas_object_show(popup);
+
+   storage_get_directory(i, STORAGE_DIRECTORY_IMAGES, &buf);
+   snprintf(dir, sizeof(dir), "%s%s", buf, "/sketch");
+
+   if (mkdir(dir, DIR_MODE) > 0)
+   {
+      LOGD("folder 'sketch' is already exists");
+   }
+   evas_object_image_save(ad->img,"/opt/usr/media/Images/sketch/save.jpg",NULL,"quality=100 compress=0");
+
+   return;
+ERROR:
+   evas_object_del(btn);
+   evas_object_del(layout);
+   popup_destroy(popup);
+}
+
+
+Popup 
+
+All menus in the Sketch application use the popup component.
++Evas_Object *popup_create(void *data, char *title, void (*_func_cb)(void *, Evas_Object *, void *))
+{
+   appdata_s *ad = data;
+   retv_if(!ad, NULL);
+
+   Evas_Object *popup = NULL;
+   Evas_Object *btn = NULL;
+
+   popup = elm_popup_add(ad->win);
+   retv_if(!popup, NULL);
+
+   elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+   eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, _popup_destroy, popup);
+   elm_object_part_text_set(popup, "title,text", title);
+   evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+   // OK button
+   btn = elm_button_add(popup);
+   elm_object_style_set(btn, "popup");
+   elm_object_text_set(btn, "OK");
+   elm_object_part_content_set(popup, "button1", btn);
+   evas_object_smart_callback_add(btn, "clicked", _func_cb, ad);
+
+
+   // Cancel button
+   btn = elm_button_add(popup);
+   elm_object_style_set(btn, "popup");
+   elm_object_text_set(btn, "Cancel");
+   elm_object_part_content_set(popup, "button", btn);
+   evas_object_smart_callback_add(btn, "clicked", _popup_destroy, popup);
+
+   evas_object_show(popup);
+
+   return popup;
+}
+
+
+
+
+
+  
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm
new file mode 100644
index 0000000..cb0086e
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm
@@ -0,0 +1,256 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	Stopwatch Sample Overview
+
+
+
+
+
+	
+
+
+	
+		
+	
+  Stopwatch Sample Overview
+
+The Stopwatch sample demonstrates how to implement a complex view using recursive composition of the standard EFL UI components and containers in a component hierarchy. It aims to explain how to use Ecore.
+The sample uses UI components (such as elm_conformant, elm_layout, and elm_naviframe) for the view management, containers (such as elm_grid and elm_box) for component management inside the view, UI components (such as elm_bg, elm_button, elm_list, and elm_label) for the content inside the view and Ecore (such as ecore_thread) for the operating main loop.
+
+The following figure illustrates the main screen of the Stopwatch, the wireframe structure, and the component tree.
+
+  Figure: Stopwatch screen and structure
+  
+    
+	
+	 
+  
+  
+Implementation
+
+To create the stopwatch:
+
+Initialize the user interface with the _create_stopwatch() callback function:
++static void _create_stopwatch(appdata_s *ad)
+{
+   Elm_Object_Item *nf_it = NULL;
+   Evas_Object *box1 = NULL;
+   Evas_Object *box2 = NULL;
+
+   ret_if(!ad);
+
+   _D("Create stopwatch");
+
+   // Window
+   ad->win = _create_win(ad);
+   ret_if(!ad->win);
+
+   // Conformant
+   ad->conform = _create_conform(ad);
+   goto_if(!ad->conform, ERROR);
+
+   // Indicator BG
+   _set_indicator_bg(ad);
+
+   // Naviframe 
+   ad->nf = _create_navi(ad);
+   goto_if(!ad->nf, ERROR);
+
+   // Layout
+   ad->layout = _create_layout(ad);
+   goto_if(!ad->layout, ERROR);
+
+   // Three parts in the layout
+   box1 = view_create_stopwatch_display(ad);
+   goto_if(!box1, ERROR);
+   elm_object_part_content_set(ad->layout, "part_one", box1);
+   evas_object_data_set(ad->layout, PRIVATE_DATA_KEY_STOPWATCH_BOX1, box1);
+
+   box2 = view_create_stopwatch_button(ad);
+   goto_if(!box2, ERROR);
+   elm_object_part_content_set(ad->layout, "part_two", box2);
+   evas_object_data_set(ad->layout, PRIVATE_DATA_KEY_STOPWATCH_BOX2, box2);
+
+   ad->list = view_create_stopwatch_list(ad);
+   goto_if(!ad->list, ERROR);
+   elm_object_part_content_set(ad->layout, "part_three", ad->list);
+
+   evas_object_show(ad->layout);
+
+   // Insert the layout to naviframe 
+   nf_it = elm_naviframe_item_push(ad->nf, "STOPWATCH", NULL, NULL, ad->layout, NULL);
+   goto_if(!nf_it, ERROR);
+
+   // Show window after base GUI is set up
+   evas_object_show(ad->win);
+
+   return;
+}
+
+
+The view_create_stopwatch_display(), view_create_stopwatch_button(), and view_create_stopwatch_list() functions create all the components and set them to the layout. To handle the button events, a smart clicked callback is registered with the evas_object_smart_callback_add() function.
+Figure: Stopwatch main view layout
+    
+    
+  
+
++extern Evas_Object *view_create_stopwatch_display(appdata_s *ad)
+{
+   Evas_Object *box = NULL;
+   Evas_Object *grid = NULL;
+   Evas_Object *label = NULL;
+   Evas_Object *bg = NULL;
+   viewdata_s *vd = NULL;
+
+   retv_if(!ad, NULL);
+
+   box = _create_box(ad->layout);
+   retv_if(!box, NULL);
+   grid = _create_grid(box);
+   goto_if(!grid, ERROR);
+   bg = _create_bg(grid, 1);
+   goto_if(!bg, ERROR);
+   elm_grid_pack(grid, bg, 0, 0, 100, 100);
+
+   // Memory allocate
+   vd = calloc(1, sizeof(viewdata_s));
+   goto_if(!vd, ERROR);
+   ad->vd = vd;
+
+   // Set the label
+   vd->time = elm_label_add(grid);
+   goto_if(!vd->time, ERROR);
+   elm_object_text_set(vd->time, "<font_size=105><color=#ffffff>00:00:00</color></font_size>");
+   evas_object_show(vd->time);
+   elm_grid_pack(grid, vd->time, 2, 10, 100, 100);
+
+   vd->msec = elm_label_add(grid);
+   goto_if(!vd->msec, ERROR);
+   elm_object_text_set(vd->msec, "<font_size=50><color=#ffffff>.00</color></font_size>");
+   evas_object_show(vd->msec);
+   elm_grid_pack(grid, vd->msec, 85, 38, 100, 100);
+
+   // Stop the flag
+   vd->stopped = EINA_FALSE;
+
+   label = elm_label_add(grid);
+   goto_if(!label, ERROR);
+   elm_object_text_set(label, "<b><font_size=22><color=#a6a6a6>Hour             "
+								"    Min                Sec</color></font_size></b>");
+   evas_object_show(label);
+   elm_grid_pack(grid, label, 10, 70, 100, 100);
+
+   elm_box_pack_end(box, grid);
+
+   return box;
+} 
+
+
+The stopwatch_button_clicked() function checks the text on the button and calls the following functions:
+
+_stopwatch_start_cb() function starts changing the dipslay using the ecore_thread_feedback_run() function.
+_stopwatch_stop_cb() function stops changing the display using the ecore_thread_cancel() and ecore_thread_check() functions. 
+_stopwatch_lap_cb() function appends a lap time to an elm_list using the elm_list_item_append() function.
+_stopwatch_reset_cb() function resets the main view to the initial state.
+
++extern void stopwatch_button_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+   const char *str = NULL;
+   appdata_s *ad = NULL;
+
+   ret_if(!data);
+   ret_if(!obj);
+
+   ad = data;
+   str = elm_object_text_get(obj);
+
+   tizen_error_e result = TIZEN_ERROR_UNKNOWN;
+
+   if (str && !strcmp(str, "START")) 
+   {
+      result = _stopwatch_start_cb(ad);
+      retm_if(TIZEN_ERROR_NONE != result, "Failed to stopwatch start: %d", result);
+   } 
+   else if (str && !strcmp(str, "STOP")) 
+   {
+      result = stopwatch_stop_cb(ad);
+      retm_if(TIZEN_ERROR_NONE != result, "Failed to stopwatch stop: %d", result);
+   }
+   else if (str && !strcmp(str, "LAP") && ad->start) 
+   {
+      result = _stopwatch_lap_cb(ad);
+      retm_if(TIZEN_ERROR_NONE != result, "Failed to stopwatch lap: %d", result);
+   } 
+   else 
+   {
+      result = _stopwatch_reset_cb(ad);
+      retm_if(TIZEN_ERROR_NONE != result, "Failed to stopwatch reset: %d", result);
+   }
+}
+
+
+The thread_job() function uses the ecore_thread_feedback() function 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.
+To cancel a running thread, the thread_job() function also uses the ecore_thread_check() function to check whether a thread is in pending cancellation, because the ecore_thread_feedback_run() function can be used from the main loop.
++extern void thread_job(void *data, Ecore_Thread *thread)
+{
+   appdata_s *ad = NULL;
+   viewdata_s *vd = NULL;
+   int iteration = 0;
+
+   ret_if(!data);
+   ret_if(!thread);
+
+   ad = data;
+   vd = ad->vd;
+
+   for (iteration = 0; ; iteration++)
+   {
+      vd->elapsedTime = ecore_time_get() - vd->startTime;
+      ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
+      usleep(10000); // You can have some real computation done
+      if (ecore_thread_check(thread)) break;
+   }
+}
+
+
+
+
+  
+  
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm
new file mode 100644
index 0000000..73bf945
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm
@@ -0,0 +1,289 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+	System Info Sample Overview
+
+
+
+
+
+	
+
+
+	
+		
+	
+  System Info Sample Overview
+The System Info sample application demonstrates how to get information about the system.
+
+The following figure illustrates the main screen of the application.
+
+  Figure: System Info screens
+  
+      
+  
+  
+The application opens the main screen of system information categories. To check the information, touch the list item.
+
+Prerequisites
+The following privilege must be set:
+ 
+  http://tizen.org/privilege/systemsettings
+ 
+To use the system information, the application has to request permission by adding the corresponding privileges to the tizen-manifest.xml file.
++<privileges>
+   <privilege>http://tizen.org/privilege/systemsettings</privilege>
+</privileges>
+
+
+
+Implementation
+To implement the application:
+
+To use the device-specific information-related features of the System Information API, include the <system_info.h> header file in your application:
++#include <system_info.h>
+
+
+
+Initialize the application using a common Tizen application structure.
++int main(int argc, char *argv[])
+{
+   appdata_s ad = {0,};
+   int ret = 0;
+
+   ui_app_lifecycle_callback_s event_callback = {0,};
+   app_event_handler_h handlers[5] = {NULL, };
+
+   event_callback.create = app_create;
+   event_callback.terminate = app_terminate;
+   event_callback.pause = app_pause;
+   event_callback.resume = app_resume;
+   event_callback.app_control = app_control;
+
+   ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
+   ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &d);
+   ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
+   ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
+   ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
+   ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+   ret = ui_app_main(argc, argv, &event_callback, &ad);
+   if (ret != APP_ERROR_NONE) 
+   {
+      _E("ui_app_main() is failed. err = %d", ret);
+   }
+
+   return ret;
+}
+
+
+The initialization is done with the _create_base_gui() function:
++static void _create_base_gui(appdata_s *ad)
+{
+   Evas_Object *bg = NULL;
+   Evas_Object *list = NULL;
+
+   // Window 
+   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+   elm_win_conformant_set(ad->win, EINA_TRUE);
+   elm_win_autodel_set(ad->win, EINA_TRUE);
+
+   if (elm_win_wm_rotation_supported_get(ad->win)) 
+   {
+      int rots[4] = { 0, 90, 180, 270 };
+      elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
+   }
+
+   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
+
+   // Conformant
+   ad->conform = elm_conformant_add(ad->win);
+   elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
+   elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
+   evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_win_resize_object_add(ad->win, ad->conform);
+   evas_object_show(ad->conform);
+
+   // Indicator BG
+   bg = elm_bg_add(ad->conform);
+   elm_object_style_set(bg, "indicator/headerbg");
+   elm_object_part_content_set(ad->conform, "elm.swallow.indicator_bg", bg);
+   evas_object_show(bg);
+
+   // Naviframe
+   ad->navi = elm_naviframe_add(ad->conform);
+   evas_object_size_hint_weight_set(ad->navi, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_object_content_set(ad->conform, ad->navi);
+   evas_object_show(ad->navi);
+   eext_object_event_callback_add(ad->navi, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+
+   // Base Layout
+   list = _create_main_list(ad);
+
+   // Push the Main Layout to the Naviframe
+   elm_naviframe_item_push(ad->navi, "System Info", NULL, NULL, list, NULL);
+
+   // Show window after base GUI is set up
+   evas_object_show(ad->win);
+}
+
+
+
+Create the main list menu.
+Each main menu list item has a callback function for getting the system information. If one of them is clicked, the information about the category is illustrated in a genlist.
++Evas_Object *_create_main_list(appdata_s *ad)
+{
+   Evas_Object *list = NULL;
+
+   list = elm_list_add(ad->navi);
+   evas_object_size_hint_weight_set(list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(list, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+   elm_list_item_append(list, "Camera", NULL, NULL, camera_list_cb, ad);
+   elm_list_item_append(list, "Keyboard", NULL, NULL, input_list_cb, ad);
+   elm_list_item_append(list, "Location", NULL, NULL, location_list_cb, ad);
+   elm_list_item_append(list, "Network", NULL, NULL, network_list_cb, ad);
+   elm_list_item_append(list, "OpenGL", NULL, NULL, opengl_list_cb, ad);
+   elm_list_item_append(list, "Platform", NULL, NULL, platform_list_cb, ad);
+   elm_list_item_append(list, "Screen", NULL, NULL, screen_list_cb, ad);
+   elm_list_item_append(list, "Sensors", NULL, NULL, sensors_list_cb, ad);
+   elm_list_item_append(list, "Speech", NULL, NULL, speech_list_cb, ad);
+   elm_list_item_append(list, "Usb", NULL, NULL, usb_list_cb, ad);
+   elm_list_item_append(list, "Vision", NULL, NULL, vision_list_cb, ad);
+   elm_list_item_append(list, "System", NULL, NULL, system_list_cb, ad);
+   elm_list_item_append(list, "Others", NULL, NULL, others_list_cb, ad);
+
+   evas_object_show(list);
+
+   return list;
+}
+
+
+
+Create the function to call when the list item is clicked.
+The following code examples are callback functions of the camera, which is a default double label list, and of the platform, which is a grouped list. The codes of others are almost identical.
++void camera_list_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   appdata_s *ad = (appdata_s *)data;
+   Evas_Object *clist = NULL;
+   Evas_Object *navi = ad->navi;
+   Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+   clist = elm_genlist_add(navi);
+
+   itc->item_style = "double_label";
+   itc->func.content_get = NULL;
+   itc->func.text_get = _gl_text_get_cb;
+   itc->func.del = gc_gl_del_cb;
+
+   elm_genlist_block_count_set(clist, 14);
+   elm_genlist_mode_set(clist, ELM_LIST_COMPRESS);
+   evas_object_smart_callback_add(clist, "selected", gc_gl_selected_cb, NULL);
+
+   for (i=0; i<5; i++) 
+   {
+      item_data_s *id = malloc(sizeof(item_data_s));
+      id->index = i;
+      item = elm_genlist_item_append(clist, itc, id, NULL, ELM_GENLIST_ITEM_NONE, NULL, id);
+      id->item = item;
+   }
+
+   elm_genlist_item_class_free(itc);
+
+   elm_naviframe_item_push(navi, "Camera", NULL, NULL, clist, NULL);
+}
+
+
+Definitions
++static struct camera_info 
+{
+   char *description;
+   char *feature_key;
+} s_camera_info[] = 
+{
+   {"Camera", "http://tizen.org/feature/camera"},
+   {"Back Camera", "http://tizen.org/feature/camera.back"},
+   {"Back Camera Flash", "http://tizen.org/feature/camera.back.flash"},
+   {"Front Camera", "http://tizen.org/feature/camera.front"},
+   {"Front Camera Flash", "http://tizen.org/feature/camera.front.flash"}
+};
+
+For more information, see the System Information guide.
+
+
+_gl_text_get_cb callbacks
+This genlist makes the list by a style, double_label, to distinguish a title and a content. The items of the list are illustrated by the _gl_text_get_cb() function, which uses the header file, system_info.h. To get information about the system, you can get the boolean data with the system_info_get_platform_bool() function.
++static char *_gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
+{
+   item_data_s *id = (item_data_s *)data;
+   char buf[MAX_STR] = {0,};
+   int ret = -1;
+   bool value = 0;
+
+   if (!strcmp(part, "elm.text")) 
+   {
+      return strdup(s_camera_info[id->index].description);
+   } 
+   else if (!strcmp(part, "elm.text.sub")) 
+   {
+      ret = system_info_get_platform_bool(s_camera_info[id->index].feature_key, &value);
+
+      if (ret != SYSTEM_INFO_ERROR_NONE) 
+      {
+         return NULL;
+      }
+
+      snprintf(buf, MAX_STR, "%s", value ? "Supported" : "Not Supported");
+
+      return strdup(buf);
+   }
+
+   return NULL;
+}
+
+
+
+
+
+  
+  
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm
new file mode 100644
index 0000000..d6ff226
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm
@@ -0,0 +1,263 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+
+	(Circle) Rotary Timer Sample Overview  
+
+
+
+
+
+	
+
+
+	
+		
+	
+
+  (Circle) Rotary Timer Sample Overview 
+  
+The (Circle) Rotary Timer sample application demonstrates how implement a circular digital clock with a timer function in your application.
+
+The following figure illustrates the main views of the (Circle) Rotary Timer sample application.
+
+Figure: (Circle) Rotary Timer main views 
+   
+
+Click the hour, minute, and second values to set up the timer. To start the timer, click START.  
+The timer is stops when the number in the digital clock is reduced to 0. To set another time, click RESET.
+  
+Implementation
+To implement the circular rotary timer:
+
+Add the required header file and callbacks. 
+To use the rotary function, the application must include the efl_extension.h header file. To detect rotary events, add the necessary callback functions.
+
+eext_rotary_object_event_activated_set(ad->layout, EINA_TRUE);
+eext_rotary_object_event_callback_add(ad->layout, _rotary_cb, ad);
+
+
+
+Create the layout for the timer preview. 
+Use the _layout_create() function to create the main layout of the application, and add a digital clock to display the timer preview.
+
+static Evas_Object *
+_layout_create(appdata_s *ad)
+{
+   _D("Layout create");
+   Evas_Object *layout = NULL;
+
+   retv_if(!ad, NULL);
+
+   layout = elm_layout_add(ad->win);
+   retv_if(!layout, NULL);
+
+   main_get_resource_path(ad);
+
+   // ad->timer_edj_path == app_get_resource_path() + /edje/timer.edj
+   elm_layout_file_set(layout, ad->timer_edj_path, GRP_MAIN);
+   evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   eext_object_event_callback_add(layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+
+   elm_object_content_set(ad->conform, layout);
+   ad->layout = layout;
+
+   _start_btn_create(ad);
+   retv_if(!ad->start_btn, NULL);
+
+   digital_create(ad);
+
+   rotary_init(ad);
+
+   evas_object_show(layout);
+
+   return layout;
+}
+
+
+Initialize the application and set the timer. 
+Use the digital_create() function to create the digital clock and set the quantity of time for the timer.
+
+void 
+digital_create(appdata_s *ad)
+{
+   _D("Digital create");
+   Evas_Object *left_col = NULL;
+   Evas_Object *right_col = NULL;
+
+   ad->hour_ly = elm_layout_add(ad->win);
+   ret_if(!ad->hour_ly);
+   elm_layout_file_set(ad->hour_ly, ad->timer_edj_path, "hour");
+   evas_object_event_callback_add(ad->hour_ly, EVAS_CALLBACK_MOUSE_DOWN, _hour_selected_cb, ad);
+   elm_object_part_content_set(ad->layout, "hour", ad->hour_ly);
+   elm_object_part_text_set(ad->hour_ly, "val", "00");
+   evas_object_show(ad->hour_ly);
+
+   ad->minute_ly = elm_layout_add(ad->win);
+   ret_if(!ad->minute_ly);
+   elm_layout_file_set(ad->minute_ly, ad->timer_edj_path, "minute");
+   evas_object_event_callback_add(ad->minute_ly, EVAS_CALLBACK_MOUSE_DOWN, _minute_selected_cb, ad);
+   elm_object_part_content_set(ad->layout, "minute", ad->minute_ly);
+   elm_object_part_text_set(ad->minute_ly, "val", "00");
+   evas_object_show(ad->minute_ly);
+
+   ad->second_ly = elm_layout_add(ad->win);
+   ret_if(!ad->second_ly);
+   elm_layout_file_set(ad->second_ly, ad->timer_edj_path, "second");
+   evas_object_event_callback_add(ad->second_ly, EVAS_CALLBACK_MOUSE_DOWN, _second_selected_cb, ad);
+   elm_object_part_content_set(ad->layout, "second", ad->second_ly);
+   elm_object_part_text_set(ad->second_ly, "val", "00");
+   evas_object_show(ad->second_ly);
+
+   left_col = elm_image_add(ad->win);
+   ret_if(!left_col);
+   elm_image_file_set(left_col, ad->timer_control_dot_path, NULL);
+   evas_object_size_hint_weight_set(left_col, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(left_col, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_object_part_content_set(ad->layout, "left_colon", left_col);
+
+   right_col = elm_image_add(ad->win);
+   ret_if(!right_col);
+   elm_image_file_set(right_col, ad->timer_control_dot_path, NULL);
+   evas_object_size_hint_weight_set(right_col, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(right_col, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_object_part_content_set(ad->layout, "right_colon", right_col);
+}
+
+
+
+Start the timer. 
+The _start_clicked_cb() callback starts the timer. When you click START, the application calculates the quantity of time using the _calc_setting_time() function and displays the total time. The _timer_start_cb() function is called every second to reduce the number in the digital clock.
+
+static void 
+_start_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   if (ad->timer) 
+   {
+      _reset_clicked_cb(ad);
+
+      return;
+   }
+   ad->setting_time = _calc_setting_time(ad);
+   ret_if(!ad->setting_time);
+
+   ad->img_num = 60; 
+
+   progress_count = (ad->setting_time/ad->img_num);
+   ad->selected = NULL;
+
+   // Make the digital clock unclickable
+   elm_object_signal_emit(ad->hour_ly, "hour_deselected", "hour");
+   elm_object_signal_emit(ad->minute_ly, "minute_deselected", "minute");
+   elm_object_signal_emit(ad->second_ly, "second_deselected", "second");
+
+   elm_object_signal_emit(ad->start_btn_ly, "timer_start", "btn");
+   elm_object_signal_emit(ad->layout, "timer_start", "bg");
+
+   // Reduce 1 second every second
+   ad->timer = ecore_timer_add(1.0f, _timer_start_cb, ad);
+   ret_if(!ad->timer);
+   ad->progress_timer = ecore_timer_add(progress_count, _progress_start_cb, ad);
+   ret_if(!ad->progress_timer);
+   _progress_start_cb(ad);
+}
+
+static Eina_Bool 
+_timer_start_cb(void *data)
+{
+   // Get the previous time
+   pre_second_time = elm_object_part_text_get(ad->second_ly, "val");
+   post_second_time = atoi(pre_second_time);
+   pre_minute_time = elm_object_part_text_get(ad->minute_ly, "val");
+   post_minute_time = atoi(pre_minute_time);
+   pre_hour_time = elm_object_part_text_get(ad->hour_ly, "val");
+   post_hour_time = atoi(pre_hour_time);
+   // Reduce 1 second
+   if (post_second_time == 0) 
+   {
+      if (post_minute_time == 0) 
+      {
+         post_second_time = 59;
+         post_minute_time = 59;
+         post_hour_time = post_hour_time - 1;
+      } 
+      else 
+      {
+         post_second_time = 59;
+         post_minute_time = post_minute_time - 1;
+      }
+   } 
+   else 
+   {
+      post_second_time = post_second_time - 1;
+   }
+   // Display the new time
+   elm_object_part_text_set(ad->hour_ly, "val", hour_val);
+   elm_object_part_text_set(ad->minute_ly, "val", minute_val);
+   elm_object_part_text_set(ad->second_ly, "val", second_val);
+		
+   ad->setting_time--;
+
+   free(hour_val);
+   free(minute_val);
+   free(second_val);
+
+   return ECORE_CALLBACK_RENEW;
+}
+
+
+Reset the timer. 
+To set another time when the user clicks RESET, call the _reset_clicked_cb() callback function.
+
+static void 
+_reset_clicked_cb(appdata_s *ad)
+{
+   ad->setting_time = 0;
+
+   ecore_timer_del(ad->timer);
+   ad->timer = NULL;
+   ecore_timer_del(ad->progress_timer);
+   ad->progress_timer = NULL;
+
+   elm_object_part_text_set(ad->hour_ly, "val", "00");
+   elm_object_part_text_set(ad->minute_ly, "val", "00");
+   elm_object_part_text_set(ad->second_ly, "val", "00");
+   elm_object_signal_emit(ad->start_btn_ly, "timer_end", "btn");
+   elm_object_signal_emit(ad->layout, "timer_end", "bg");
+   elm_object_signal_emit(ad->layout, "timer_end", "progress");
+}
+
+
+
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm
index 390403d..d01a373 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm
@@ -28,7 +28,7 @@
   
 The (Circle) Settings sample application demonstrates how to implement a circular view with the elementary UI components and EFL Extension circular UI components.
 
-The sample uses UI components such as elm_conformant and elm_naviframe for view management, elm_layout for UI component management inside the view, and elm_genlist for the content inside the main view. elm_genlist has three items: volume, brightness and information. When the item is clicked, its content is shown. To display a circular genlist component, the genlist component uses a circular genlist component supported by the EFL Extension.
+The sample uses UI components, such as elm_conformant and elm_naviframe for view management, elm_layout for UI component management inside the view, and elm_genlist for the content inside the main view. elm_genlist has three items: volume, brightness and information. When the item is clicked, its content is shown. To display a circular genlist component, the genlist component uses a circular genlist component supported by the EFL Extension.
The following figure illustrates the main view of the (Circle) Settings sample application, its wireframe structure, and component tree.
 
diff --git a/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm
new file mode 100644
index 0000000..dc82234
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm
@@ -0,0 +1,477 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+
+	(Rectangle) NotificationManager Sample Overview  
+
+
+
+
+
+	
+
+
+	
+		
+	
+
+  (Rectangle) NotificationManager Sample Overview 
+  
+  The (Rectangle) NotificationManager sample demonstrates how you can present a notification to the user.
+  The notifications are displayed as list items, where each item is an Edje layout from the list_content.edc file. All items use the same Edje layout.
+  
+The following figure illustrates the main screens of the NotificationManager.
+
+    Figure: (Rectangle) Notification Manager screens 
+  
+
+The application opens with the main screen, where you can select which notification type to access: notifications or ongoing notifications. Click the notification type to view the list of notifications and their various features. 
+
+
+Implementation  
+  
+When the user clicks a list item on the main screen, the _add_noti_list() function adds each notification into a feature list.  
+  
+Managing Notifications
+The notification management is implemented in the notifications.c file. The create_notification() function sets the default image, sound, and text.
+When the user clicks the list item related to the creation of a normal notification, the _noti_list_cb() function calls the appropriate notification to create the result layout function. The function to create notifications sets the request message information, such as the alert text, title text, and launch parameters, which are used in the result layout function.
+You can manage notifications in the following ways:
+
+Manage normal notifications. 
+If the user clicks the list item related to the creation of the notification, the notify_cb() or notify_normal_cb() function is called to create the notification.
+If the user clicks the list item related to the removal of a notification, the remove_notification_cb() function is called to remove the notification.
++static 
+notification_h create_notification(const char *icon_path, const char *title_text, 
+                                   const char *content_text,const char *sound_path)
+{
+   notification_h notify = notification_create(NOTIFICATION_TYPE_NOTI);
+   if (notify)
+   {
+      notification_set_image(notify, NOTIFICATION_IMAGE_TYPE_ICON, icon_path);
+      notification_set_text(notify, NOTIFICATION_TEXT_TYPE_TITLE, title_text, 
+                            NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+      notification_set_text(notify, NOTIFICATION_TEXT_TYPE_CONTENT, 
+                            content_text, NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+      notification_set_sound(notify, NOTIFICATION_SOUND_TYPE_USER_DATA, sound_path);
+   }
+
+   return notify;
+}
+
+static void 
+remove_notification_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+   bool is_success = delete_notification_items();
+
+   // Set the information result message
+
+   badge_remove(PACKAGE);
+}
+
+
+Manage notifications using the application control. 
+If the user clicks the list item related to the creation of the notification by the application control, the notify_by_app_control_cb() function is called to create the notification. The function sets extra data to the application control, so the data can be used after passing the control to the application.
+
+If the user clicks the list item related to the removal of a notification by the application control, the remove_notification_cb() function is called to remove the appcontrol notification.
+
++static void 
+notify_by_app_control_cb(notification_data *notify_data)
+{
+   // Remove all notifications before creating a new one
+
+   notify_data->notification = create_notification(ICON2_PATH, notification_app, app_control, NULL);
+   if (notify_data->notification)
+   {
+      const char *array_result[] = {result_1_text, result_2_text, NULL};
+      const char *array_key[] = {SERVICE_DATA_TEXT, SERVICE_DATA_TO, NULL};
+
+      // Set extra data to app control 
+      notification_post(notify_data->notification);
+   }
+
+   // Set the information result message
+}
+
+static void 
+remove_notification_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+   bool is_success = delete_notification_items();
+
+   // Set the information result message
+
+   badge_remove(PACKAGE);
+}
+
+void 
+launch_arguments_set(notification_h notification, const char *argument, ...)
+{
+   app_control_h service = NULL;
+   int err = app_control_create(&service);
+   retm_if(err != SERVICE_ERROR_NONE, "service_create failure");
+
+   if (argument)
+   {
+      app_control_add_extra_data(service, MESSAGE_POST, argument);
+   }
+}
+
+
+Manage notifications using the application ID. 
+If the user clicks the list item related to the creation of the notification by the application ID, the set_badge_number_by_app_id_cb() function is called to create the notification.
+If the user clicks the list item related to the removal of a notification by the application ID, the remove_badge_number_by_app_id_cb() function is called to remove the notification
++static void 
+notify_by_app_id_cb(notification_data *notify_data)
+{
+   // Remove all notifications before creating a new one
+
+   notify_data->notification = create_notification(ICON2_PATH, title_text, notify_with_request, NULL);
+   if (notify_data->notification)
+   {
+      // Set App package to app control 
+      notification_post(notify_data->notification);
+   }
+
+   // Set the information result message
+}
+static void 
+remove_notification_by_app_id_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+   bool is_success = delete_notification_by_app_id();
+
+   // Set the information result message
+}
+
+void 
+launch_arguments_set(notification_h notification, const char * pkgname, ...)
+{
+   app_control_h service = NULL;
+   int err = app_control_create(&service);
+   retm_if(err != SERVICE_ERROR_NONE, "service_create failure");
+
+   if (pkgname)
+   {
+      app_control_set_app_id(service, pkgname);
+   }
+}
+
+
+
+Manage badge numbers using the application ID. 
+If the user clicks the list item related to increases in the badge number, the set_badge_number_by_app_id_cb() function is called to increase the badge number.
+To remove the badge number using the application ID, decrease the badge number or remove it if the badge count equals to 0.
+Before using this function, the badge_new() function must be called.
++static void 
+set_badge_number_by_app_id_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+
+   unsigned int count = 0;
+   bool is_success = increase_badge(&count);
+
+   // Set the information result message
+}
+
+static void 
+remove_badge_number_by_app_id_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+
+   unsigned int count = 0;
+   bool is_success = decrease_badge(&count);
+
+   // Set the information result message
+}
+
+
+
+
+Managing On-going Notifications
+The on-going notification management is implemented in the ongoing-notifications.c file.
+The create_ongoing_notification() function creates an on-going notification. This function sets the notification property, image, and title text.
++static notification_h create_ongoing_notification(const char *image_path, const char *title_text)
+{
+   notification_h ongoing_notification = notification_create(NOTIFICATION_TYPE_ONGOING);
+   retvm_if(!ongoing_notification, NULL, "notify is NULL");
+
+   notification_set_property(ongoing_notification, NOTIFICATION_PROP_DISABLE_TICKERNOTI);
+   notification_set_image(ongoing_notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
+   notification_set_text(ongoing_notification, NOTIFICATION_TEXT_TYPE_TITLE, title_text, 
+                         NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+
+   return ongoing_notification;
+}
+
+The delete_ongoing_notification() function removes the on-going notification, and resets the press count and progress value of this notification.
++static int delete_ongoing_notification(notification_data *data)
+{
+   notification_data *data = ongoing_notification_data_get(type);
+   int err = NOTIFICATION_ERROR_NONE;
+   if (data)
+   {
+      if (data->notification)
+      {
+         err = notification_delete(data->notification);
+         data->notification = NULL;
+      }
+      data->press_count = 0;
+      data->progress_value = 0;
+   }
+   return (err == NOTIFICATION_ERROR_NONE);
+}
+
+When the user clicks the list item related to the creation of an on-going notification, the _noti_list_cb() smart callback is invoked. This smart callback calls an on-going notification function and creates the result layout with the request message information. The on-going notification function sets the result information which is used in the result layout.
+You can manage notifications in different ways:
+
+Manage different types of on-going notifications. 
+If the user clicks the list item related to the creation of an on-going notification, the proper function is called according to the on-going activity type, such as percentage, byte, or text.
+If the user clicks the list item related to the removing an on-going notification, the remove_ongoing_notification_cb() function is called to remove the percentage, byte, and text of on-going notifications.
++static void 
+ongoing_notification_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+
+   notify_data->press_count++;
+   if (!notify_data->notification)
+   {
+      notify_data->notification = create_ongoing_notification(ICON2_PATH, notify_data->name);
+   }
+   retm_if(!notify_data->notification, "ongoing_notification is NULL");
+
+   // Set progress to the notification
+   notify_data->progress_value += percentage_increment;
+   if (notify_data->progress_value > percentage_max)
+   {
+      notify_data->progress_value = 0;
+   }
+   notification_set_progress(notify_data->notification, notify_data->progress_value);
+
+   notification_content_text_set(notify_data->notification, percentage_content_text, 
+                                 notify_data->press_count);
+
+   // Set the information result message
+
+   // If a notification of such type is already created, just update it, if not, post it
+}
+
+// The ongoing_notification_byte_cb and ongoing_notification_text_cb functions are 
+// similar to the above ongoing_notification_cb function
+
+static void 
+remove_ongoing_notification_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+
+   bool is_success = true;
+   is_success = delete_ongoing_notification(ONGOING_NOTIFICATION_PERCENT);
+   is_success = delete_ongoing_notification(ONGOING_NOTIFICATION_BYTE) && is_success;
+   is_success = delete_ongoing_notification(ONGOING_NOTIFICATION_TEXT) && is_success;
+
+   // Set the information result message
+}
+
+
+Manage on-going notifications using the application control. 
+To manage on-going notifications that use implicit appcontrol resolution, use the ongoing_notification_by_app_control_cb() function. It sets the extra data to appcontrol, so the data can be used after passing the control to the application.
+To remove on-going notifications that use implicit appcontrol resolution, use the remove_notification_by_app_control_cb() function.
++static void 
+ongoing_notification_by_app_control_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+
+   notify_data->press_count++;
+   if (!notify_data->notification)
+   {
+      notify_data->notification = create_ongoing_notification(ICON1_PATH, notify_data->name);
+   }
+   retm_if(!notify_data->notification, "ongoing_notification is NULL");
+
+   // Set progress to the notification
+
+   notification_content_text_set(notify_data->notification, percentage_content_text, 
+                                 notify_data->press_count);
+
+   // Increase the badge
+
+   // Set the information result message
+
+   // Set extra data to appcontrol
+
+   // If a notification of such type is already created, just update it, if not, post it
+}
+
+void 
+launch_arguments_set(..., char *argument, ...)
+{
+   app_control_h service = NULL;
+   int err = app_control_create(&service);
+   retm_if(err != SERVICE_ERROR_NONE, "service_create failure");
+
+   // Set extra data to appcontrol
+   if (argument)
+   {
+      app_control_add_extra_data(service, MESSAGE_POST, argument);
+   }
+}
+
+static void 
+remove_notification_by_app_control_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+
+   bool result = delete_ongoing_notification(ONGOING_NOTIFICATION_BY_APP_CONTROL);
+   // Remove the badge
+
+   // Set the information result message
+}
+
+static bool 
+delete_ongoing_notification(enum ongoing_notification type)
+{
+   notification_data *data = ongoing_notification_data_get(type);
+   int err = NOTIFICATION_ERROR_NONE;
+   if (data)
+   {
+      if (data->notification)
+      {
+         err = notification_delete(data->notification);
+         data->notification = NULL;
+      }
+      data->press_count = 0;
+      data->progress_value = 0;
+   }
+
+   return (err == NOTIFICATION_ERROR_NONE);
+}
+
+
+Manage on-going notifications using the application ID. 
+To notify a specified user using the application ID of the on-going activity, the ongoing_notification_by_app_id_cb() function is called. It sets the application ID to the appcontrol, so the proper application is called.
+The remove_ongoing_notification_by_app_id_cb() function is used to remove the notification for the specified application ID.
++static void 
+ongoing_notification_by_app_id_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+
+   notify_data->press_count++;
+   if (!notify_data->notification)
+   {
+      notify_data->notification = create_ongoing_notification(ICON1_PATH, notify_data->name);
+   }
+   retm_if(!notify_data->notification, "ongoing_notification_byte is NULL");
+
+   // Set the initial size for the ongoing type
+
+  
+   notification_content_text_set(notify_data->notification, byte_content_text, notify_data->press_count);
+
+   // Set the information result message
+
+   // Set the application ID to appcontrol
+
+   // If a notification of such type is already created, just update it, if not, post it
+}
+
+void 
+launch_arguments_set(..., const char *argument, ...)
+{
+   app_control_h service = NULL;
+   int err = app_control_create(&service);
+   retm_if(err != SERVICE_ERROR_NONE, "service_create failure");
+ 
+   // Set the application ID to appcontrol
+   if (pkgname)
+   {
+      app_control_set_app_id(service, pkgname);
+   }
+}
+
+static void 
+remove_ongoing_notification_by_app_id_cb(notification_data *notify_data)
+{
+   retm_if(!notify_data, "notify_data is NULL");
+
+   notification_data *data = ongoing_notification_data_get(ONGOING_NOTIFICATION_BY_APP_ID);
+   int err = delete_ongoing_notification(data);
+
+   // Set the information result message
+}
+
+
+
+
+Displaying Results
+The _noti_list_cb() function calls the appropriate notification function where the result information is set. Then the result_view_add() function is invoked.
+In the layout_view_add() function, the result information is used to create the result layout.
++static void 
+_noti_list_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   notification_data *notification_info = (notification_data *)data;
+   notification_info->callback(notification_info);
+   result_view_add(navi, notification_info);
+}
+
+static void 
+notify_cb(notification_data *notify_data)
+{
+   // Set the result information  
+   snprintf(notify_data->result_text, TEXT_MAX_LEN, " %s<br><br> %s%s<br><br> %s<br> %s<br><br> %s<br> %s<br>",
+            notify_data->fullname, result_message, 
+            (notify_data->notification) ? result_message_success_text : result_message_failure_text, 
+            notify_message_text, _text,launch_argument_text, app_message_text);
+}
+
+void 
+result_view_add(Evas_Object *navi, notification_data *notify_info)
+{
+   // Create the result layout
+   data->navi_item = elm_naviframe_item_push(data->navi, data->name, NULL, NULL, data->layout, NULL);
+}
+
+
+
+
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
index 1175a9f..fed5b1f 100644
--- a/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
@@ -65,6 +65,10 @@
      
+	
+      
+     
+    
@@ -78,6 +82,10 @@
       
+      
+     
+    
+	
diff --git a/org.tizen.sampledescriptions/index.xml b/org.tizen.sampledescriptions/index.xml
index 014eeaf..9a6a5c1 100644
--- a/org.tizen.sampledescriptions/index.xml
+++ b/org.tizen.sampledescriptions/index.xml
@@ -60,6 +60,8 @@
 	
 		
+			
+			
 			
 			
 			
@@ -80,11 +82,16 @@
 			
 			
 			
+			
+			
 			
 			
 			
 			
 			
+			
+			
+			
 			
 			
 			
@@ -133,11 +140,13 @@
 			
 			
 			
-			
+						
 			
+						
 			
 			
 			
+			
 			
 			
 			
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
index 3619a94..450019f 100644
--- a/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
@@ -242,22 +242,15 @@ main(int argc, char *argv[])
 To use the functions and data types of the App Control API (in mobile and wearable applications), include the <app.h> header file in your application:
  #include <app.h>
-
-
-The http://tizen.org/privilege/email and http://tizen.org/privilege/email.admin privileges are required for the Email API.
-Add the privileges to the tizen-manifest.xml file.
+
+
+
 
 Prepare app_control.
-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.
-
-When app_control is created, set the operation. It is mandatory information for the launch request. If the operation is not specified, APP_CONTROL_OPERATION_DEFAULT is used for the launch request.
-Add extra data to the app_control using the app_control_add_extra_data()	or app_control_add_extra_data_array() function.
-Set the package name for app_control using the app_control_set_package() function. Use the application package name to launch the application explicitly.
-
-error_code = app_control_create(&app_control);
-char *mail_address = "test@target.com";
-char *subject = "Tutorial message";
-char *message = "Tutorial message content.";
+In this example, the app_control launches an application which has the APP_CONTROL_OPERATION_VIEW operation and image/jpeg mime type with a message.
+When the app_control is created, set the operation. The operation is mandatory information for the launch request. If the operation is not specified, APP_CONTROL_OPERATION_DEFAULT is used for the launch request. Add extra data to the app_control using the app_control_add_extra_data() or app_control_add_extra_data_array() function.
++error_code = app_control_create(&app_control);
 
 ret = app_control_create(&app);
 if (ret != APP_CONTROL_ERROR_NONE)
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
index 7f180c6..84aeaa4 100644
--- a/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
@@ -69,7 +69,7 @@
 
 To add a shortcut, use the shortcut_add_to_home() function:
 
-shortcut_add_to_home("Music Player", LAUNCH_BY_PACKAGE, NULL, "/path/to/icon", 1, result_cb, NULL);
+shortcut_add_to_home("Music Player", LAUNCH_BY_APP, NULL, "/path/to/icon", 1, result_cb, NULL);
 
 To add a shortcut, you have to know the package name and set an icon for the application. The icon parameter can be set to NULL (as above) to add a default icon for the application.
 
diff --git a/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
index 1d99531..0ed1cb0 100644
--- a/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
@@ -39,7 +39,7 @@
 Sqlite: Managing the SQL Database
 
   
-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 API layout (for mobile and wearable applications).
+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 API layout.
 
 Warm-up 
 Become familiar with the basics of the Sqlite API by learning about: 
diff --git a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
index 54195de..3444164 100644
--- a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
@@ -44,8 +44,6 @@
 		Related Info
 		
             OpenGL ES Guide
-			OpenGL ES API for Mobile Native
-			OpenGL ES API for Wearable Native
 		
 	
 	
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
index 532d063..958cc76 100644
--- a/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
@@ -153,6 +153,7 @@ error_code = audio_in_get_channel(input, &channel);
 Retrieve the audio sample type information using the audio_in_get_sample_type() function:
 
 +audio_sample_type_e sample_type;
 error_code = audio_in_get_sample_type(input, &sample_type);
 
 
@@ -192,7 +193,9 @@ ecore_thread_run(synchronous_playback, NULL, NULL, NULL);
 
 To start capturing the audio from the H/W device, prepare the audio input device. After using the audio_in_prepare() function, the device starts buffering (storing in an internal buffer) the captured audio.
 
-error_code = audio_in_prepare(input);
++// Audio input prepare (starts the hardware recording process)
+error_code = audio_in_prepare(input);
 
 
 To obtain the captured audio data from the internal buffer, use the audio_in_read() function:
@@ -215,6 +218,7 @@ int bytes_number = audio_in_read(input, buffer, buffer_size);
 
To stop the hardware recording process (buffering) after reading the data, use the audio_in_unprepare() function:
 
 +// Stop the hardware recording process
 error_code = audio_in_unprepare(input);
 
 
@@ -222,6 +226,7 @@ error_code = audio_in_unprepare(input);
 To play the recorded audio sample from the buffer, prepare the audio output device. After using the audio_out_prepare() function, the device prepares its internal output buffer for the playback.
 
 +// Audio output prepare (starts the hardware playback process)
 error_code = audio_out_prepare(output);
 
 
@@ -238,6 +243,7 @@ int bytes_number = audio_out_write(output, buffer, buffer_size);
 To stop the hardware playback process (buffering) after writing the data to the output buffer, use the audio_out_unprepare() function:
 
 +// Stop the hardware playback process
 error_code = audio_out_unprepare(output);
 
 
@@ -336,6 +342,7 @@ if (!fp_w)
 The file is ready and the callback function is set. Proceed with the asynchronous recording by calling the audio_in_prepare() function to initiate the hardware recording process:
 
 +// Audio input prepare (starts the hardware recording process)
 error_code = audio_in_prepare(input);
 
 
@@ -344,6 +351,7 @@ error_code = audio_in_prepare(input);
 Inside the callback function, you retrieve a handle to the input device and the number of captured audio sample bytes using the audio_in_peek() function. This information can be used to extract the data from the input internal buffer and store it in the file. The audio data stored in the obtained buffer is written to the recording file (the one that was prepared earlier) with the fwrite() function, and after storing the received audio sample pack in the file, it can be removed from the internal buffer using the audio_in_drop() function.
 
 +// Callback invoked for every captured part of the recording
 void _audio_io_stream_read_cb(audio_in_h handle, size_t nbytes, void *userdata)
 {
    const void * buffer = NULL;
@@ -380,17 +388,20 @@ void _audio_io_stream_read_cb(audio_in_h handle, size_t nbytes, void *userdata)
 The audio_in_unprepare() function stops the hardware recording process, so the callback for asynchronous recording is no longer called:
 
 +// Stop the hardware recording process
 error_code = audio_in_unprepare(input);
 
 
 If the asynchronous recording is no longer used, or if the audio_in_set_stream_cb() function is called each time before starting the asynchronous recording, you can unset the callback function with the audio_in_unset_stream_cb() function:
 +// Unset the callback function used for asynchronous recording process
 error_code = audio_in_unset_stream_cb(input);
 
 
 The file used for recording is still opened, so if the recording was stopped, the file can be closed:
 
 +// Close the file used for recording
 error_code = fclose(fp_w);
 
 
@@ -408,6 +419,7 @@ error_code = audio_out_set_stream_cb(output, _audio_io_stream_write_cb, NULL);
 After this step, you can call the audio_out_prepare() function and start playing the audio. However, in this case, to play the recording from a file instead of using local buffer, you must prepare (open for reading) a file the recording is stored in:
 
 +// Prepare a file to be used for playback
 #include <storage.h>
 
 char io_stream_r_path[200];
@@ -425,6 +437,7 @@ FILE* fp_r = fopen(io_stream_r_path, "r");
 The file is ready and the callback function is set. Proceed with the asynchronous playback by calling the audio_out_prepare() function to initiate the hardware playback process:
 
 +// Audio output prepare (starts the hardware playback process)
 error_code = audio_out_prepare(output);
 
 
@@ -435,6 +448,7 @@ error_code = audio_out_prepare(output);
 Inside the callback, you retrieve a handle to the output internal buffer and the number of audio sample bytes that can be written to the output buffer using the malloc() and memset() functions. Read the pack of the audio sample from the file and store it in the local buffer using the fread() function, and copy the audio sample data from the local buffer to the output internal buffer to start the playback with the audio_out_write() function.
 
 +// Callback invoked for every stored part of the audio
 void _audio_io_stream_write_cb(audio_out_h handle, size_t nbytes, void *userdata)
 {
    char * buffer = NULL;
@@ -473,6 +487,7 @@ error_code = audio_out_unprepare(output);
 If the asynchronous playback is no longer used, or if the audio_out_set_stream_cb() function is called each time before starting the asynchronous playback, you can unset the callback function with the audio_out_unset_stream_cb() function when the playback is stopped:
 
 +// Unset the callback function used for asynchronous playback process
 error_code = audio_out_unset_stream_cb(output);
 
 
@@ -480,6 +495,7 @@ error_code = audio_out_unset_stream_cb(output);
 The file used for playback is still opened, so if the playback was stopped, the file can be closed:
 
 +// Close the file used for playback
 error_code = fclose(fp_r);
 
 
@@ -491,7 +507,9 @@ error_code = fclose(fp_r);
 
 Release the memory allocated to the local buffer using the free() function:
 
-free(buffer);
++// Release the memory allocated for the local buffer used for recording/playing
+free(buffer);
 
 Unprepare the audio input and output devices using the audio_in_unprepare() and audio_out_unprepare() functions:
 
diff --git a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
index c79befa..99ad33b 100644
--- a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
@@ -90,7 +90,7 @@
 
 To define the header file and privileges required to use the key manager:
 		
-To use the Key Manager privileged API, declare the http://tizen.org/privilege/keymanager privilege in the manifest.xml file of the application package.
+To use the Key Manager privileged API, declare the http://tizen.org/privilege/keymanager privilege in the tizen-manifest.xml file of the application package.
 To use the functions and data types of the Key Manager API (in mobile and wearable applications), include the <ckmc/ckmc-manager.h> header file in your application:
  #include <ckmc/ckmc-manager.h>
@@ -206,6 +206,7 @@ if (CKMC_ERROR_NONE != ret)
 
 	Table: History data types and required privilegesDescription
 		
 		
+			 
 				All types
 			
 			CONTEXT_HISTORY_FILTER_TIME_SPAN
 		
+	            All types, except:
+                CONTEXT_HISTORY_COMMON_SETTING_FOR_APP
+                CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC
+                CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO
+			 CONTEXT_HISTORY_FILTER_RESULT_SIZE
 			Integer
 			
@@ -201,36 +208,28 @@ Once the context_hist
 			
 		
 		
+			 
 				CONTEXT_HISTORY_PEAK_TIME_FOR_APP
-				CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC
-				CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO
+				CONTEXT_HISTORY_COMMON_SETTING_FOR_APP
 			
 			CONTEXT_HISTORY_FILTER_APP_ID
 			String
 			
-				Use the CONTEXT_HISTORY_PEAK_TIME_FOR_APP filter to compute the peak time for a specific application. Without this filter, the peak time is computed from the usage history of all applications.
-				In case of the peak time for music or video playbacks, these filters can be used to restrict the application that is used to play the media contents. Without this filter, playback logs from all applications are used to get the statistics.
+				Use this filter to compute the peak time (or the common settings) for a specific application. Without this filter, the peak time (or the common setting) is computed from the usage history of all applications.
 				For more information on the application IDs, see the Application Framework guide.
 			
 		
 		CONTEXT_HISTORY_FILTER_DAY_OF_WEEK Integer
 			
-				Use this filter to get application usage patterns on weekdays or weekends. The filter value can be either CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS, CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS, or CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL. By default, data from both weekdays and weekends are used if this filter is not set.
-			
CONTEXT_HISTORY_COMMON_SETTING_FOR_APP
-				CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC
-				CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO
+				CONTEXT_HISTORY_PEAK_TIME_FOR_APP
+				CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC
+				CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO
 			 CONTEXT_HISTORY_FILTER_APP_ID String CONTEXT_HISTORY_FILTER_DAY_OF_WEEK Integer 
-				Use this filter to retrieve the most common setting values for a specific application.
-				In case of music or video playback history, this filter can be used to get the common setting values when listening to music or watching videos using a specific application.
+				Use this filter to get usage patterns on weekdays or weekends. The filter value can be either CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS, CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS, or CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL. Without this filter, data from both weekdays and weekends are used.
 			
 		
 		
         
     
 
 
 The platform returns true for this key, if the device supports the heart rate monitor.
     
 	http://tizen.org/feature/sensor.heart_rate_monitor.led_green bool The platform returns true for this key, if the device supports the green LED sensor of the heart rate monitor.
http://tizen.org/feature/sensor.heart_rate_monitor.led_ir bool The platform returns true for this key, if the device supports the infrared LED sensor of the heart rate monitor.
http://tizen.org/feature/sensor.heart_rate_monitor.led_red bool The platform returns true for this key, if the device supports the red LED sensor of the heart rate monitor.

 	http://tizen.org/feature/sensor.humidity
      bool
 	 The platform returns true for this key, if the device supports the humidity sensor.
 		
 	
 Sample name 
      Description 
     
Application Control Demonstrates how you can search for applications supporting specific classes of operations and run them using the operation contexts.
Bluetooth Chat Demonstrates how you can send and receive data between 2 devices.
     
      Bundle
      Demonstrates how you can manipulate bundle objects. Preference
      Demonstrates how you can work with custom preferences.
     
Puzzle Demonstrates how you can implement a complex view using recursive composition of the standard EFL components.
Quickpanel Demonstrates how you can create a custom quickpanel window and use volume, LED, and Wi-Fi APIs to acquire and set related device settings.
 	 
      Scheduler 
      Demonstrates how you can manage scheduling of calendar events and other calendar options. Demonstrates how you can implement a simple Homescreen-like application.
     
 	Sketch Demonstrates how you can implement an image view and change the color using raw image data of the standard EFL components.
Stopwatch Demonstrates how you can implement a complex view using recursive composition of the standard EFL UI components and containers in a component hierarchy.
System Info Demonstrates how you how to get system information.

      Taskmanager
      Demonstrates how you can manage running applications as well as acquire information about them.
     

 
 (Circle) Email 
      Demonstrates how you can implement a complex circular email view using EFL UI components and containers.
     
(Circle) Rotary Timer Demonstrates how you can implement a circular digital clock with a timer function.	
 	 
      (Circle) Setting Time 
      Demonstrates how you can implement a complex circular time setting view using EFL UI components and containers. Demonstrates how you can implement a complex rectangular email view using EFL UI components and containers.
     
 	(Rectangle) NotificationManager Demonstrates how you can implement and manage notifications.
 
      (Rectangle) Settings 
      Demonstrates how you can implement a complex rectangular settings view using EFL UI components and containers.
     
 	
 
 
+
 Saving, Getting, or Removing a Certificate
 
 To store, remove, or retrieve the client certificate from the key manager:
@@ -407,8 +408,7 @@ if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
 }
-

Table: History data types and required privileges
Description
+	All types	CONTEXT_HISTORY_FILTER_TIME_SPAN
+ All types, except: + CONTEXT_HISTORY_COMMON_SETTING_FOR_APP + CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC + CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO +	CONTEXT_HISTORY_FILTER_RESULT_SIZE	Integer	@@ -201,36 +208,28 @@ Once the context_hist
+	CONTEXT_HISTORY_PEAK_TIME_FOR_APP - CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC - CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO + CONTEXT_HISTORY_COMMON_SETTING_FOR_APP	CONTEXT_HISTORY_FILTER_APP_ID	String	- Use the CONTEXT_HISTORY_PEAK_TIME_FOR_APP filter to compute the peak time for a specific application. Without this filter, the peak time is computed from the usage history of all applications. - In case of the peak time for music or video playbacks, these filters can be used to restrict the application that is used to play the media contents. Without this filter, playback logs from all applications are used to get the statistics. + Use this filter to compute the peak time (or the common settings) for a specific application. Without this filter, the peak time (or the common setting) is computed from the usage history of all applications. For more information on the application IDs, see the Application Framework guide.
CONTEXT_HISTORY_FILTER_DAY_OF_WEEK	Integer	- Use this filter to get application usage patterns on weekdays or weekends. The filter value can be either CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS, CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS, or CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL. By default, data from both weekdays and weekends are used if this filter is not set. -
CONTEXT_HISTORY_COMMON_SETTING_FOR_APP - CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC - CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO + CONTEXT_HISTORY_PEAK_TIME_FOR_APP + CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC + CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO	CONTEXT_HISTORY_FILTER_APP_ID	String	CONTEXT_HISTORY_FILTER_DAY_OF_WEEK	Integer	- Use this filter to retrieve the most common setting values for a specific application. - In case of music or video playback history, this filter can be used to get the common setting values when listening to music or watching videos using a specific application. + Use this filter to get usage patterns on weekdays or weekends. The filter value can be either CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS, CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS, or CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL. Without this filter, data from both weekdays and weekends are used.
The platform returns true for this key, if the device supports the heart rate monitor.
http://tizen.org/feature/sensor.heart_rate_monitor.led_green	bool	The platform returns true for this key, if the device supports the green LED sensor of the heart rate monitor.
http://tizen.org/feature/sensor.heart_rate_monitor.led_ir	bool	The platform returns true for this key, if the device supports the infrared LED sensor of the heart rate monitor.
http://tizen.org/feature/sensor.heart_rate_monitor.led_red	bool	The platform returns true for this key, if the device supports the red LED sensor of the heart rate monitor.
http://tizen.org/feature/sensor.humidity	bool	The platform returns true for this key, if the device supports the humidity sensor.	Sample name	Description
Application Control	Demonstrates how you can search for applications supporting specific classes of operations and run them using the operation contexts.
Bluetooth Chat	Demonstrates how you can send and receive data between 2 devices.
Bundle	Demonstrates how you can manipulate bundle objects.	Preference	Demonstrates how you can work with custom preferences.
Puzzle	Demonstrates how you can implement a complex view using recursive composition of the standard EFL components.
Quickpanel	Demonstrates how you can create a custom quickpanel window and use volume, LED, and Wi-Fi APIs to acquire and set related device settings.
Scheduler	Demonstrates how you can manage scheduling of calendar events and other calendar options.	Demonstrates how you can implement a simple Homescreen-like application.
Sketch	Demonstrates how you can implement an image view and change the color using raw image data of the standard EFL components.
Stopwatch	Demonstrates how you can implement a complex view using recursive composition of the standard EFL UI components and containers in a component hierarchy.
System Info	Demonstrates how you how to get system information.
Taskmanager	Demonstrates how you can manage running applications as well as acquire information about them.
(Circle) Email	Demonstrates how you can implement a complex circular email view using EFL UI components and containers.
(Circle) Rotary Timer	Demonstrates how you can implement a circular digital clock with a timer function.
(Circle) Setting Time	Demonstrates how you can implement a complex circular time setting view using EFL UI components and containers.	Demonstrates how you can implement a complex rectangular email view using EFL UI components and containers.
(Rectangle) NotificationManager	Demonstrates how you can implement and manage notifications.
(Rectangle) Settings	Demonstrates how you can implement a complex rectangular settings view using EFL UI components and containers.

- +

Creating Key Pairs

@@ -921,31 +921,31 @@ const char *password = "password"; // PKCS#12 file can be protected b ret = ckmc_pkcs12_load(p12file, password, &ppkcs12); if (CKMC_ERROR_NONE != ret || ppkcs12 == NULL) + { // Error handling } -if (ppkcs12->priv_key != NULL) +if (ppkcs12->priv_key != NULL) { // Check a private key } -if (ppkcs12->cert != NULL) +if (ppkcs12->cert != NULL) { // Check a certificate } int cnt = 0; -ckmc_cert_list_s *tmp_list = ppkcs12->ca_chain; +ckmc_cert_list_s *tmp_list = ppkcs12->ca_chain; while(tmp_list!= NULL) { // Check a certificate list tmp_list = tmp_list ->next; } - -ckmc_pkcs12_free(ppkcs12);; // Called when the pkcs12 data is no longer needed +ckmc_pkcs12_free(ppkcs12); // Called when the pkcs12 data is no longer needed

Set a rule to deny access:

@@ -1018,8 +1017,7 @@ if (CKMC_ERROR_NONE != ret)
 {
    // Error handling
 }
-

Related Info

TAU

Hello World
Managing Pages
Event Handling
Managing Page
UI Components
Creating a UI
Circular UI +
Creating a Notepad UI Application
Applications for Circular UI
Accessibility

W3C

HTML Priorities
HTML5 Forms
Selectors API Level 1 and Level 2
Media Queries
Multiple Screen Support
Multiple UI Layouts
Frame Flattening
HTML5 session history of browsing contexts
Clipboard API and events
HTML5 Drag and drop
CSS Transforms
CSS Animations Module Level 3
CSS Transitions Module Level 3

Content

Actors and Stage
Coordinate System
Positioning Actors
Event Handling for Actors
Actor Basics
Layout Management
Image Actor

Related Info

Actors: Working with Basic DALi Components

Actor is the primary object in DALi application.

+ +

Actor Basics

Actor is the basic component that composes the entire scene. It can have visible (for example, UI components, image actor) or invisible (for example, camera actor or layer) forms.

Actor is also the primary object with which DALi applications interact. Multiple types of event signals provided by actors can be handled in a application through user-defined callback functions.

Actors and Stage

Stage is a top-level object that represents the entire scene or screen. It is used for displaying a hierarchy of actors managed by the scene graph structure. An actor inherits a position relative to its parent, and can be moved in relation to this point.

@@ -55,7 +60,7 @@ Stage::GetCurrent().Add(actor); -

Coordinate System

The stage has a 2D size that matches the size of the application window. The default unit 1 is 1 pixel with default camera.

@@ -65,7 +70,7 @@ Stage::GetCurrent().Add(actor);

DALi coordinate system

Positioning Actors

An actor inherits its parent's position. The relative position between the actor & parent is determined by the following properties:

Parent origin @@ -98,7 +103,7 @@ Stage::GetCurrent().Add(actor);

Event Handling for Actors

The Dali::Actor class provides following event signals:

@@ -168,6 +173,202 @@ actor.TouchedSignal().Connect(&OnTouch);

For more information, see Event Handling.

Layout Management

+ +

DALi provides rule-based layout management, size negotiation, which is used to allocate the sizes of the actors on the stage based on rules of dependency between the actors.

+ +

Dimensions

The notion of width and height is generalized into the concept of a dimension. Several methods take the Dimension parameter. The Dimension enum specifies the available dimensions as bit fields:

Dimension::WIDTH
Dimension::HEIGHT

If a method can process width and height at the same time, the Dimension::ALL_DIMENSIONS mask can be specified.

+ +

Resize Policies

+ +

The ResizePolicy enum specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ Table: Resizing rules +
Resize policy	Description	Illustration
ResizePolicy::FIXED	Use this option to maintain a specific size as set by the SetSize() function. This is the default for all actors.
ResizePolicy::USE_NATURAL_SIZE	Use this option for objects, such as images or text to get their natural size. This can mean the dimensions of an image or the size of text with no wrapping. You can also use this option with table views when the size of the table depends on its children.
ResizePolicy::FILL_TO_PARENT	The size of the actor is similar to its parent's size with proportionate filling considered.
ResizePolicy::SIZE_RELATIVE_TO_PARENT	The size of the actor is similar to its parent's size with a relative scale. Use the SetSizeModeFactor() function to specify the ratio.
ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT	The size of the actor is similar to its parent's size with a fixed offset using the SetSizeModeFactor function.
ResizePolicy::FIT_TO_CHILDREN	The size of the actor is scaled around the size of the its children. For example, the height of a pop-up can be resized according to its contents.
ResizePolicy::DIMENSION_DEPENDENCY	This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.

+ + +

Example with Actors

+ +

This section describes a layout example with a actor.

+ +

Enabling Size Negotiation

+ +

Text and image actors have relayout enabled by default, while plain actors are disabled unless the SetResizePolicy() function is called.

+ +

Specifying Size Policies

+ +

Actors have different size policies by default. For example, the image actor is set to USE_NATURAL_SIZE. This ensures that an image actor uses its natural size by default when it is placed on the stage. However, if the SetSize() function is used with sizes other than 0 on the image actor, the current resize policy is overridden by the FIXED policy and the actor takes the specified size.

+ +

You can specify how an actor is size-negotiated:

+ +

void SetResizePolicy(ResizePolicy::Type policy, Dimension::Type dimension) @endcode

+ +

It is possible to specify different policies for the different dimensions of width and height to archive different layouts. Different actors have different resize policies specified. For example, image actors are set to USE_NATURAL_SIZE by default.

+ +

The following example shows the rootActor with its width set to ResizePolicy::FILL_TO_PARENT and its height set to ResizePolicy::FIT_TO_CHILDREN. It has an image actor added to it with an explicit call to USE_NATURAL_SIZE in both dimensions called on it. This creates an actor that fills the space of its parent in the width dimension and fits its child in the height dimension. As the image actor child is using its natural size, the height of the root actor fits the height of the child image.

+ +

Actor rootActor = Actor::New();
+rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);
+ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));
+image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
+rootActor.Add(image);

+ +

The following images show the before and after layouts for this code example.

+ +

Figure: Before and after setting the resize policy

Before and after setting the resize policy

+ + +

This example shows a root actor set to expand to its parent's width and adjust around its child's height. The child image actor is set to its natural size.

+ +

To specify that a dimension has a dependency on another dimension, use the ResizePolicy::DIMENSION_DEPENDENCY policy. For example, if the dimension is Dimension::HEIGHT and the dependency is Dimension::WIDTH, there is a height-for-width dependency in effect. You can use the policy in a text view that wraps its text. The following example shows a text view that expands its width according to the size of its parent, wraps its contents and then determines its height based on the width.

+ +

TextLabel text = TextLabel::New("Example");
+text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);

+ +

Specifying Sizes and Size Limits

+ +

To specify a fixed size for an actor, use the FIXED resize policy and set the desired size using the SetSize function. If only 1 dimension is FIXED, the other value in the size parameter is ignored, so it is safe to set it to 0.

To constrain the final negotiated size of an actor, set the following minimum and maximum sizes, respectively:

+ +

void SetMinimumSize(const Vector2& size)
+void SetMaximumSize(const Vector2& size)

+ +

Adjusting the Negotiated Size

+ +

When an actor must to maintain the aspect ratio of its natural size, use the SizeScalePolicy() function. This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.

You can use the following resize policies:

SizeScalePolicy::USE_SIZE_SET +
This is the default policy.
SizeScalePolicy::FIT_WITH_ASPECT_RATIO +
Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.
SizeScalePolicy::FILL_WITH_ASPECT_RATIO +
Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.

+ +

void SetSizeScalePolicy(SizeScalePolicy::Type policy)

+ +

Using Actors in Containers

+ +

When using actors in containers, such as a table view, you can specify the padding surrounding the actor. The padding specifies the left, right, bottom, and top padding value.

+ +

void SetPadding(const Padding& padding)

+ + + + + + + + + + +

Note
Beware of infinite dependency loops! + The simplest form of this is shown when the resize policy of a parent actor is set to ResizePolicy::FIT_TO_CHILDREN with a child that has a resize policy of ResizePolicy::FILL_TO_PARENT. + A more complex loop occurs when a parent actor has a width policy of ResizePolicy::DIMENSION_DEPENDENCY with a height policy of ResizePolicy::FIT_TO_CHILDREN. The parent has a single child with a height policy ResizePolicy::DIMENSION_DEPENDENCY with width. If the child's width policy is ResizePolicy::FILL_TO_PARENT, a loop occurs. + Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates actors 0 sizes.

Note

Beware of infinite dependency loops!

The simplest form of this is shown when the resize policy of a parent actor is set to ResizePolicy::FIT_TO_CHILDREN with a child that has a resize policy of ResizePolicy::FILL_TO_PARENT.

A more complex loop occurs when a parent actor has a width policy of ResizePolicy::DIMENSION_DEPENDENCY with a height policy of ResizePolicy::FIT_TO_CHILDREN. The parent has a single child with a height policy ResizePolicy::DIMENSION_DEPENDENCY with width. If the child's width policy is ResizePolicy::FILL_TO_PARENT, a loop occurs.

Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates actors 0 sizes.

+ +

Image Actor

An image can be displayed through an image actor. THe Dali::ImageActor class inherits from the Dali::Actor class and provides means to display resources, such as images on the stage.

+ +

Construction

+ +

The image actor is constructed by passing a Dali::Image object. The Dali::Image is an abstract base class with multiple derived classes, and the Dali::ResourceImage class is used for loading an image from a file.

+ +

Dali::Image image = ResourceImage::New(myImageFilename);
+Dali::ImageActor myImageActor = ImageActor::New(image);

+ +

Style

+ +

The image actor can render an image in 2 different ways. Although the nine-patch feature is supported by the image actor, using 9-patch image (.9.png or .9.jpg) is encouraged.

STYLE_QUAD: A simple flat quad style for rendering images.
STYLE_NINE_PATCH: This style gives the flexibility to stretch images by dividing it into 9 sections. The corners are not scaled; the edges are scaled on 1 axis, and the middle is scaled in both axes.

+ +

myImageActor.SetStyle (Dali::ImageActor::STYLE_NINE_PATCH);

+ +

Border

+ +

The border is used in the ImageActor::STYLE_NINE_PATCH. It defines the border values of the image for stretching.

+ +

Dali::ImageActor::Border border(0.45,0.15,0.45,0.15);
+myImageActor.SetBorder(border);

+ +

Pixel Area

+ +

The area of the image to be displayed by the image actor can be set by setting the pixel area. The pixel area is relative to the top-left (0,0) coordinates of the image.

+ +

Rect<int> pixel1(myX, myY, myWidth, myHeight);
+if(!myImageActor.IsPixelAreaSet())
+{
+   myImageActor.SetPixelArea(pixel1);
+}
+
+//Removes the pixel area setting
+myImageActor.ClearPixelArea();

+ +

Changing an Image

+ +

The image actor needs a reference to a Dali::Image object on creation. However the Image object can be later changed by calling DaliActor:SetImage() function.

+ +

myImageActor.SetImage(newImage);

+ diff --git a/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm b/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm index cb67d3a..47184a2 100755 --- a/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm +++ b/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm @@ -47,7 +47,7 @@

Actor and Stage

Actor is the primary object for interaction in DALi applications. Actors are effective nodes that receive input (touch events) and act as a container for drawable elements and other actors. A DALi application uses a hierarchy of actor objects to position visible content. An actor inherits a position relative to its parent, and can be moved relative to this point. UI components can be built by combining multiple actors.

Stage is a top-level node of the scene graph used for displaying a tree of actors. To display an actor, add it to the stage.

Stage is a top-level node of the scene graph used for displaying a tree of actors. To display an actor, add is to the stage.

Signal and Slot

@@ -68,7 +68,7 @@ DALi.

dali-toolkit

This module provides UI components and various effects on top of the dali-core.

dali-adaptor -

dali-adaptor is a platform adaptation layer. It initializes and sets up DALi appropriately. The module provides many platform-related services with its internal module, platform abstraction. Several signals can be connected to it to keep you informed when certain platform-related activities occur.

dali-adaptor is a platform adaptation layer. It initializes and sets up DALi appropriately. The module provides many platform-related services. Several signals can be connected to it to keep you informed when certain platform-related activities occur.

Figure: DALi internal structure

DALi internal structure

diff --git a/org.tizen.ui.guides/html/native/dali/event_handling_n.htm b/org.tizen.ui.guides/html/native/dali/event_handling_n.htm index 07ffd8d..8eace44 100755 --- a/org.tizen.ui.guides/html/native/dali/event_handling_n.htm +++ b/org.tizen.ui.guides/html/native/dali/event_handling_n.htm @@ -67,10 +67,7 @@

The concept of signal and slots were introduced by Qt for communication between objects. The event mechanism of DALi is inspired by Qt.

Figure: A schematic example of signal-slot connections
- : Signal 1 is connected to slot 1,
- signal 2 is connected to slot 1 & slot 3,
- and signal 3 is connected to slot 2.

Figure: Signal and slot event handling

Signal and slot event handling

The signal and slot system has following advantages:

diff --git a/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm b/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm index 178ce2e..9bfd3d7 100755 --- a/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm +++ b/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm @@ -41,10 +41,6 @@

Enables you to get started with the DALi UI programming.

Actors: Working with Basic DALi Components
Enables you to handle DALi actors.

Event Handling: Managing the Event Flow
Enables you to handle DALi events.

UI Components: Creating the Application Layout diff --git a/org.tizen.ui.guides/html/native/dali/imageactor_n.htm b/org.tizen.ui.guides/html/native/dali/imageactor_n.htm deleted file mode 100755 index 34dc3a0..0000000 --- a/org.tizen.ui.guides/html/native/dali/imageactor_n.htm +++ /dev/null @@ -1,111 +0,0 @@ - - - - - - - - - - - - - - Actors: Working with Basic DALi Components - - - - - - -

Image Actor: Displaying Images

- -

An image can be displayed through an image actor. THe Dali::ImageActor class inherits from the Dali::Actor class and provides means to display resources, such as images on the stage.

- -

Construction

- -

Dali::Image image = ResourceImage::New(myImageFilename);
-Dali::ImageActor myImageActor = ImageActor::New(image);

- -

Style

- -

The image actor can render an image in 2 different ways. Although the nine-patch feature is supported by the image actor, using 9-patch image (.9.png or .9.jpg) is encouraged.

STYLE_QUAD: A simple flat quad style for rendering images.
STYLE_NINE_PATCH: This style gives the flexibility to stretch images by dividing it into 9 sections. The corners are not scaled; the edges are scaled on 1 axis, and the middle is scaled in both axes.

- -

myImageActor.SetStyle (Dali::ImageActor::STYLE_NINE_PATCH);

- -

Border

- -

The border is used in the ImageActor::STYLE_NINE_PATCH. It defines the border values of the image for stretching.

- -

Dali::ImageActor::Border border(0.45,0.15,0.45,0.15);
-myImageActor.SetBorder(border);

- -

Pixel Area

- -

The area of the image to be displayed by the image actor can be set by setting the pixel area. The pixel area is relative to the top-left (0,0) coordinates of the image.

- -

Rect<int> pixel1(myX, myY, myWidth, myHeight);
-if(!myImageActor.IsPixelAreaSet())
-{
-   myImageActor.SetPixelArea(pixel1);
-}
-
-//Removes the pixel area setting
-myImageActor.ClearPixelArea();

- -

Changing an Image

- -

The image actor needs a reference to a Dali::Image object on creation. However the Image object can be later changed by calling DaliActor:SetImage() function.

- -

myImageActor.SetImage(newImage);

- - - - -

- -

- - - - - - - - diff --git a/org.tizen.ui.guides/html/native/dali/layout_n.htm b/org.tizen.ui.guides/html/native/dali/layout_n.htm deleted file mode 100755 index 955efab..0000000 --- a/org.tizen.ui.guides/html/native/dali/layout_n.htm +++ /dev/null @@ -1,213 +0,0 @@ - - - - - - - - - - - - - - Actors: Working with Basic DALi Components - - - - - - -

Layout Management: Allocating the Sizes of the Actors

- -

DALi provides rule-based layout management, size negotiation, which is used to allocate the sizes of the actors on the stage based on rules of dependency between the actors.

- -

Dimensions

The notion of width and height is generalized into the concept of a dimension. Several methods take the Dimension parameter. The Dimension enum specifies the available dimensions as bit fields:

Dimension::WIDTH
Dimension::HEIGHT

If a method can process width and height at the same time, the Dimension::ALL_DIMENSIONS mask can be specified.

- -

Resize Policies

- -

The ResizePolicy enum specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- Table: Resizing rules -
Resize policy	Description	Illustration
ResizePolicy::FIXED	Use this option to maintain a specific size as set by the SetSize() function. This is the default for all actors.
ResizePolicy::USE_NATURAL_SIZE	Use this option for objects, such as images or text to get their natural size. This can mean the dimensions of an image or the size of text with no wrapping. You can also use this option with table views when the size of the table depends on its children.
ResizePolicy::FILL_TO_PARENT	The size of the actor is similar to its parent's size with proportionate filling considered.
ResizePolicy::SIZE_RELATIVE_TO_PARENT	The size of the actor is similar to its parent's size with a relative scale. Use the SetSizeModeFactor() function to specify the ratio.
ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT	The size of the actor is similar to its parent's size with a fixed offset using the SetSizeModeFactor function.
ResizePolicy::FIT_TO_CHILDREN	The size of the actor is scaled around the size of the its children. For example, the height of a pop-up can be resized according to its contents.
ResizePolicy::DIMENSION_DEPENDENCY	This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.

- - -

Example with Actors

- -

This section describes a layout example with a actor.

- -

Enabling Size Negotiation

- -

Text and image actors have relayout enabled by default, while plain actors are disabled unless the SetResizePolicy() function is called.

- -

Specifying Size Policies

- -

You can specify how an actor is size-negotiated:

- -

void SetResizePolicy(ResizePolicy::Type policy, Dimension::Type dimension) @endcode

- -

Actor rootActor = Actor::New();
-rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);
-ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));
-image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
-rootActor.Add(image);

- -

The following images show the before and after layouts for this code example.

- -

Figure: Before and after setting the resize policy

Before and after setting the resize policy

- - -

This example shows a root actor set to expand to its parent's width and adjust around its child's height. The child image actor is set to its natural size.

- -

TextLabel text = TextLabel::New("Example");
-text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
-text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);

- -

Specifying Sizes and Size Limits

- -

To constrain the final negotiated size of an actor, set the following minimum and maximum sizes, respectively:

- -

void SetMinimumSize(const Vector2& size)
-void SetMaximumSize(const Vector2& size)

- -

Adjusting the Negotiated Size

- -

You can use the following resize policies:

SizeScalePolicy::USE_SIZE_SET -
This is the default policy.
SizeScalePolicy::FIT_WITH_ASPECT_RATIO -
Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.
SizeScalePolicy::FILL_WITH_ASPECT_RATIO -
Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.

- -

void SetSizeScalePolicy(SizeScalePolicy::Type policy)

- -

Using Actors in Containers

- -

When using actors in containers, such as a table view, you can specify the padding surrounding the actor. The padding specifies the left, right, bottom, and top padding value.

- -

void SetPadding(const Padding& padding)

- - - - - - - - - - -

Note
Beware of infinite dependency loops! - The simplest form of this is shown when the resize policy of a parent actor is set to ResizePolicy::FIT_TO_CHILDREN with a child that has a resize policy of ResizePolicy::FILL_TO_PARENT. - A more complex loop occurs when a parent actor has a width policy of ResizePolicy::DIMENSION_DEPENDENCY with a height policy of ResizePolicy::FIT_TO_CHILDREN. The parent has a single child with a height policy ResizePolicy::DIMENSION_DEPENDENCY with width. If the child's width policy is ResizePolicy::FILL_TO_PARENT, a loop occurs. - Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates actors 0 sizes.

Note

Beware of infinite dependency loops!

The simplest form of this is shown when the resize policy of a parent actor is set to ResizePolicy::FIT_TO_CHILDREN with a child that has a resize policy of ResizePolicy::FILL_TO_PARENT.

Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates actors 0 sizes.

- - - - -

- -

- - - - - - - - diff --git a/org.tizen.ui.guides/html/native/efl/components_wn.htm b/org.tizen.ui.guides/html/native/efl/components_wn.htm index 07466b0..046cc45 100755 --- a/org.tizen.ui.guides/html/native/efl/components_wn.htm +++ b/org.tizen.ui.guides/html/native/efl/components_wn.htm @@ -171,7 +171,7 @@ elm_object_text_set(button, "Click me!");

Using Button Styles

Various styles can be used on the button. Tizen supports the following styles for wearable core controls:

Various styles can be used on the button. Tizen supports the following styles for the rectangular UI component:

default
green
red
nextdepth

Tizen supports the following styles for Gear O:

Tizen supports the following styles for the circular UI component:

default
bottom

To change the style of the button, call the elm_object_style_set() function on the button object.

-// Example for wearable core control
+// Example for the rectangular UI component
 elm_object_style_set(button, "nextdepth");
 
-// Example for Gear O
+// Example for the circular UI component
 elm_object_style_set(button, "bottom");

Modifying the Check Styles

The check component style can be set with the elm_object_style_set() function.

The following styles are available for wearable core controls:

The following styles are available for the rectangular UI component:

default
on and off

The following styles are available for Gear O:

The following styles are available for the circular UI component:

default
small

As with a radio object, an icon can be set for the wearable core control.

As with a radio object, an icon can be set for the rectangular UI component.

 // Create a Home icon 
 Evas_Object *icon;
@@ -368,11 +368,11 @@ ctxpopup = elm_ctxpopup_add(parent);
 
 Modifying the Ctxpopup Style
 
-The following styles are available for wearable core controls:
+The following styles are available for the rectangular UI component:
 
 default
 
-The following styles are available for Gear O:
+The following styles are available for the circular UI component:
 
 select_mode
 select_mode/top, select_mode/bottom (These two styles can be used as a pair.)
@@ -1949,17 +1949,17 @@ popup = elm_popup_add(parent);
 
 Using Popup Styles
 
-The following item styles are available for wearable core controls:
+The following item styles are available for the rectangular UI component:
 
 popup
 toast
 
-The following item styles are available for Gear O:
+The following item styles are available for the circular UI component:
 
 circle
 toast/circle
 
-The following layout styles are available for Gear O:
+The following layout styles are available for the circular UI component:
 
 content/circle
 content/circle/buttons1
@@ -1972,7 +1972,7 @@ elm_object_style_set(popup, "toast");

Setting the Popup Areas in Wearable Core Controls

Setting the Popup Areas in Rectangular UI Components

Configure the title area. Set the title text to Test popup using the partname title,text.

@@ -2010,7 +2010,7 @@ elm_object_part_content_set(popup, "button1", button1);
 elm_object_part_content_set(popup, "button2", button2);

Setting the Popup Areas in Gear O

Setting the Popup Areas in Circular UI Components

Set the circle style and the layout of the popup.

 // Setting the style
@@ -2116,7 +2116,7 @@ Evas_Object *pb = elm_progressbar_add(win);
 
 Using the Progressbar Styles
 
-The progressbar has several styles for wearable core controls:
+The progressbar has several styles for the rectangular UI components:
 
 default
 pending_list
@@ -2124,7 +2124,7 @@ Evas_Object *pb = elm_progressbar_add(win);
 process/groupindex
 process/popup/small
 
-The progressbar has several styles for Gear O:
+The progressbar has several styles for the circular UI components:
 
 process
 process/small
@@ -2136,7 +2136,7 @@ Evas_Object *pb = elm_progressbar_add(win);
 elm_object_style_set(pb, "pending_list");

Configuring the Progressbar for Wearable Core Control

Configuring the Progressbar for Rectangular UI Components

The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.

elm_progressbar_pulse_set(pb, EINA_TRUE);
@@ -2152,7 +2152,7 @@ elm_progressbar_pulse(pb, EINA_TRUE);
 It is possible to read the current value.
 double value = elm_progressbar_value_get(pb);
 
-Configuring the Progressbar for Gear O
+Configuring the Progressbar for Circular UI Components
 The progressbar emits the changed signal when the progress value changes. The value is changed with the elm_progressbar_value_set() function. Here the pb progress value is set to 20%.
 
 @@ -2251,7 +2251,7 @@ void changed_cb(void *data, Evas_Object *obj, void *event_info)
 }
 
 
-	Using the Radio Callbacks with Gear O
+	Using the Radio Callbacks with Circular UI Components
 	
 This UI component emits the following signals:
 
@@ -2274,7 +2274,7 @@ void changed_cb(void *data, Evas_Object *obj, void *event_info)

Slider for the Wearable Core

Slider for Rectangular UI Components

Figure: Slider component

Slider component

When the inline list is no longer needed, destroy it by looping over the list to free each EINA_INLIST structure and the data using allocated memory. Use the eina_inlist_remove() function on each node. -

In the following example, the EINA_INLIST_CONTAINER_GET() macro returns the container object of an inlist (the EINA_INLIST of my_struc), and the list element is removed and the allocated memory of the container "object" is freed.

In the following example, the EINA_INLIST_CONTAINER_GET() macro returns the container object of an inlist (the EINA_INLIST of my_struct), and the list element is removed and the allocated memory of the container "object" is freed.

while (list)
 {
diff --git a/org.tizen.ui.guides/html/native/efl/notification_window_n.htm b/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
index a5d1ede..4e26221 100755
--- a/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
+++ b/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
@@ -163,8 +163,9 @@ void get_notification_level (Evas_Object *eo)
 
 The EFL UTIL INPUT API (in mobile and wearable applications) allows you to generate input events (such as key and touch events).
 
-First you initialize the input generator and select a device type with the efl_util_input_initialize_generator() function. To generate actual key or touch events, use the efl_util_input_generate_key() or efl_util_input_generate_touch() function.
-When no longer needed, remember to free the input generator with the efl_util_input_deinitialize_generator() function.
+First you must create the efl_util_inputgen_h structure and initialize the structure members with the efl_util_input_initialize_generator() function. To generate actual key or touch events, use the efl_util_input_generate_key() or efl_util_input_generate_touch() function.
+When no longer needed, remember to free the efl_util_inputgen_h structure with the efl_util_input_deinitialize_generator() function.
+
 
 
 
@@ -268,45 +269,62 @@ void capture()
 
  Generating a Key Input Event
 
- To generate key input events:
+To generate key input events:
  
- Execute the efl_util_input_initialize_generator() function:
-  +Execute the efl_util_input_initialize_generator() function:
+ void key_event_generator()
 {
    int ret = EFL_UTIL_ERROR_NONE;
+   efl_util_inputgen_h inputgen = NULL;
 
-   ret = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_KEYBOARD);
-
- After setting input device type, execute the efl_util_input_generate_key() function to generate key input events:
-  -   if (ret != EFL_UTIL_ERROR_NONE) 
+   inputgen = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_KEYBOARD);
+   if (!inputgen)
    {
-      // Failed to initialize input generator
+      // Failed to initialize the input generator system
 
       return;
    }
-   ret = efl_util_input_generate_key("XF86Menu", 1);
+
+
+
+After setting input device type, execute the efl_util_input_generate_key() function to generate key input events:
++   ret = efl_util_input_generate_key(inputgen, "XF86Menu", 1);
    if (ret != EFL_UTIL_ERROR_NONE) 
    {
       // Failed to generate a "XF86Menu" key press event
-      efl_util_input_deinitialize_generator();
-
+      ret = efl_util_input_deinitialize_generator(inputgen);
+      if (ret != EFL_UTIL_ERROR_NONE)
+      {
+         // Failed to deinitialize the input generator system
+      }
       return;
    }
-   ret = efl_util_input_generate_key("XF86Menu", 0);
+
+   ret = efl_util_input_generate_key(inputgen, "XF86Menu", 0);
    if (ret != EFL_UTIL_ERROR_NONE) 
    {
       // Failed to generate a "XF86Menu" key release event
-      efl_util_input_deinitialize_generator();
-
+      ret = efl_util_input_deinitialize_generator(inputgen);
+      if (ret != EFL_UTIL_ERROR_NONE)
+      {
+         // Failed to deinitialize the input generator system
+      }
       return;
    }
 
- Free the resources with the efl_util_input_deinitialize_generator() function:
-  -   efl_util_input_deinitialize_generator();
-}
+
+Free the resources with the efl_util_input_deinitialize_generator() function:
++   ret = efl_util_input_deinitialize_generator(inputgen);
+   if (ret != EFL_UTIL_ERROR_NONE)
+   {
+      // Failed to deinitialize the input generator system
+   }
+}
+
+
 
 
  Generating a Touch Input Event
@@ -318,46 +336,64 @@ void key_event_generator()
 void touch_event_generator()
 {
    int ret = EFL_UTIL_ERROR_NONE;
+   efl_util_inputgen_h inputgen = NULL;
 
-   ret = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_TOUCHSCREEN);
-

After setting input device type, execute the efl_util_input_generate_touch() function to generate touch input events: -

-   if (ret != EFL_UTIL_ERROR_NONE) 
+   inputgen = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_TOUCHSCREEN);
+   if (!inputgen)
    {
-      // Failed to initialize input generator
+      // Failed to initialize the input generator system
 
       return;
    }
-   ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_BEGIN, 100, 100);
+

After setting input device type, execute the efl_util_input_generate_touch() function to generate touch input events: +

+   ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_BEGIN, 100, 100);
    if (ret != EFL_UTIL_ERROR_NONE) 
    {
       // Failed to generate a first finger touch press event on (100, 100)
-      efl_util_input_deinitialize_generator();
-
+      ret = efl_util_input_deinitialize_generator(inputgen);
+      if (ret != EFL_UTIL_ERROR_NONE)
+      {
+         // Failed to deinitialize the input generator system
+      }
       return;
    }
-   ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_UPDATE, 110, 110);
+   ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_UPDATE, 110, 110);
    if (ret != EFL_UTIL_ERROR_NONE) 
    {
       // Failed to generate a first finger touch move event to (110, 110)
-      efl_util_input_deinitialize_generator();
+      ret = efl_util_input_deinitialize_generator(inputgen);
+      if (ret != EFL_UTIL_ERROR_NONE)
+      {
+         // Failed to deinitialize the input generator system
+      }
 
       return;
    }
-   ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_END, 110, 110);
+   ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_END, 110, 110);
    if (ret != EFL_UTIL_ERROR_NONE) 
    {
       // Failed to generate a first finger touch release event to (110, 110)
-      efl_util_input_deinitialize_generator();
+      ret = efl_util_input_deinitialize_generator(inputgen);
+      if (ret != EFL_UTIL_ERROR_NONE)
+      {
+         // Failed to deinitialize the input generator system
+      }
 
       return;
    }

Free the resources with the efl_util_input_deinitialize_generator() function: -
```
-   efl_util_input_deinitialize_generator();
-}
```

+   ret = efl_util_input_deinitialize_generator(inputgen);
+   if (ret != EFL_UTIL_ERROR_NONE)
+   {
+      // Failed to deinitialize the input generator system
+   }
+}
+

For more details about customizing the look and feel of the UI components with custom styles which are not provided as defaults, see the ThemeExtension sample.

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 Evas_Object in the UI component. For more detailed information, see the Themes.

Table: Button styles (wearable core)
Style

Table: Contextual popup (Ctxpopup) styles (wearable core)
Style

Table: Index styles (wearable core)
Style

Table: Progressbar styles (wearable core)
Style

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 Evas_Object in the UI component.

Table: Button styles (Gear O)
Style

Table: Contextual popup (Ctxpopup) styles (Gear O)
Style

Table: Index styles (Gear O)
Style

Table: Progressbar styles (Gear O)
Style

Table: Radio styles (Gear O)
elm.swallow.icon

For more details about customizing the look and feel of the UI components with custom styles which are not provided as defaults, see the ThemeExtension sample.

Select the DALi 3D UI toolkit if you are creating a high-performance rich UI application.

Accessibility: Supporting Easy Access

Accessibility: Supporting Web Accessibility

Related Info

Accessibility: Supporting Easy Access

Accessibility: Supporting Web Accessibility

The WAI-ARIA (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 from WAI-ARIA data.

diff --git a/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm b/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm index 7baa5ca..a234ab4 100755 --- a/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm +++ b/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm @@ -10,7 +10,7 @@ - Circle Progress Bar + Creating Circle-shaped Progress Bars @@ -28,7 +28,7 @@

Circle Progress Bar

Creating Circle-shaped Progress Bars

You can create a circle-shaped progress bar component with the CircleProgressBar API.

diff --git a/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm b/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm index b21a9f2..5be5f3f 100755 --- a/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm +++ b/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm @@ -10,7 +10,7 @@ - Circular UI: Creating Applications for the Circular UI + Applications for Circular UI: Developing UI on Circular Wearable Applications @@ -35,7 +35,7 @@

Circular UI: Creating Applications for the Circular UI

Applications for Circular UI: Developing UI on Circular Wearable Applications

TAU for Wearable supports different types of wearable devices (rectangle and circle) in the same application. To support the circular UI along with rectangular UI, media query is required.

@@ -158,30 +158,27 @@ else

Description
List	Shows how you can create a snap list component.
Helper Script	Shows how you to support some application components.
Header	Snap List	Shows how you can create a snap list component.
Expandable Header	Shows how you can create a header component.
Circle Progress Bar	Circle-shaped Progress Bar	Shows how you can create a circle progress bar component.
Processing	Full Size Processing Component	Shows how you can create a processing component.
More Options	Shows how you can create a more options button component.
Footer Button	Shows how you can create a footer button component.
Shows how you can create a thumbnail component.
Popup	Popup Button	Shows how you can create a popup component.
Index Scroll Bar	Shows how you can create an index scroll bar component.
Index Scroll Bar	Shows how you can create a index scroll bar component.
More Options	Shows how you can create a more options button component.

Footer Button

Creating Footer Buttons

Footer Button

Creating Footer Buttons

You can create a footer button component that is supported in both rectangular and circular UI.

@@ -86,6 +86,7 @@ </header> <div class="ui-content content-padding"> It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings. + </div> <a class="drawer-handler"></a> @@ -102,6 +103,7 @@ <a href="#" class="ui-btn">1</a> <a href="#" class="ui-btn">2</a> <a href="#" class="ui-btn">3</a> + </footer> </div> @@ -110,12 +112,15 @@

Edit the CSS code to set the visual style of the buttons:

-.drawer-elem {
+.drawer-elem 
+{
    display: none;
 }
 
-@media all and (-tizen-geometric-shape: circle) {
-   .drawer-handler {
+@media all and (-tizen-geometric-shape: circle) 
+{
+   .drawer-handler 
+   {
       width:24px;
       height: 115px;
       position: fixed;
@@ -128,23 +133,29 @@
       -webkit-mask-repeat: no-repeat;
       -webkit-mask-position: 0 40px;
    }
-   .ui-bottom-button a + a {
+   .ui-bottom-button a + a 
+   {
        display: none;
    }
 }
-

+ +

Edit the JavaScript code to manage the footer button events and other functionalities:

-(function(){
-   var page = document.querySelector("#bottomButtonWithMorePage"),
-      drawer = page.querySelector("#moreoptionsDrawer"),
-      handler = page.querySelector(".ui-more");
-
-   page.addEventListener( "pagebeforeshow", function() {
-      if (tau.support.shape.circle) {
-         tau.helper.DrawerMoreStyle.create(drawer, {
-            handler: ".drawer-handler",
+(function()
+{
+   var page = document.querySelector("#bottomButtonWithMorePage"),
+      drawer = page.querySelector("#moreoptionsDrawer"),
+      handler = page.querySelector(".ui-more");
+   page.addEventListener("pagebeforeshow", function() 
+   {
+      if (tau.support.shape.circle) 
+      {
+         tau.helper.DrawerMoreStyle.create(drawer, 
+         {
+            handler: ".drawer-handler",
+
          });
       }
    });
@@ -177,4 +188,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm b/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
index f2f82bb..6c856c6 100755
--- a/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
+++ b/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
@@ -71,22 +71,22 @@
 Hello World: Creating a Basic Hello World Page
 Enables you to make a Web application using TAU.
 
-Managing Pages: Creating and Managing a Page Element
-Enables you to manage TAU pages.
-
 Event Handling: Handling User Interactions
 Enables you to handle user events and interaction.
 
+Managing Pages: Creating and Managing a Page Element
+Enables you to manage TAU pages.
+
 UI Components: Managing UI Components
 Enables you to create and manage UI components.
 
-Creating a UI: Making a Notepad Application
+
Creating a Notepad UI Application
 Enables you to create a notepad application with TAU.
 
-Circular UI: Creating Applications for the Circular UI in wearable applications only
+
Applications for Circular UI: Developing UI on Circular Wearable Applications in wearable applications only
 Enables you to apply a circular UI to a wearable application.
 
-Accessibility: Supporting Easy Access
+
Accessibility: Supporting Web Accessibility
 Enables you to manage application accessibility.
 
 Globalization: Supporting Internationalization and Localization
diff --git a/org.tizen.ui.guides/html/web/tau/header_ww.htm b/org.tizen.ui.guides/html/web/tau/header_ww.htm
index 0739d11..83fea43 100755
--- a/org.tizen.ui.guides/html/web/tau/header_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/header_ww.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-	Header
+	Creating Expandable Headers
 
 
 
@@ -21,13 +21,13 @@
 	
 		Related Info
 		
-			Page Handling
+			Marquee API for Wearable Web
 		
 	
 
 
 
-Header
+Creating Expandable Headers
 
 You can create an expandable header component for your application. The expandable header offers events to support interactivity with other components.
 
diff --git a/org.tizen.ui.guides/html/web/tau/helper_ww.htm b/org.tizen.ui.guides/html/web/tau/helper_ww.htm
index ba91563..f856ea7 100755
--- a/org.tizen.ui.guides/html/web/tau/helper_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/helper_ww.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-	Helper Script
+	Using Helper Script
 
 
 
@@ -28,7 +28,7 @@
 
 
 
-Helper Script
+Using Helper Script
 
 You can use the TAU helper script to support some components for the Web applications. SnapListMarqueeStyle provides creating marquee-able and expandable list style with SnapListview.
 
diff --git a/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm b/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm
index fd0bd99..604c0ab 100755
--- a/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-	Index Scroll Bar
+	Creating Index Scroll Bars
 
 
 
@@ -29,9 +29,9 @@
 
 
 
-Index Scroll Bar
+Creating Index Scroll Bars
 
-You can create a circle/rectangle shaped index scroll bar component with the CircularIndexScrollBar and IndexScrollBar API.
+You can create a circle or rectangle shaped index scroll bar component with the CircularIndexScrollBar and IndexScrollBar API.
 
    
@@ -47,8 +47,11 @@
 The following figure shows the layout of the index scroll bar in a rectangular and circular UI.
Figure: The circle-shaped progress bar in rectangular and circular devices
-			  
+  
 
+
+
+Implementation
To implement the index scroll bar:

@@ -84,101 +87,127 @@
 Edit the JavaScript code to manage the progress bar events and other functionality:
 How to create a component selectively
 -var indexScrollbarElement = document.getElementById("indexscrollbar");
-
-if (!tau.support.shape.circle) {
-	// Create IndexScrollbar
-	indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
-} else {
-	// Create CircularIndexScrollbar
-	indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
+var indexScrollbarElement = document.getElementById("indexscrollbar");
+
+if (!tau.support.shape.circle) 
+{
+   // Create IndexScrollbar
+   indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
+} 
+else 
+{
+   // Create CircularIndexScrollbar
+   indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
 }
 
 
-How to use callback

+
To use the callback:
 -indexScrollbarElement.addEventListener("select", function( event ) {
-	var index = event.detail.index;
-	// do something using the index
-	console.log(index);
+indexScrollbarElement.addEventListener("select", function( event ) 
+{
+   var index = event.detail.index;
+   // Do something using the index
+   console.log(index);
 });
 
 
-In the following example, the list scrolls to the position of the list item defined using
-the ui-listview-divider class, selected by the index scroll bar:

-(Note : In rectangular UI, touching index generates the select, but in round UI, the select occurs when using rotary.)

+
In the following example, the list scrolls to the position of the list item defined using the ui-listview-divider class, selected by the index scroll bar.
+Note that in a rectangular UI, touching the index generates the selection, but in a round UI, the selection occurs when using the rotary.
 
 -(function() {
-	var page = document.getElementById("pageIndexScrollbar"),
-		listviewElement = document.getElementById("list1"),
-		isCircle = tau.support.shape.circle,
-		scroller,
-		indexScrollbar;
-
-	page.addEventListener("pageshow", function(ev) {
-		var indexScrollbarElement = document.getElementById("indexscrollbar"),
-			listDividers = listviewElement.getElementsByClassName("ui-listview-divider"),	// list dividers
-			dividers = {},	// collection of list dividers
-			indices = [],	// index list
-			divider,
-			i, idx;
-
-		// For all list dividers,
-		for(i = 0; i < listDividers.length; i++) {
-			// Add the list divider elements to the collection
-			divider = listDividers[i];
-			idx = divider.innerText;
-			dividers[idx] = divider;
-
-			// Add the index to the index list
-			indices.push(idx);
-		}
-
-		scroller = tau.util.selectors.getScrollableParent(listviewElement);
-
-		if (!isCircle) {
-			indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
-		} else {
-			// Create IndexScrollbar
-			indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
-
-			// Add SnapListview item "selected" event handler.
-			listviewElement.addEventListener("selected", function (ev) {
-				var indexValue = ev.target.textContent[0];
-				indexScrollbar.value(indexValue);
-			});
-		}
-
-		// Add IndexScrollbar index "select" event handler.
-		indexScrollbarElement.addEventListener("select", function (ev) {
-			var divider,
-				idx = ev.detail.index;
-
-			divider = dividers[idx];
-			if (divider && scroller) {
-				// Scroll to the ui-listview-divider element
-				scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
-			}
-		});
-	});
-
-	page.addEventListener("pagehide", function(ev) {
-		indexScrollbar.destroy();
-	});
+(function() 
+{
+   var page = document.getElementById("pageIndexScrollbar"),
+       listviewElement = document.getElementById("list1"),
+       isCircle = tau.support.shape.circle,
+       scroller,
+       indexScrollbar;
+
+   page.addEventListener("pageshow", function(ev) 
+   {
+      var indexScrollbarElement = document.getElementById("indexscrollbar"),
+          listDividers = listviewElement.getElementsByClassName("ui-listview-divider"), // List dividers
+          dividers = {}, // Collection of list dividers
+          indices = [],	// Index list
+          divider,
+          i, idx;
+
+      // For all list dividers,
+      for(i = 0; i < listDividers.length; i++) 
+      {
+         // Add the list divider elements to the collection
+         divider = listDividers[i];
+         idx = divider.innerText;
+         dividers[idx] = divider;
+
+         // Add the index to the index list
+         indices.push(idx);
+      }
+
+      scroller = tau.util.selectors.getScrollableParent(listviewElement);
+
+      if (!isCircle) 
+      {
+         indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
+      }
+      else 
+      {
+         // Create IndexScrollbar
+         indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
+
+         // Add SnapListview item "selected" event handler.
+         listviewElement.addEventListener("selected", function (ev) 
+         {
+            var indexValue = ev.target.textContent[0];
+            indexScrollbar.value(indexValue);
+         });
+      }
+
+      // Add IndexScrollbar index "select" event handler.
+      indexScrollbarElement.addEventListener("select", function (ev) 
+      {
+         var divider,
+             idx = ev.detail.index;
+
+         divider = dividers[idx];
+         if (divider && scroller) 
+         {
+            // Scroll to the ui-listview-divider element
+            scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
+         }
+      });
+   });
+
+   page.addEventListener("pagehide", function(ev) 
+   {
+      indexScrollbar.destroy();
+   });
 } ());
 
-
 
-
 
+
+
+
+
+
+
+
+
 
-	
-	Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution
-		3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the
-		Content License.
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
 
+
+
+
 
-
+
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/list_ww.htm b/org.tizen.ui.guides/html/web/tau/list_ww.htm
index a61ece5..c29d705 100755
--- a/org.tizen.ui.guides/html/web/tau/list_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/list_ww.htm
@@ -10,7 +10,7 @@
 	
-	List
+	Creating Snap Lists
 
@@ -28,7 +28,7 @@
 
-List
+Creating Snap Lists
 
 You can create a snap list component with the marquee component using the SnapListview API and the helper script.
 
diff --git a/org.tizen.ui.guides/html/web/tau/managing_page_w.htm b/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
index 2de840c..44dde0a 100755
--- a/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
+++ b/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-    Managing Pages: Creating and Managing a Page Element
+    Managing Page: Creating and Routing a Page
 
 
 
@@ -29,13 +29,13 @@
         
         Related Info
         
-            Tizen Advanced UI Framework (TAU) API
+            Page API
         
     
 

-    Managing Pages: Creating and Managing a Page Element
+    Managing Page: Creating and Routing a Page
 
 The basic building block of an application UI in the TAU library is the Page element, which includes all other elements. The element is optional and extendable, so you can have any element for grouping controls you want. 
 
diff --git a/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm b/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
index fc01b93..34aa90b 100755
--- a/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-	More Options
+	Implementing More Options
 
 
 
@@ -28,11 +28,11 @@
 
 
 
-More Options
+Implementing More Options
+
+
+In rectangular UI, you can implement more options using button and popup components. In the circular UI, the Selector component provides the more options button. This sample shows how to create a more options button for the circular UI.
 
-In rectangular UI, you can implement more options using button and popup components.
-Circular UI provides Selector component for more options button.

-The following explains how to make the more options for Circular UI.

 
   
 
    
 
 
 
 
 
 	
 	
 
 
 
 
 
  
@@ -61,6 +61,7 @@ The following explains how to make the more options for Circular UI.
    </header>
    <div class="ui-content content-padding">
         It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
+
    </div>
 
    <!-- Rectangular Profile -->
@@ -100,26 +101,32 @@ The following explains how to make the more options for Circular UI.

 
Edit the CSS code to set the visual style of the buttons:
 
 -#moreoptionsDrawer {
+#moreoptionsDrawer
+{
    display: none;
 }
 
-@media all and (-tizen-geometric-shape: circle) {
-   #moreoptionsDrawer {
+@media all and (-tizen-geometric-shape: circle) 
+{
+   #moreoptionsDrawer
+   {
       display: block;
       background-color: rgba(255, 255, 255, 0.1);
       border-radius: 100%;
    }
-   #moreoptionsPopup {
+   #moreoptionsPopup
+   {
       display: none;
    }
 }
 
+
 
Edit the JavaScript code to manage the option button events and other functionality:
 
 -(function(){
+(function()
+{
    var page = document.querySelector("#moreoptionsPage"),
       popup = page.querySelector("#moreoptionsPopup"),
       handler = page.querySelector(".ui-more"),
@@ -128,24 +135,35 @@ The following explains how to make the more options for Circular UI.
       helper,
       clickHandlerBound;
 
-   function clickHandler(event) {
+   function clickHandler(event)
+   {
       tau.openPopup(popup);
    }
-   page.addEventListener( "pagebeforeshow", function() {
-      if (tau.support.shape.circle) {
-         helper = tau.helper.DrawerMoreStyle.create(drawer, {
-       handler: ".drawer-handler"
-    });
-      } else {
-    // Shape is square
-    clickHandlerBound = clickHandler.bind(null);
-    handler.addEventListener("click", clickHandlerBound);
+   page.addEventListener( "pagebeforeshow", function()
+   {
+      if (tau.support.shape.circle)
+      {
+         helper = tau.helper.DrawerMoreStyle.create(drawer,
+         {
+            handler: ".drawer-handler"
+         });
       }
+      else
+      {
+         // Shape is square
+         clickHandlerBound = clickHandler.bind(null);
+         handler.addEventListener("click", clickHandlerBound);
+
+      }
+
    });
-   page.addEventListener( "pagebeforehide", function() {
-      if (tau.support.shape.circle) {
+
+   page.addEventListener( "pagebeforehide", function() 
+   {
+      if (tau.support.shape.circle)
+      {
          handler.removeEventListener("click", clickHandlerBound);
-    helper.destroy();
+         helper.destroy();
       }
    });
 })();
@@ -175,4 +193,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/tau/notepad_w.htm b/org.tizen.ui.guides/html/web/tau/notepad_w.htm
index eb242ff..9719b18 100755
--- a/org.tizen.ui.guides/html/web/tau/notepad_w.htm
+++ b/org.tizen.ui.guides/html/web/tau/notepad_w.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-    Creating a UI: Making a Notepad Application
+    Creating a Notepad UI Application
 
 
 
@@ -28,7 +28,7 @@
 
 
 

-    Creating a UI: Making a Notepad Application
+    Creating a Notepad UI Application
 
 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.
 
diff --git a/org.tizen.ui.guides/html/web/tau/popup_ww.htm b/org.tizen.ui.guides/html/web/tau/popup_ww.htm
index c80d95e..406406e 100755
--- a/org.tizen.ui.guides/html/web/tau/popup_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/popup_ww.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-	Popup
+	Creating Popup Buttons
 
 
 
@@ -28,7 +28,7 @@
 
 
 
-Popup
+Creating Popup Buttons
 
 You can create bottom and side popup button components with the Popup API.
 
diff --git a/org.tizen.ui.guides/html/web/tau/processing_ww.htm b/org.tizen.ui.guides/html/web/tau/processing_ww.htm
index 623f378..51696b3 100755
--- a/org.tizen.ui.guides/html/web/tau/processing_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/processing_ww.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-	Processing
+	Creating Full Size Processing Components
 
 
 
@@ -28,7 +28,7 @@
 
 
 
-Processing
+Creating Full Size Processing Components
 
 You can create a full size processing component with the Processing API.
 
diff --git a/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm b/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
index 3f83ee6..dfa05f3 100755
--- a/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
@@ -10,7 +10,7 @@
 	
 	
 	
-	Thumbnail
+	Creating Thumbnails
 
 
 
@@ -28,7 +28,7 @@
 
 
 
-Thumbnail
+Creating Thumbnails
 
 You can create thumbnail component with the SectionChanger API.
   
 
    
  
diff --git a/org.tizen.ui.guides/html/web/w3c/drag_drop_mw.htm b/org.tizen.ui.guides/html/web/w3c/drag_drop_mw.htm
new file mode 100644
index 0000000..86924fd
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/drag_drop_mw.htm
@@ -0,0 +1,327 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  HTML5 Drag and drop: Handling Drag and Drop Events
+ 
+ 
+
+ 
+    
+        
+    
+
+    
+		Content
+		
+			Handling Drag and Drop Events
+			Transferring Data over Drag and Drop
+		
+        Related Info
+        
+			HTML5 Drag and drop API for Mobile Web
+            
+    
+
+
+
+HTML5 Drag and drop: Handling Drag and Drop Events
+ 
+   
 
+    
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only. 
+ 
+HTML5 drag and drop activates through event-based JavaScript and added attributes.
+
+
+The main features of the HTML5 Drag and drop API include:
+
+
+Using drag and drop
+To make an element draggable, add the draggable="true" attribute to it. Only elements thus defined as draggable can generate drag and drop events.
+A drag and drop requires a source, target, and data. It is used through the following events:
+dragstart
+drag
+dragleave
+dragenter
+dragover
+drop
+dragend
+The dragstart and drop events send data through the DataTransfer interface.
+
+Transferring data
+You can transfer data from the drag source to the drop target. The DataTransfer interface instance receives the dragstart event and fills itself with the data to be transferred. It then receives a drop event, and puts the data into the drop target. 
+
+
+
+     
+      
+       
+      
+      
+       
+      
+     
+Note
To use drag and drop in a Tizen device, long-press the draggable element. When the context menu appears, select the Drag menu.
+
+Handling Drag and Drop Events
+
+Learning how to handle drag and drop events is a basic user interaction skill:
+
+
+
+Define the draggable elements by adding the draggable="true" attribute to them:
++<h1>Drag and drop tutorial</h1>
+<div class="example_body">
+   <div id="drag-list">
+      <div class="drag-row" draggable="true">1</div>
+      <div class="drag-row" draggable="true">2</div>
+   </div>
+   <div>Drag state: <span id="log"></span></div>
+</div>
+
+
+
+Add event listeners for the various drag and drop events:
++<script>
+   var cols = document.querySelectorAll('#drag-list_.drag-row');
+   var colsLength = cols.length;
+
+   for (var i = 0; i < colsLength; i++) 
+   {
+      cols[i].addEventListener('dragstart', dragStart, false);
+      cols[i].addEventListener('drag', dragIng, false);
+      cols[i].addEventListener('dragenter', dragEnter, false);
+      cols[i].addEventListener('dragover', dragOver, false);
+      cols[i].addEventListener('dragleave', dragLeave, false);
+      cols[i].addEventListener('drop', dragDrop, false);
+      cols[i].addEventListener('dragend', dragEnd, false);
+   };
+</script>
+
+
+
+Define event handlers for the events. In this case, each event handler displays a text on the screen.
++function dragStart(e) 
+{
+   log.innerHTML = "dragStart"
+};
+
+function dragIng(e) 
+{
+   log.innerHTML = "drag"
+};
+
+function dragOver(e) 
+{
+   e.preventDefault();
+   log.innerHTML = "dragOver"
+};
+
+function dragEnter(e) 
+{
+   log.innerHTML = "dragEnter"
+};	
+
+function dragLeave(e) 
+{
+   log.innerHTML = "dragLeave"
+};
+
+function dragDrop(e) 
+{
+   e.stopPropagation();
+   log.innerHTML = "dragDrop"	
+};
+	
+function dragEnd(e) 
+{
+   log.innerHTML = "dragEnd"
+};
+
+
+
+
+Source Code
+	For the complete source code related to this use case, see the following file:
+ 
+	drag_and_drop.html
+ 
+
+ Transferring Data over Drag and Drop
+
+Learning how to transfer data in a simple drag and drop puzzle is a basic user interaction skill:
+
+
+Define the draggable elements by adding the draggable="true" attribute to them.
+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.
++<h1>Drag and drop tutorial</h1>
+<div class="example_body">
+   <div>Drag state: <span id="log"></span></div>
+   <div class="holder">
+      <div>
+         <img src="images/logo.png">
+         <p class="txt">Complete the puzzle to see a picture</p>
+      </div>
+      <ul id="puzzle">
+         <li class="puzzle-piece" draggable="true">
+            <img src="images/puzz_06.png">
+         </li>
+         <li class="puzzle-piece" draggable="true">
+            <img src="images/puzz_02.png">
+         </li>
+         <li class="puzzle-piece" draggable="true">
+            <img src="images/puzz_04.png">
+         </li>
+         <li class="puzzle-piece" draggable="true">
+            <img src="images/puzz_05.png">
+         </li>
+         <li class="puzzle-piece" draggable="true">
+            <img src="images/puzz_01.png">
+         </li>
+         <li class="puzzle-piece" draggable="true">
+            <img src="images/puzz_03.png">
+         </li>
+      </ul>
+   </div>
+</div>
+
+
+
+Add event listeners for the dragover, dragleave, dragstart, and drop events:
++<script>
+   var cols = document.querySelectorAll('#puzzle_.puzzle-piece');
+   var colsLength = cols.length;
+   for (var i = 0; i < colsLength; i++) 
+   {
+      cols[i].addEventListener('dragstart', dragStartHandler, false);
+      cols[i].addEventListener('dragover', dragOverHandler, false);
+      cols[i].addEventListener('dragleave', dragLeaveHandler, false);
+      cols[i].addEventListener('drop', dragDropHandler, false);
+   };
+</script>
+
+
+
+Transfer data (in this case, image parts):
+
+Declare the dragElem variable, which is an empty object for the data exchange:
++var dragElem = null;
+
+
+
+Use the DataTransfer interface in the dragStartHandler() and dragDropHandler() event handlers to exchange image parts:
++function dragStartHandler(e) 
+{
+   /* Set data */
+   dragElem = this;
+   e.dataTransfer.effectAllowed = 'move';
+   e.dataTransfer.setData('text/html', this.innerHTML);
+   this.classList.add('over');
+   for (var i = 0; i < colsLength; i++)
+   {
+      cols[i].classList.add('start');
+   };
+};
+function dragDropHandler(e) 
+{
+   /* Get data */
+   dragElem.innerHTML = this.innerHTML;
+   this.innerHTML = e.dataTransfer.getData('text/html');
+   for (var i = 0; i < colsLength; i++)
+   {
+      cols[i].className = "puzzle-piece";
+   };
+   /* Check key */
+   puzzleCheck();
+};
+
+
+
+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):
++var puzzleKey =  ["01", "02", "03", "04", "05", "06"];
+var puzzleArray = [];
+
+function puzzleCheck() 
+{
+   /* Initialize the user key */
+   puzzleArray = [];
+   /* Insert the keys in the array */
+   for (var i = 0; i < colsLength; i++) 
+   {
+      puzzleArray.push(cols[i].children[0].getAttribute('src').substring(12, 14));
+   };
+   originKey = puzzleKey.join();
+   userKey = puzzleArray.join();
+
+   if (originKey === userKey)
+   {
+      alert("Success !");
+   };
+};
+
+
+
+
+
+Figure: Drag and drop puzzle 
+ 
+Source Code
+	For the complete source code related to this use case, see the following files:
+ 
+	drag_and_drop_practical.html
+	logo.png
+	puzz_01.png
+	puzz_02.png
+	puzz_03.png
+	puzz_04.png
+	puzz_05.png
+	puzz_06.png
+ 
+
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm b/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
index 126350b..9083b94 100755
--- a/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
+++ b/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
@@ -34,17 +34,23 @@
 
 The W3C specifications provide HTML and CSS, which are the core technologies for building Web pages and Web applications.
 
-To learn how to use the W3C features in your application UI, see the following topics:
+To learn to use the W3C features in your application UI, see the following topics:
 
 
 
-HTML5 Features 
+HTML tools 
 HTML is the language for describing the structure of the Web pages.
 
 
 
 	HTML Priorities: Understanding HTML Behavior
 	Enables you to use CSS and JavaScript code effectively with HTML elements.
+	
+	HTML5 Forms: Managing User Input 
+	Enables you to easily implement Web forms for user input using HTML5 elements.
+	
+	Selectors API Level 1 and Level 2: Selecting DOM Elements 
+	Enables you to select element nodes in the DOM tree by matching them against a group of selectors.	
 
 	Media Queries: Labeling Output Devices in Style Sheets
 	Enables you to define media features for specific output devices using the CSS media queries.
@@ -57,15 +63,20 @@
 
 	Frame Flattening: Expanding Content According to Size in mobile applications only
 	Allows you to improve the scrollability of small screens.
+	
+	HTML5 session history of browsing contexts: Managing Browsing Contexts 
+	Enables you to manage the browsing history of a device.	
 
 	Clipboard API and events: Transferring Content Between Applications in mobile applications only
 	Enables you to copy content and paste it in an editable area.
+	HTML5 Drag and drop: Handling Drag and Drop Events in mobile applications only
+	Enables you to create and manage draggable elements and implement drag events.
 
 
 
 
 
-CSS Features 
+CSS tools 
 CSS is the language for describing the presentation of the Web pages, including colors, layout, and fonts.
 
 	CSS Transforms: Manipulating Elements 
@@ -128,4 +139,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/html5forms_w.htm b/org.tizen.ui.guides/html/web/w3c/html5forms_w.htm
new file mode 100644
index 0000000..b92cdda
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/html5forms_w.htm
@@ -0,0 +1,432 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+  HTML5 Forms: Managing User Input 
+  
+ 
+ 
+ 
+	
+		 
+	
+	
+	
+		Content
+		
+			New HTML5 Elements
+			New Input Element Types
+			New Input Element Attributes
+			Creating a Basic Login Form
+			Creating an Advanced Login Form			
+				
+		Related Info
+		
+			HTML5 Forms API for Mobile Web
+			HTML5 Forms API for Wearable Web
+			
+	
+	
+
+
+
+  HTML5 Forms: Managing User Input 
+
+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 adding simple features, for example, email validity checks and date pickers, and using more advanced functionality, such as security checks and input value pattern definitions.
+
+New HTML5 Elements
+The following table lists the new elements available for your forms in HTML5. For a complete source code, see elements.html.
+
+
+
+
+
+    
+     
+     
+     
+    
+     
+     
+     
+
+    
+     
+     
+     
+
+    
+
+     
+     
+     
+
+    
+
+     
+     
+     
+      
+    
+     
+     
+     
+     
+    
+
+Table: New HTML5 elementsElement Description Example
datalist  Defines a set of option elements that represent predefined options for other controls. The element is used together with the input element to predefine its value.
+In Tizen, the value selected in the datalist element can be edited. 
++<input type="text" list="search">
+<datalist id="search">
+   <option value="Tomato">Tomato</option>
+   <option value="banana">banana</option>
+   <option value="Watermelon">Watermelon</option>
+</datalist>
+
+     
keygen  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 name attribute, saves it in the user's computer and Web server, and activates the next procedure when the 2 values match. 
++<label>user:<input type="text" name="user_name"></label>
+<label>keygen:<keygen name="keygen"></label>
+
+     
meter  Represents a scalar measurement within a known range (the distribution of the assigned range), or a fractional value. 
++<meter value="75" min="0" max="100" low="60" high="80" optimum="81">
+   75/100
+</meter>
+
+     
output  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 form element. 
++<fieldset onsubmit="return false"
+          oninput="foobar.value = parseInt(foo.value) * parseInt(bar.value)">
+   <input type="number" id="foo" name="foo"> *
+   <input type="number" id="bar" name="bar"> =
+   <output for="foo bar" name="foobar"></output>
+</fieldset>
+
+     
progress  Represents the progress of a task.
+     +<progress value="75" max="100">
+   75/100
+</progress>
+
+
+New Input Element Types
+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 types.html.
+
+
+
+
+
+    
+     
+     
+     
+    
+     
+     
+     
+        
+    
+     
+     
+     
+
+    
+
+     
+     
+     
+    
+     
+     
+     
+    
+
+     
+     
+     
+    
+     
+     
+     
+    
+     
+     
+     
+    
+     
+     
+     
+    
+     
+     
+     
+    
+         
+     
+     
+    
+    
+     
+     
+    
+         
+     
+     
+    
+    
+     
+     
+    
+
+Table: New input element typesType Description Example
color  Select an HSL color from the color picker. The value format is HEX (#0099ff).
+    
+    +<input type="color"
+       value="#ff0000">
+<input type="datetime"
+       value="2012-12-12T03:30Z">
+<input type="email"
+       required>
+<input type="number"
+       step="3">
+<input type="range"
+       min="1" max="10">
+<input type="tel">
+<input type="url">
+
+    
date  Enter a date with no time zone (yyyy-mm-dd).
+    
datetime  Enter a date and time with the (UTC) time zone (yyyy-mm-ddTtt:mmZ).
+
+
datetime-local  Enter a date and time with no time zone (yyyy-mm-ddTtt:mm).
+    
email  Enter an email address with the email keyboard.
+     If the required attribute is used, the system checks whether the input format is in line with the ABNF regular expression (1*(atext / ".") "@" ldh-str 1*("." ldh-str)).
+    
month  Enter a year and month with no time zone (yyyy-mm).
+    
number  Enter numbers with the number keyboard.
+    
range  Select a value from the slider.
+    
search  No specific functionality is defined for this element in the HTML5 specifications.
+    
tel  Enter a phone number with the number keyboard.
+    
time  Enter a time with no time zone (tt:mm:ss).
+    
url  Enter a URL with the URL keyboard.
+    
week  Enter a year and week with no time zone (yyyy-week).
+    
+
+New Input Element Attributes
+
+The following table lists the new input element attributes available for your forms in HTML5. For a complete source code, see attributes.html.
+
+
+
+
+
+    
+     
+     
+     
+    
+     
+     
+     
+    
+    
+     
+     
+     
+    
+     
+     
+     
+    
+     
+     
+     
+    
+ 
+     
+     
+    
+     
+     
+     
+    
+
+    
+Table: New input element attributesAttribute Description Example
autocomplete  Prefilling feature, which helps the users by, for example, prefilling the user's address based on earlier user input.
+     The text used by the user before (such as an input element) is listed in a datalist form. The attribute can be used in all form elements, and is activated if the value is "on" and deactivated if the value is "off".
+    
+    +<input type="range" min="1" max="10">
+<input type="tel" pattern="[0-9]+" required>
+<input placeholder="You know what to do, huh?">
+<input type="number" step="3">
+
+    
min and max  Allowed range of values for the element.
+     
pattern  Regular expression against which the control's value is checked.
+     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.
+    
placeholder  Short hint intended to aid the user with the data entry.
+     The attribute can be used in the majority of form elements for various purposes, such as hint text or advertisement.
+    
required  Boolean attribute which, when specified, defines that the element is mandatory.
+    
step  Granularity expected of the value, limiting the allowed values.
+    
+
+Creating a Basic Login Form
+				
+To create simple user input forms, you must learn to use the HTML5 features in Web forms:  
+
+
+Create a simple form where the user can enter their login details (email address and password):
++<form action="" method="">
+   <label>email: <input type="text"></label>
+   <label>password: <input type="password"></label>
+    
+   <input type="submit" value="Login">
+</form>
+
+To check the validity of the entered email address automatically, add the required attribute to the input element with the email type:
++<label>email: <input type="email" required></label>
+
+Define the password field as mandatory by using the required attribute in that input element too:
++<label>password: <input type="password" required></label>
+
+Because a device has limited space on the screen, remove the field labels and replace them with hint texts using the placeholder attribute:
++<input type="email" placeholder="e-mail address" required>
+<input type="password" placeholder="password" required>
+
+
+The final form that checks the email validity and requires the mandatory password input is complete:
++<form action="" method="">
+   <fieldset>
+      <legend>Login</legend>
+      <input type="email" placeholder="e-mail address" required>
+      <input type="password" placeholder="password" required>
+   </fieldset>
+    
+   <input type="submit" value="Login">
+</form>
+
+
+Source Code
+ For the complete source code related to this use case, see the following file:
+ 
+	basicLogin.html
+ 
+			
+Creating an Advanced Login Form
+				
+To create advanced user input forms, you must learn to use the HTML5 features in Web forms: 
+ 
+
+Create a login form that checks the email validity and requires the mandatory password input:
++<form action="" method="">
+   <fieldset>
+      <legend>Login</legend>
+      <input type="email" placeholder="e-mail address" required>
+      <input type="password" placeholder="password" required>
+   </fieldset>
+    
+   <input type="submit" value="Login">
+</form>
+
+
+When the form page is loaded on the screen, put the focus automatically to the email field by using the autofocus attribute:
++<input type="email" placeholder="e-mail address" required autofocus>
+
+
+
+To spare the user from filling in information that they have given previously, use the autocomplete attribute, which shows the previously successfully inserted entries in a datalist, from which the user can select and use them.
+You can apply the autocomplete attribute to  a specific field by adding it to the appropriate input element. If you add it to the form element, it applies to all child elements within the form.
+
++<form action="" method="" autocomplete="on">
+
+
+In general, apply the autocomplete attribute to the form element, and then separately set it to off for those fields that must not use it. 
+In the following example, the password field must not use autocomplete, to prevent unauthorized access by any user.
++<input type="password" placeholder="password" required autocomplete="off">
+
+
+Protect the password with private and public key pair using the keygen element.
+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. 
+
++<keygen name="keyvalue">
+
+
+Use the pattern attribute to perform a validity check that ensures that the password field value matches the given regular expression. The required attribute is used to ensure that the field value must be entered and then the validity check can be performed.
+In the following example, the password only accepts numbers and letters of the alphabet. If an invalid value is entered, the login cannot proceed. 
+
+<input type="password" placeholder="password" required
+       pattern="[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*" 
+       autocomplete="off">
+
+Define the required length of the password within the pattern attribute. 
+In the following example, the password must be 6 to 12 characters long. 
+
++<input type="password" placeholder="password" required 
+       pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}" 
+       autocomplete="off">
+
+
+
+The final form with autofocus and autocomplete features, strengthened security, and password value requirements is complete:
+
++<form action="" method="" autocomplete="on">
+   <fieldset>
+      <legend>Login</legend>
+      <input type="email" placeholder="e-mail address" required autofocus>
+      <input type="password" placeholder="password" required 
+             pattern="(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}" 
+             autocomplete="off">
+   </fieldset>
+
+   <keygen name="keyvalue">
+    
+   <input type="submit" value="Login">
+</form>
+
+			
+
+
+
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/selector_w.htm b/org.tizen.ui.guides/html/web/w3c/selector_w.htm
new file mode 100644
index 0000000..8753b68
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/selector_w.htm
@@ -0,0 +1,214 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  Selectors API Level 1 and Level 2: Selecting DOM Elements
+ 
+ 
+
+ 
+    
+         
+    
+
+    
+	Content
+		
+			Selecting a Single Node
+			Selecting Multiple Nodes
+			Creating an Accordion Menu
+			
+		
+	Related Info
+        
+			Selectors API Level 1 for Mobile Web
+			Selectors API Level 2 for Mobile Web
+			Selectors API Level 1 for Wearable Web
+			Selectors API Level 2 for Wearable Web
+            
+    
+
+
+
+Selectors API Level 1 and Level 2: Selecting DOM Elements
+
+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.
+
+You can use the querySelector() and querySelectorAll() 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 querySelector() method, the method returns the first element (if any) that matches any of the selectors in the group.
+
+The main features of the Selectors API Level 1 and Level 2 include:
+
+Selecting a single element
+Use CSS Selectors to select a single element.
+Selecting multiple elements simultaneously
+Select multiple elements using the querySelectorAll() method.
+
+You can also create an accordion menu.
+
+Selecting a Single Node
+To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select a single node:
+  
+  To select the first matching element found in the child nodes, use the querySelector() method with CSS selectors. You get the same result as when using the getElementById(), getElementsByTagName(), and getElementsByClassName() methods.
+  var obj1 = document.getElementsByTagName('td')[0]; /* First <td> element in the document */
+var obj2 = document.getElementById('foo'); /* Element with the ID #foo */
+var obj3 = document.getElementsByClassName('bar')[0]; /* First element in the bar class */
+  
+var obj4 = document.querySelector('td'); /* Same as obj1 */
+var obj5 = document.querySelector('#foo'); /* Same as obj2 */ 
+var obj6 = document.querySelector('.bar'); /* Same as obj3 */
+The querySelector() method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns null.
+  You can use the CSS selectors to ensure that elements with complex structures can be easily selected.
+  For example, the following example selects the last element among the child nodes of the second <tr> element, which is a child of the <tbody> element in the second <table> element of the document.
+  var obj = document.querySelector('table:nth-child(2) tbody > tr:nth-child(2) :last-child');
+  You can use method chaining to select an element:
+  var obj = document.querySelector('table:nth-child(2)');
+var targetObj = obj.querySelector('tbody > tr:nth-child(2) :last-child')
+
+
+Figure: Single node selection (in mobile applications only) 
+ 
+  Source Code
+ For the complete source code related to this use case, see the following file:
+ 
+	accordion.html
+ 
+		
+				Selecting Multiple Nodes
+			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:
+  
+  Select an element in the node list using the querySelector() method:
+  var obj = document.querySelector('table:nth-child(2)');
+The querySelector() method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns null. The query above selects the second <table> element in the document as a single element.
+
+
+Select multiple elements in the node list using the querySelectorAll() method, and define a variable to represent the length of the targetObj node list:
+var targetObj = obj.querySelectorAll('thead th, tbody td');
+var i = targetObj.length;
+ The querySelectorAll() 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 <th> elements in the table head and the <td> elements in the table body.
+  
+Apply a defined style to all elements stored in the targetObj node list:
+while (0 < i) 
+{
+   i--;
+   targetObj[i].style.backgroundColor = 'orange';
+   targetObj[i].textContent = 'Exam 3' + i;
+}
+
+  Figure: Multiple node selection (in mobile applications only) 
+  
+   Source Code
+ For the complete source code related to this use case, see the following file:
+ 
+	accordion.html
+ 
+		
+				Creating an Accordion Menu
+				
+			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.
+  The accordion menu is created using the CSS3 Basic User Interface Module Level 3 API (in mobile or wearable applications). When a title is touched, the relevant content is shown, and other content is hidden.
+  
+  Create the HTML layout: 
+  <ul class="accordion">
+   <li>
+      <p class="title current">Title 1<p>
+      <div>contents 1</div>
+   </li>
+   <li>
+      <p class="title">Title 2</p>
+      <div>contents 2</div>
+   </li>
+   <!--Other list elements-->
+</ul>
+
+Use CSS transitions to add sliding effects when content appears:
+.accordion  > li  > div 
+{
+   padding: 0 15px;
+
+   <!--Assign time for CSS transformation-->
+   -webkit-transition: all .5s;
+   opacity: 0;
+   height: 0;
+   box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .5);
+   line-height: 2;
+}
+<!--Assign styles to be applied in case the current class is added to p.title-->
+.accordion  > li  > p.current 
+{
+   background: -webkit-linear-gradient(top, #666, #000);
+   color: #fff;
+}
+.accordion > li > p.current + div 
+{
+   opacity: 1;
+   height: 200px;
+}
+Use the querySelector() and querySelectorAll() methods to change the class of the subject in the elements where the event is fired:
+var testAccordion = function(obj) 
+{
+   var targetObj = document.querySelector(obj);
+   var targetLength = document.querySelectorAll(obj + 'li').length;
+
+   /* In case the elements are not selected */
+   if (targetLength <= 0) 
+      return false;
+
+   targetObj.onclick = function(e) 
+   {
+      var that = e.target;
+
+      /* In case the e.target class is not title */
+      if ((that.className !== 'title')) return false;
+
+      for (var i = 0; i < targetLength; i++) 
+      {
+         /* Change all classes of the 'li p' elements at the bottom of .accordion to title */
+         targetObj.querySelectorAll('li p')[i].className = 'title';
+      }
+      /* Define the e.target class as current */
+      that.className += 'current';
+   }
+}
+
+Define the elements that use the accordion menu:
+testAccordion('.accordion');
+
+ Figure: Accordion menu (in mobile applications only) 
+ 
+   Source Code
+ For the complete source code related to this use case, see the following file:
+ 
+	selector_sample.html
+ 
+
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.ui.guides/html/web/w3c/session_history_w.htm b/org.tizen.ui.guides/html/web/w3c/session_history_w.htm
new file mode 100644
index 0000000..3908cec
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/session_history_w.htm
@@ -0,0 +1,204 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    HTML5 session history of browsing contexts: Managing Browsing Contexts
+
+
+
+
+    
+         
+    
+
+    
+		Content
+		
+			Managing Session History Entries
+			Detecting Session History Changes
+		
+		Related Info
+        
+			HTML5 session history of browsing contexts API for Mobile Web
+			HTML5 session history of browsing contexts API for Wearable Web
+            
+    
+
+
+
+
+
+  HTML5 session history of browsing contexts: Managing Browsing Contexts
+ 
+ You can manage the session history of browsing contexts. 
+ The history interface is used to save in the session history the page information that has been read by the user. You can also use the state 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).
+ 
+ 
+The main features of the HTML5 session history of browsing contexts API include:
+
+Adding entries to the session history
+You can use the pushState() method of the history interface to add an entry to the session history. With the replaceState() method, you can update the session history details.
+
+Detecting session history status changes
+The popstate event is fired when the user navigates to a page stored in the session history. The popstate event
+references the information stored with the pushState() or replaceState() methods, and enables you to change the status of the page based on the stored session history (such as moving focus to a certain DOM element).
+
+
+
+ Managing Session History Entries
+			
+Learning how to manage the session history enhances the user browsing experience in your application: 
+
+
+To add an entry to the session history, use the pushState() method of the history interface:
++<script>
+   history.pushState({index: currentIndex}, document.title);
+</script>
+
+ 
+      
+       
+        
+       
+       
+        
+       
+      
+    Note
The pushState() method accepts the data, title, and url (optional) parameters. The title parameter refers to the key value used to search for entries saved in the session history, and is currently ignored in all browsers.
+
+
+To update the entry details, use the replaceState() method:
++<script>
+   history.replaceState({index: currentIndex}, document.title, '#page' + currentIndex);
+</script>
+
+The replaceState() method uses the same parameters as the pushState() method. The history_sample.html is the url parameter, which refers to the address of the page that is to be changed.
+
+
+To use the session history information:
+
+Implement a page with the Prev and Next buttons:
++<nav class="paging">
+   <a href="#">Prev</a>
+   <a href="#">Next</a>
+</nav>
+<p>Current Index: <output> </output></p>
+
+<a href="http://tizen.org/">Tizen.org</a>
+
+
+When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the state object of the history interface:
++var currentIndex = 0;
+var prev = document.querySelector('.paging > a:nth-child(1)');
+var next = document.querySelector('.paging > a:nth-child(2)');
+
+/* Prev button click event */ 
+prev.onclick = function() 
+{
+   currentIndex -= 1;   
+   setState(currentIndex);
+    
+   return false;
+};
+    
+/* Next button click event */ 
+next.onclick = function() 
+{
+   currentIndex += 1;  
+   setState(currentIndex);
+    
+   return false;
+};
+
+
+
+If the state object has data in it, use the replaceState() method to change the previously stored information. Otherwise, add new info with the pushState() method.
++function setState(currentIndex) 
+{
+   if (history.state) 
+   {
+      history.replaceState({index: currentIndex}, document.title, '#page' + currentIndex);
+   } 
+   else 
+   {
+      history.pushState({index: currentIndex}, document.title);
+   }
+   output.textContent = currentIndex;
+}
+
+
+
+
+
+ Source Code
+ For the complete source code related to this use case, see the following file:
+ 
+	history_state.html
+ 
+
+Detecting Session History Changes
+ 
+Learning how to track session history changes enhances the user browsing experience in your application:  
+ 
+A page with data stored in the session history fires a popstate event when the page is loaded (for example, because it is refreshed or moved to from the previous page).
+Register the event listener:
+
++window.addEventListener("popstate", foo, false);
+
+
+Define the event handler for the event. You can use the data stored in the state object to retrieve the correct location on the page to be loaded.
++var output = document.querySelector('output');
+
+window.onpopstate = function() 
+{
+   currentIndex = history.state.index;
+   output.textContent = currentIndex;
+}
+
+In the snippet above, when a popstate event is fired, it saves the index value stored in the state object to the currentIndex variable, and outputs the <output> element from the correct index location.
+
+
+
+ Source Code
+ For the complete source code related to this use case, see the following file:
+ 
+	history_state.html
+  
+
+
+
+
+
+
+
+Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution 3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the Content License.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/org.tizen.ui.guides/index.xml b/org.tizen.ui.guides/index.xml
index 71bb9fb..78f30e1 100755
--- a/org.tizen.ui.guides/index.xml
+++ b/org.tizen.ui.guides/index.xml
@@ -7,32 +7,36 @@
 
 	
 		
-		
 		
+		
 		
-		
-		
-			
-			
-			
-			
-			
-			
-			
-					
-			
-			
+		
+		
+			
+			
+			
+			
+			
+			
+					
+			
+			
+			
 		
 		
 		
 	
 				
 		
+		
+		
 		
 		
 		
 		
+		
 		
+

Element	Description	Example
datalist	Defines a set of option elements that represent predefined options for other controls. The element is used together with the input element to predefine its value. + In Tizen, the value selected in the datalist element can be edited.	+ +<input type="text" list="search"> +<datalist id="search"> + <option value="Tomato">Tomato</option> + <option value="banana">banana</option> + <option value="Watermelon">Watermelon</option> +</datalist> + +
keygen	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 name attribute, saves it in the user's computer and Web server, and activates the next procedure when the 2 values match.	+ +<label>user:<input type="text" name="user_name"></label> +<label>keygen:<keygen name="keygen"></label> + +
meter	Represents a scalar measurement within a known range (the distribution of the assigned range), or a fractional value.	+ +<meter value="75" min="0" max="100" low="60" high="80" optimum="81"> + 75/100 +</meter> + +
output	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 form element.	+ +<fieldset onsubmit="return false" + oninput="foobar.value = parseInt(foo.value) * parseInt(bar.value)"> + <input type="number" id="foo" name="foo"> * + <input type="number" id="bar" name="bar"> = + <output for="foo bar" name="foobar"></output> +</fieldset> + +
progress	Represents the progress of a task. +	+<progress value="75" max="100"> + 75/100 +</progress> +

Type	Description	Example
color	Select an HSL color from the color picker. The value format is HEX (#0099ff). +	+ +<input type="color" + value="#ff0000"> +<input type="datetime" + value="2012-12-12T03:30Z"> +<input type="email" + required> +<input type="number" + step="3"> +<input type="range" + min="1" max="10"> +<input type="tel"> +<input type="url"> + +
date	Enter a date with no time zone (yyyy-mm-dd). +
datetime	Enter a date and time with the (UTC) time zone (yyyy-mm-ddTtt:mmZ). + +
datetime-local	Enter a date and time with no time zone (yyyy-mm-ddTtt:mm). +
email	Enter an email address with the email keyboard. + If the required attribute is used, the system checks whether the input format is in line with the ABNF regular expression (1(atext / ".") "@" ldh-str 1("." ldh-str)). +
month	Enter a year and month with no time zone (yyyy-mm). +
number	Enter numbers with the number keyboard. +
range	Select a value from the slider. +
search	No specific functionality is defined for this element in the HTML5 specifications. +
tel	Enter a phone number with the number keyboard. +
time	Enter a time with no time zone (tt:mm:ss). +
url	Enter a URL with the URL keyboard. +
week	Enter a year and week with no time zone (yyyy-week). +

Attribute	Description	Example
autocomplete	Prefilling feature, which helps the users by, for example, prefilling the user's address based on earlier user input. + The text used by the user before (such as an input element) is listed in a datalist form. The attribute can be used in all form elements, and is activated if the value is "on" and deactivated if the value is "off". +	+ +<input type="range" min="1" max="10"> +<input type="tel" pattern="[0-9]+" required> +<input placeholder="You know what to do, huh?"> +<input type="number" step="3"> + +
min and max	Allowed range of values for the element. +
pattern	Regular expression against which the control's value is checked. + 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. +
placeholder	Short hint intended to aid the user with the data entry. + The attribute can be used in the majority of form elements for various purposes, such as hint text or advertisement. +
required	Boolean attribute which, when specified, defines that the element is mandatory. +
step	Granularity expected of the value, limiting the allowed values. +