Certificate Registration

Connection Explorer View

Using the Extended Emulator Features

Remote Inspector

Web Inspector

Web Simulator

About This Content

License

Tizen
@@ -31,23 +31,16 @@
The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model:

-
Preface +
Preface
Provides information about the Tizen documentation to help you understand it.
-
Creating Your First Tizen Application -
Demonstrates how you can create a simple HelloWorld application - thus helping you to get more familiar with the Tizen application development process and using the Tizen SDK.
+
Introduction to Web Applications +
Demonstrates various details related to creating and managing Tizen Web applications.
-
Application Development Process -
Teaches you how to create a Tizen application from the initial application planning stage to the end stages where you are ready to run and package your application.
+
Introduction to Native Applications +
Demonstrates various details related to creating and managing Tizen native applications.
-
Tizen Application Model -
Provides an introduction to the Tizen application life-cycle and package contents.
- -
Understanding Tizen Programming -
Introduces the Tizen platform, its architecture, and some useful programming concepts you need to take into account when designing Tizen applications.
-
- -
Tizen Web Sites +
Tizen Web Sites
Introduces the various Web sites that you can use in the application development tasks.

@@ -58,7 +51,9 @@
Tizen Tutorials

Tizen Guides

Tizen API References
+
Tizen Sample Descriptions

Tizen Native Application Model

Application Development Process

Introduction to Native Applications

Application Filtering

Understanding Tizen Programming

Error Handling

Key Event Handling

Event Handling

File System Directory Hierarchy

Security and API Privileges

Tizen APIs

Creating Your First Tizen Application

Debugging Applications

Creating Application UIs with UI Builder

Running Applications

Preface

Creating Application UIs with UI Builder

Tizen Web Sites

Tizen Web Application Model

Tizen Application Model

Introduction to Web Applications

Application Filtering

Understanding Tizen Programming

Event Handling

Security and API Privileges

Tizen APIs

Creating Your First Tizen Application

Circle Components

Components

Components

Container Widgets

Containers

EFL

Elementary Widgets

Elementary

Elementary

External Output Manager (EOM)

EOM

UI Component Preferences

Scalability Support

UI Component Styles

UI Component Styles

UI Control

UI Components

UI Components

UI Components

UI

UI Framework

UI Widgets

Communication

Media Controller

Web UI Framework (UIFW)

Badge: Displaying the Notification (Badge) Count on the Home Screen

Bundle: Using the String-based Dictionary ADT

Data Control: Exchanging Specific Data Between Applications

Message Port: Passing Messages Between Applications

Notification: Notifying the User of Application Events

Package Manager: Installing and Uninstalling Applications

Service Application: Creating Background Applications

Shortcut: Adding a Shortcut to Home

Watch Application: Creating a Watch Application

Widget: Creating Widget Applications

Base: Using Fundamental Libraries

i18n: Managing Characters, Numbers, and Locales

Sqlite: Managing the SQL Database

Content: Getting and Handling Media Content

Media Content: Using Album, Bookmark, Playlist, and Other Media Content

MIME Type: Mapping MIME Types to and from File Extensions

Activity Recognition: Detecting Device Activities

Graphic Widget: Drawing Simple Images Using Evas Objects

Graphic UI Component: Drawing Simple Images Using Evas Objects

Graphics: Creating and Managing Graphics

OpenGL ES: Using OpenGL ES Graphics

TBM Surface: Providing a Rendering Surface for the Tizen Framework

Location: Using Maps Services and Information such as geocode, place, and route in Tizen Applications

Email: Managing Emails

Messaging: Sending SMS, MMS, Email, and Push Messages

Push: Using the Push Service

Messages: Creating and Sending SMS and MMS Messages

Camera: Controlling a Camera Device

Image Util: Encoding, Decoding, and Transforming Images

Media Codec: Encoding and Decoding Media Files

Media Tool: Managing Media Handles

Metadata Extractor: Extracting Metadata from an Input Media File

Player: Playing Multimedia Content from a File, Network, and Memory

Radio: Accessing the Radio

Recorder: Recording Audio and Video

Screen Mirroring: Mirroring screen and sound

Screen Mirroring Sink: Mirroring Screen and Sound

Sound Manager: Managing Sound Parameters

Tone Player: Playing Tones

Video Util: Transcoding Media Files

WAV Player: Playing Waveform Audio Files

Bluetooth: Managing Bluetooth Devices

Connection: Managing Modem Data Connections

Network: Managing Connections and Communication

NFC: Managing Near Field Radio Communication

SmartCard: Accessing Secure Elements

Wi-Fi Direct: Managing Wi-Fi Direct™

Wi-Fi: Managing Wi-Fi and Monitoring Its State

Key Manager: Using Keys and Certificates, and Implementing Access Control

Privilege Info: Managing Privilege Information

Security: Handling Keys and Cryptographic Operations

Account Manager: Managing Account Information on the Device

Calendar: Managing Calendar Events and Accessing the Calendar Database

Contacts: Managing Contacts and Groups, and Accessing the Contact Database

Social: Managing Personal Data

Sync Adapter: Making sync mechanism implementation easy

Sync Adapter: Implementing the Sync Mechanism

Sync Manager: Managing all sync related activities

Sync Manager: Managing Sync-related Activities

Sync: Scheduling for Syncing of Application's Data

Sync: Scheduling for Application Data Syncing

Device: Accessing Devices, Such as SB, MMC, Battery, CPU, and Display

dlog: Sending Log Output for Debug Activities

Runtime information: Receiving and Monitoring Runtime Information

Sensor: Using Sensors and Managing Sensor Events

Storage: Getting Information about Storages

System Information: Obtaining Device Information

System Settings: Getting Miscellaneous System Settings and Preferences

System: Getting System Information and Managing Devices

Evas: Creating and Managing Image Objects

Event and Effect: Using Animations and Effects

Font Setting: Using Various Fonts in the Application

Form: Creating the Basic Application and Layout

Genlist: Managing Large Element Sets

Genlist: Managing Large Element Sets

Menu: Adding Menus to the Application

Multi-point Touch: Tracking Touch Events

Naviframe: Creating Navigation Using Naviframes

Panes: Using Panes

Popup: Using Popups

Transit: Implementing Elementary Transit Effects

UI Control: Managing UI Elements

UI Components: Managing UI Elements

UI Components: Managing UI Elements

UI Components: Managing UI Elements

UI Layout: Creating a UI Screen Layout

UI: Creating the Application UI

UI Framework: Creating the Application UI

TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data

UIX: Taking Advantage of UI Extensions

Data Control: Providing Information about Packages and their Installation

Package: Providing Information about Package Installation and Installed Packages

Bluetooth: Managing a Bluetooth Device and Supporting RFCOMM and HDP

Communication: Connecting to the Network and Communicating with Messages

Messaging: Managing and Receiving SMS, MMS, and Email Messages

NFC: Managing an NFC Device and Detecting NFC Tags and Peers

Push: Receiving Push Notifications from a Push Server

Secure Element: Accessing Secure Elements

Task: Bluetooth Chat

Download: Downloading Remote Objects by HTTP Request

Exif: Manipulating EXIF Data from JPEG Files

Task: Download Manager

Filesystem: Providing Access to the Device File System

Message Port: Communicating with Other Applications

Task: File Manager

Bookmark: Managing Web Browser Bookmarks

Calendar: Managing Calendars and Calendar Events

Call History: Managing the Call History on the Device

Contact: Managing Contacts and Handling Contact Information

Data Synchronization: Creating a Sync Profile and Synchronizing Device Data

Task: Call Log

Web UI Framework (UIFW): Creating UI Components

Server-Sent Events: Using Server Push in Web Environment

WebSocket: Exchanging Data Using a Socket Server

XMLHttpRequest Level 1 and 2: Communicating with the Server

DeviceOrientation Event Specification: Detecting Device Motion

Task: Compass

Vibration: Managing the Vibration Mechanism

CSS Animations Module Level 3: Creating Animations

CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles

CSS Fonts Module Level 3: Manipulating Fonts

HTML5 Forms: Managing User Input

Media Queries: Labeling Output Devices in Style Sheets

CSS Multi-column Layout Module: Creating Multi-column Layouts

Selectors API Level 1 and Level 2: Selecting DOM Elements

HTML5 session history of browsing contexts: Managing Browsing Contexts

CSS Text Module Level 3: Manipulating Text

CSS Transforms: Manipulating Elements

CSS Transitions Module Level 3: Changing Element Styles

Testing with a Target Device

Transferring Files with Connected Devices

Setting Preferences

Using the Emulator

Emulator Manager

Using Hardware Virtualization

Emulator Control Keys and Menu

Emulator Control Panel

Supported Features

Using Multi-point Touch

Sharing directory

Sharing a Directory

Using Emulator in a Network

Using Network Features

Using Custom Skin Layout

Using EventCast

Emulator Start-up Options

Using Emulator Start-up Options

Elements Panel

Resources Panel

Network Panel

Sources Panel

Timeline Panel

Profiles Panel

Console Panel

Basic Panel Operation

Web Simulator Settings

Editing a Test

Security and API Privileges for Web Applications

Security and API Privileges for Native Applications

Tizen APIs for Web Applications

Tizen APIs for Native Applications

Starting the Tizen Native Application

Package ID and Application ID

Application Directory Policy

Installer and SMACK

Feature Filtering for Web Applications

Feature Filtering for Native Applications

Tizen Platform Introduction

Back Key

Media Key

Non-API Bound Privileges

Planning and Designing the Application

Creating the Application Project

Packaging the Application

Debug View

Remote Debugging

Debugging with Logs

Break Points

Watch Points

Watch Points

Debugging Applications on the Emulator

Creating and Designing Page Layouts

Measuring Application Performance

Valgrind Analysis

Setting the Application Manifest

Creating a UI Builder Project

Creating and Designing Page Layouts

Handling Events and Testing

Migrating UI Builder Projects

Feature-based Filtering

Profile-based Filtering

Single Web Application for Multiple Profiles

Tizen Platform Introduction

Tizen Architecture

Rotary Events

Ambient Events

Creating Your First Mobile Web App

Creating Your First Wearable Web App

Planning and Designing the Application

Creating the Application Project

Setting Project Properties

Designing the Application UI

Coding the Application

Building the Application

Developing Multiple Projects as a Combined Package

Certifying and Publishing the Application

Using Hover Help

Adding External Source Code or Library

Importing a Project

Exporting a Project User Template

User Template

Running Widgets on the Emulator

Running Web Applications on the Emulator

Running Widgets on a Target Device

Running Web Applications on a Target Device

Running Mobile Widgets on the Simulator

Running Mobile Web Applications on the Simulator

Debugging Widgets

Debugging Web Applications

Rapid Development Support

Checking API Privileges

Setting Build Properties

Setting the Web Application Configuration

Call Information

Circle Datetime

Circle Genlist

Circle Object

Circle Progressbar

Circle Scroller

Circle Slider

Circle Surface

Background

Button

Check

Colorselector

Ctxpopup

Datetime

Entry

Flip

Gengrid

Genlist

GLView

Icon

Image

Index

Label

List

Map

Notify

Panel

Photo

Photocam

Plug

Progressbar

Radio

Segmentcontrol

Slider

Spinner

Toolbar

Win

Background

Button

Check

Ctxpopup

Datetime

Entry

Genlist

GLView

Icon

Image

Index

Label

List

Map

Notify

Plug

Progressbar

Radio

Slider for the Wearable Core

Win

Panes Container

Panes

Scroller Container

Scroller

Box

Conformant

Grid

Mapbuf

Naviframe

Scroller

Table

Making EFL Applications

Notification Window

Screenshot

Input Generator

Elementary Basics

Elementary Basics

Mode

Attribute for Presentation Mode

Notify to application

Get Information of External Output Device

Set to External Output Device

Rendering Concept and Method in Evas

Customizing UI Components

Managing UI Component Focus

Key Concepts

Scalability Using Elementary UI Components

Scalability Using Edje

Aspect Ratio

Scaling Widgets

Scaling UI Components

Using Widgets

Using UI Components

Scaling UI Components

Using UI Components

Panel Widget

Managing Widget Focus

Using Widget Styles

Getting STT Information

Getting TTS Information

NDEF Messages

Package Management

Configuration Extensions

Handling Exceptions

Handling Generic Events

Managing Location Coordinates

Sorting and Filtering Data

Setting the Column Gap

Setting the Column Rule

Setting the Column Break

JavaScript Behavior

Managing Application Preferences

Managing Application Preferences

Initializing the Badge Functionality

Warm-up

Warm-up

Initializing Data Controls

Warm-up

Displaying the Progress Bar

Displaying the Progress Bar

Warm-up

Retrieving All Package Information of Installed Packages

Warm-up

Adding a Shortcut

Warm-up

Initializing the Watch Application

Managing Life-cycle Callbacks

Managing System-related Callbacks

Drawing the Watch UI

Getting the Current Time

Using the Ambient Mode

Warm-up

Initializing the Widget Application

Creating the Widget Application

Managing Widget Object Life-cycle Callbacks

Drawing the Widget UI

Managing the Widget Instance

Warm-up

Managing Characters and Strings

Managing Locales

Managing Locales

Managing Numbers

Managing Numbers

Warm-up

Warm-up

Follow-up

Reading Bookmark Information

Reading Bookmark Information

Removing a Bookmark

Removing a Bookmark

Initializing a Filter

Initializing a Filter

Setting up a Filter

Setting up a Filter

Using Filters to Find Media Items

Using Filters to Find Media Items

Initializing Media Folders

Initializing Media Folders

Finding All Media Folders

Finding All Media Folders

Finding Folders Using a Filter

Finding Folders Using a Filter

Inserting Media in the Database

Inserting Media in the Database

Inserting Media in a Folder

Inserting Media in a Folder

Initializing a Playlist

Initializing a Playlist

Managing Playlists

Managing Playlists

Initializing Media Tags

Initializing Media Tags

Initializing Storage

Initializing the Storage

Getting the Storage List

Getting the Storage List

Finding Media Item Groups

Finding Media Item Groups

Finding Media Item Groups Using a Filter

Finding Media Item Groups Using a Filter

Warm-up

Displaying a Temperature Graph

Displaying Animated Geometrical Figures Using Cairo Evas_GL

Warm-up

Warm-up

Animating the Cube

Viewing the Entire Cube Source

Viewing the Entire Cube Source

Using OpenGL ES in Multi-threaded Applications

Using EvasGL Extensions

Using Direct Rendering

Using Direct Rendering

Using Client-side Rotation

Using Client-side Rotation

Warm-up

Follow-up

Initializing the Maps Service

Using Geocode and Reverse Geocode Services

Using Geocode and Reverse Geocode Services

Using Place Search Services

Using the Place Search Service

Using Using Routing Service

Using the Routing Service

Canceling the Service Request

Recognizing Place information

Recognizing the Place Information

Recognizing Route information

Recognizing the Route Information

Tuning API requests with preferences

Customizing the Service Requests

Warm-up

Initializing the Email Service

Initializing the Email Service

Warm-up

Connecting to the Push Service

Connecting to the Push Service

Sending Push Notifications

Sending Push Notifications

Warm-up

Warm-up

Warm-up

Releasing Resources

Releasing Resources

Warm-up

Initializing the Metadata Extractor

Initializing the Metadata Extractor

Getting Metadata, Artwork, and Frame

Getting Metadata, Artwork, and Frame

Stopping the Player and Releasing Resources

Stopping the Player and Releasing Resources

Initializing the Players

Initializing the Players

Playing Multiple Files Simultaneously

Playing Multiple Files Simultaneously

Setting Display Parameters

Setting Display Parameters

Getting Stream Information

Getting Stream Information

Inserting Subtitles

Inserting Subtitles

Warm-up

Warm-up

Initializing the screen mirroring sink

Preparing the screen mirroring sink

Connecting and Starting the screen mirroring sink -

Releasing Resources

Handling exception of the screen mirroring

Warm-up

Initializing the Screen Mirroring Sink

Preparing the Screen Mirroring Sink

Connecting and Starting the Screen Mirroring Sink

Releasing Resources

Handling Screen Mirroring Sink Exceptions

Follow-up

Warm-up

Warm-up

Follow-up

Setting Parameters

Setting Parameters

Warm-up

Warm-up

Finding Other Devices

Finding Other Devices

Exchanging Data Using OPP

Performing GATT Operations

Exchanging Data Using OPP

Releasing All Resources

Enabling the Bluetooth LE Adapter and Checking its State

Managing Bluetooth LE Scans

Adding Advertising Data to the LE Advertisement

Setting the Advertising Connectable Mode

Setting the LE Advertising Mode

Starting Advertising

Releasing All Resources

Warm-up

Initializing a Socket

Retrieving the Address Family

Creating the Socket and Managing the Remote Host Connection

Initializing NFC P2P

Using the HCE Feature

Initializing NFC P2P

Warm-up

Using the SE Service

Managing the Reader

Managing Sessions

Managing Channels

Sending a Transmission

Warm-up

Warm-up

Creating Key Pairs

Creating Key Pairs

Warm-up

Follow-up

Warm-up

Deleting an Event

Deleting an Event

Monitoring Event Changes

Monitoring Event Changes

Deleting a Todo

Deleting a Todo

Making a vCalendar

Making a vCalendar

Parsing a vCalendar

Parsing a vCalendar

Warm-up

Getting Contacts

Getting Contacts

Updating a Contact

Deleting a Person

Deleting a Person

Linking and Unlinking Contacts

Linking and Unlinking Contacts

Managing Favorites

Managing Favorites

Monitoring Person Changes

Monitoring Person Changes

Creating a Group

Creating a Group

Setting Group Properties

Setting Group Properties

Inserting a Group to the Database

Inserting a Group to the Database

Getting Groups

Getting Groups

Updating a Group

Updating a Group

Deleting a Group

Deleting a Group

Managing Group Members

Managing Group Members

Monitoring Group Changes

Monitoring Group Changes

Making a vCard

Making a vCard

Parsing a vCard

Parsing a vCard

Creating a Speed Dial

Creating a Speed Dial

Setting Speed Dial Properties

Setting Speed Dial Properties

Inserting a Speed Dial to the Database

Inserting a Speed Dial to the Database

Getting Speed Dials

Getting Speed Dials

Updating a Speed Dial

Updating a Speed Dial

Deleting a Speed Dial

Deleting a Speed Dial

Creating a Log

Creating a Log

Deleting a Log

Deleting a Log

Inserting New Records

Inserting New Records

Getting Record Details

Getting Record Details

Handling Lists

Handling Lists

Deleting Records

Deleting Records

Linking Persons

Linking Persons

Warm-up

Set Callback Functions

Setting the Callback Functions

Warm-up

Warm-up

Controlling Haptic Devices

Controlling Haptic Devices

Controlling LED Devices

Controlling LED Devices

Controlling the Power State

Controlling the Power State

Monitoring Device Changes

Monitoring Device Changes

Warm-up

Monitoring Storage State Changes

Retrieving Storage Space Information

Retrieving Storage Space Information

Warm-up

Setting the Font for a UI Component

Using the Edje Text Class

Using the Edje Text Class

Warm-up

Creating the Basic Application

Warm-up

Initializing the Application

Warm-up

Initializing the Application

Creating a Genlist

Adding New Entries

Choosing Another Item Style to Add or Remove Parts

Using Item Modes

Warm-up

Defining the Application "Structure"

Defining the Application "Structure"

Creating the Basic UI

Creating the Basic UI

Creating a Hidden Menu

Creating a Hidden Menu

Warm-up

Initializing Multi-point Touch

Handling the Canvas

Handling the Canvas

Warm-up

Creating Naviframes

Warm-up

Initializing the Application

Configuring the Panes

Configuring the Panes

Handling Signals

Handling Signals

Warm-up

Initializing the Popup Application

Using Popup Styles

Managing Popup Events

Warm-up

Warm-up

Creating the UI Layout

Setting Options and Controlling Recording

Setting Options and Controlling Recording

Warm-up

Managing Data in Key-value Pairs

Managing Data in Key-value Pairs

Managing SQL-type Data

Managing SQL-type Data

Warm-up

Task

Discovering Bluetooth Devices

Discovering Bluetooth Devices

Creating a Bonding with a Bluetooth Device

Creating a Bonding with a Bluetooth Device

Connecting to and Exchanging Data with a Bluetooth Device

Connecting to and Exchanging Data with a Bluetooth Device

Task

Task

Task in Mobile Applications

Managing NFC Connectivity

Managing NFC Connectivity

Detecting NFC Tags and Peer Devices

Detecting NFC Tags and Peer Devices

Handling NDEF Messages

Handling NDEF Messages

Exchanging NDEF Data with Peers

Exchanging NDEF Data with Peers

Exchanging NDEF Data with Tags

Exchanging NDEF Data with Tags

Using NFC Card Emulation

Using NFC Card Emulation

Using NFC Host-based Card Emulation

Opening Sessions and Channels

Opening Sessions and Channels

Transmitting APDUs to Secure Elements

Transmitting APDUs to Secure Elements

Closing Sessions and Channels

Closing Sessions and Channels

Warm-up

Task

Creating an Archive

Creating an Archive

Extracting Files from an Archive

Extracting Files from an Archive

Task

Warm-up

Managing Accounts

Managing Accounts

Receiving Notifications on Account Changes

Receiving Notifications on Account Changes

Managing Extended Account Data

Managing Extended Account Data

Task

Adding Events to a Calendar

Adding Events to a Calendar

Adding Events to a Calendar in the Batch Mode

Converting Calendar Task Formats

Converting Calendar Task Formats

Receiving Notifications on Calendar Changes

Receiving Notifications on Calendar Changes

Task

Searching for Call History Items

Searching for Call History Items

Getting Address Books

Exporting Contacts

Exporting Contacts

Warm-up

Creating a Simple Application

Creating a Simple Application

Managing Page Routing

Managing Page Routing

Managing UI Components

Managing UI Components

Creating a Notepad Application

Creating a Notepad Application

Warm-up

Connecting to the Socket Server

Warm-up

Sending a Cross-origin Request

Retrieving the Browser State

Retrieving the Browser State

Task in Mobile Applications

Detecting Device Rotation

Detecting Device Rotation

Detecting Device Acceleration

Detecting Device Acceleration

Initializing the Application

Warm-up

Managing Vibrations

Managing Vibrations

Warm-up

Warm-up

Warm-up

Warm-up

Warm-up

Warm-up

Follow-up

Warm-up

Warm-up

Follow-up

Creating Fade Animation Effects

Creating Fade Animation Effects

Warm-up

Follow-up

Virtual Machine

Emulator Manager CLI

Prerequisites

Running the Emulator

General Purpose Skin

Control Keys

Emulator Control Panel CLI

Moving an Existing Point

Ending the Multi-point Touch

Proxy Configuration

Proxy Configuration

NAT(Network Address Translation)

NAT (Network Address Translation)

Bridge (Bridged Network)

Bridge(Bridged Network)

System Summary

Geolocation

Sensors

Communications in Mobile Applications

Network Management in Mobile Applications

Power Manager in Mobile Applications

Notification in Mobile Applications

Application Navigation Bar

Simulator Configuration Settings

Non-API Bound Privileges

Feature-based Filtering

Profile-based Filtering

Single Web Application for Multiple Profiles

Feature-based Filtering

Profile-based Filtering

Remote Debugging Process

Break Point Properties

Break Point Properties

Expressions View

Creating a New Native UI Builder Application View

Specifying Privileges in the Privilege Tab

Setting the Supported Locales in the Localization Tab

Editing the tizen-manifest.xml File in the tizen-manifest.xml Tab

UI Builder Framework

App Object

Page Object

Structure of a UI Builder Project

Creating a New Web UI Builder Application Page

Using the Page Designer View

Testing a UI Builder Project

Web Package Configuration

Web Application Package

Screen Size Feature

Feature Hierarchy

Adding the Feature List

Widget Signature

Web Application Signature

Web Application Protection

Content Security Policy

To Create a HelloWorld Application

To Create a HelloWorld Application

Packaging Hybrid Applications in Mobile Applications

Defining and Editing General Information in the Overview Tab

Specifying Privileges in the Privilege Tab

Defining External Access Policies in the Policy Tab

Setting the Supported Locales in the Localization Tab

Declaring Name-value Pairs in the Preferences Tab

Using Position Mappings

Creating a Circle Datetime

Activating a Rotary Event

Using the Circle Object Property

Creating a Circle Genlist

Configuring the Circle Genlist

Activating a Rotary Event

Using the Circle Object Property

Creating a Circle Object

Setting the Line Width

Setting the Angle

Setting the Angle Offset

Setting the Minimum and Maximum Angle

Setting the Minimum and Maximum Value

Setting the Value

Setting the Color

Setting the Radius

Disabling a Circle Object

Creating a Circle Progressbar

Using the Circle Object Property

Configuring Circle Progressbar

Creating a Circle Scroller

Activating the Rotary Event

Using the Circle Object Property

Configuring the Circle Scroller

Adding an Eext Slider object

Activating the Rotary Event

Using the Circle Slider Property

Configuring the Circle Slider

Using Circle Slider Callbacks

Creating a Circle Surface

Adding Circle Objects to the Circle Surface

Deleting Circle Surface

Adding a Background Component

Changing the Color of the Background

Changing the Image of the Background

Using Overlay

Adding a Button Component

Adding an Icon Inside a Button

Adding Text Inside a Button

Using Button Styles

Using the Button Callbacks

Using the Autorepeat Feature

Adding a Check Component

Modifying the Check Styles

Using the Check Component

Using the Check Callbacks

Adding a Colorselector Component

Setting the Colorselector Modes

Using the Colorselector Callbacks

Adding a Ctxpopup Component

Modifying the Ctxpopup Style

Configuring the Ctxpopup

Managing the Ctxpopup Items

Using the Ctxpopup Callbacks

Adding a Datetime Component

Using the Datetime Styles

Setting the Datetime Format

Using the Datetime Callbacks

UX Issue in Tizen 2.3

Adding an Entry Component

Using the Text Editor

Setting the Password Mode

Entry Line Modes And Wrapping

Selecting Text

Controlling the Cursor

Formatting Text

Using Special Markups

Overriding Style

Filtering Text

Loading and Saving Files

Using Entry Theme Content

Using Entry Theme Texts

Using Entry Callbacks

Adding a Flip Component

Configuring Flip Animation

Interacting With the User

Using the Flip Callbacks

Adding a Gengrid Component

Gengrid Items

Creating and Deleting Items

Managing Items

Using Gengrid Callbacks

Genlist Item Style

Adding a Genlist Component

Creating And Deleting Items

Managing Items

Selection

Using Genlist Callbacks

Adding a GLView Component

Using the GLView API

Using GLView Callbacks

Adding an Icon Component

Changing Image File

Using Icon Callbacks

Adding an Image Component

Configuring the Image Component

Using Image Callbacks

Adding an Index Component

Adding Items

Sorting Index Items

Using Index Callbacks

Adding a Label Component

Using the Label Styles

Configuring the Label

Using the Label Callbacks

Adding a List Component

Using the List

Adding Item to the List

Changing the Text or Icon of an Item

Retrieving Selected Items

List Item Operations

Using List Callbacks

Adding a Map Component

Playing with the Map

Drawing Overlays

Adding Other Overlays

Calculating Routes

Using Map Callbacks

Adding a Notify Component

Configuring the Notify Component

Using Notify Callbacks

Adding a Panel Component

Using the Panel

Creating a Drawer

Using Panel Callbacks

Adding a Photo Component

Using a Photo Component

Using Photo Callbacks

Adding a Photocam Component

Using Photocam Zoom

Using Photocam Callbacks

Adding a Plug Component

Using the Plug

Adding a Popup Component

Using Popup Styles

Setting the Popup Areas

Using Popup Callbacks

Adding a Progressbar Component

Using the Progressbar Styles

Using the Progressbar

Configuring the Progressbar

Using the Progressbar Callbacks

Adding a Radio Component

Changing the Radio Value

Managing the Radio Groups

Using the Radio Callbacks

Adding a Segmentcontrol Component

Adding Items

Using the Segmentcontrol Callbacks

Adding a Slider Component

Using the Slider Styles

Configuring the Slider

Using the Slider Callbacks

Adding a Spinner Component

Configuring the Spinner

Using the Spinner Callbacks

Adding and Configuring a Toolbar Component

Using the Toolbar Styles

Configuring the Toolbar

Adding Items to the Toolbar

Adding Items with States

Using the Toolbar Callbacks

Adding a Tooltip

Activating the Tooltip

Adding a Window Component

Closing a Window

Using the Window Callbacks

Adding a Background Component

Changing the Color of the Background

Changing the Image of the Background

Using Overlay

Adding a Button Component

Adding an Icon Inside a Button

Adding Text Inside a Button

Using Button Styles

Using the Button Callbacks

Using the Autorepeat Feature

Adding a Check Component

Modifying the Check Styles

Using the Check Component

Using the Check Callbacks

Adding a Ctxpopup Component

Modifying the Ctxpopup Style

Configuring the Ctxpopup

Managing the Ctxpopup Items

Using the Ctxpopup Callbacks

Adding a Datetime Component

Using the Datetime Styles

Setting the Datetime Format

Using the Datetime Callbacks

Adding an Entry Component

Using the Text Editor

Setting the Password Mode

Entry Line Modes And Wrapping

Selecting Text

Controlling the Cursor

Formatting Text

Using Special Markups

Overriding Style

Filtering Text

Loading and Saving Files

Using Entry Theme Content

Using Entry Theme Texts

Using Entry Callbacks

Genlist Item Style

Adding a Genlist Component

Creating And Deleting Items

Managing Items

Selection

Using Genlist Callbacks

Adding a GLView Component

Using the GLView API

Using GLView Callbacks

Adding an Icon Component

Changing Image File

Using Icon Callbacks

Adding an Image Component

Configuring the Image Component

Using Image Callbacks

Adding an Index Component

Adding Items

Using Index Callbacks

Adding a Label Component

Using the Label Styles

Configuring the Label

Using the Label Callbacks

Adding a List Component

Using the List

Adding Item to the List

Changing the Text or Icon of an Item

Retrieving Selected Items

List Item Operations

Using List Callbacks

Adding a Map Component

Playing with the Map

Drawing Overlays

Adding Other Overlays

Calculating Routes

Using Map Callbacks

Adding a Notify Component

Configuring the Notify Component

Using Notify Callbacks

Adding a Plug Component

Using the Plug

Adding a Popup Component

Using Popup Styles

Setting the Popup Areas in Wearable Core Controls

Setting the Popup Areas in Gear O

Using Popup Callbacks

Adding a Progressbar Component

Using the Progressbar Styles

Configuring the Progressbar for Wearable Core Control

Configuring the Progressbar for Gear O

Using the Progressbar Callbacks

Adding a Radio Component

Changing the Radio Value

Managing the Radio Groups

Using the Radio Callbacks

Using the Radio Callbacks with Gear O

Adding a Slider Component

Using the Slider Styles

Configuring the Slider

Using the Slider Callbacks

Adding a Window Component

Closing a Window

Using the Window Callbacks

Creating Panes

Creating a Scroller

Creating a Box

Adding Objects to the Box

Setting the Padding

Handling Element Size

Setting the Alignment

Using Size Hints

Creating a Conformant

Adding Content to the Conformant

Signals

Creating a Grid

Adding Items to the Grid

Adding Objects to the Layout

Creating a Mapbuf

Adding Content to the Mapbuf

Activating the Mapbuf

Signals

Creating a Naviframe

Adding and Deleting Views

Adding Fixed Content

Signals

Creating a Scroller

Adding Objects to the Scroller

Managing the Properties of the Scroller

Signals

Example

Creating a Table

Adding Items to the Table

Managing the Items

Clearing the Table

Basic Structure of an EFL Application in Tizen

Basic Use of Appcore

First Use of the Elementary Library

Elementary Callbacks

Scaling Widgets

Scaling UI Components

Customizing Themes

Configuring Focus

Configuring Scrolling

Configuring Long Press

Configuring Tooltips

Configuring the Password Show Last Feature

Configuring the Elementary Engine

Configuring Selection

Configuring Mirroring

First Use of the Elementary Library

General Functions

Managing Profiles

Scaling UI Components

Configuring the Cache

Customizing Themes

Configuring Focus

Configuring the Gesture Layer

Configuring Scrolling

Configuring Long Press

Configuring Tooltips

Configuring the Password Show Last Feature

Configuring the Elementary Engine

Configuring the Access Mode

Configuring Selection

Configuring Mirroring

Configuring Frame Rate

Elementary Theme

Customizing a UI Component Style

Focus Presentation

Moving Focus

Focus on UI Component

Using Containers for Effective Layouts

Using Weight and Align Properties

Part

Description

Text

Image

Image Set

Part Types

Setting the Image Aspect Ratio

Finger Size

Scale

Elementary Basics

Elementary Configuration

UI Widgets

Components

Widget Focus

UI Component Focus

Widget Styles

UI Component Styles

Widget Customization

UI Component Customization

Container Widgets

Containers

Finger Size

Scale

Example

Creating Scalable EDC Objects

Elementary Basics

Elementary Configuration

Components

UI Component Focus

UI Component Styles

UI Component Customization

Containers

Adding Panel Widget

Using the Panel

Creating a Drawer

Using Panel Callbacks

Customizing a Widget Style

Focus Presentation

Moving Focus

Focus on Widget

Content Filter Attributes

Converting Strings to Ustrings

GLView

EvasGL

Defining and Registering the Discovery State Callback Function

Enabling Discovery

+Building a Basic Item Class

Adding the Element

Text in the List Elements

Evas_Objects in the List Elements

Events on Genlist Items

Group Mode

Tree Mode

Mixing Group and Tree Modes

"unpress" Signal

Defining the Main Screen

Defining the Main Screen

Using the Template Manager

Using the Template Manager

Source Code

Source Code

Source Code

Defining the Main Screen

Source Code

Source Code

Source Code

Network Connections for NAT

Screen Size Feature

Feature Hierarchy

Adding the Feature List

Screen Size Feature

Feature Hierarchy

Adding the Feature List

Heap Memory Profiling Results

Creating an Overlay Class

Adding Overlays to a Class

Creating Bubbles Following Overlays

Creating an Overlay Class

Adding Overlays to a Class

Creating Bubbles Following Overlays

Elementary Signal Callback

Elementary Event Callback

Use Theme Styles

Load Theme Styles

Create a New Theme

Create a Customized Style for the Check Component

Add the Theme File to Your Project

Use the New Style

Special Theme Parts

Concept of Focus

Giving Focus

Concept of Focus Chain

Focusable Objects

Customizing Object's Focus Exit Chain

Customizing Whole Application's Focus Chain

Customizing Collision of Both

Weight

Align

Scale Parameter

Image Set

Image Borders

Load Theme Styles

Create a New Theme

Create a Customized Style for the Check Widget

Add the Theme File to Your Project

Use the New Style

Special Theme Parts

Concept of Focus

Giving Focus

Concept of Focus Chain

Focusable Objects

Customizing Whole Application's Focus Chain

Customizing Collision of Both

Overlay

Extension

Swallow Parts

Text Parts

Overlay

Extension

Swallow Parts

Text Parts

@@ -39,8 +39,7 @@

Figure: Author certificate

- Author certificate

Author certificate

diff --git a/org.tizen.devtools/html/common_tools/connection_explorer.htm b/org.tizen.devtools/html/common_tools/connection_explorer.htm index 6761e65..ba98ea7 100644 --- a/org.tizen.devtools/html/common_tools/connection_explorer.htm +++ b/org.tizen.devtools/html/common_tools/connection_explorer.htm @@ -16,17 +16,17 @@ -

+ @@ -35,13 +35,13 @@

You can test Tizen applications with connected devices by using the following alternative ways:

Testing applications on a physical device connected to the host system.
Testing them on an Emulator that emulates a real device as a software component installed on the host computer.
A list of connected devices is available in the Connection Explorer view after connecting a device or launching a Tizen Emulator with a tree view.

The Connection Explorer view shows the devices connected to the system. It provides the following actions for using connected devices:

Show connected devices
Provide file operations on connected devices
Send or receive files between the Project Explorer view and Connection Explorer view by dragging and dropping them between the views
Launch the Emulator Manager to handle the Emulator with multi-instances

Figure: Connection Explorer view

Connection Explorer view

You can test your application by running and debugging it on a real target device:

Connect your device to the host system by using a USB connector. The device icon () is displayed in the Connection Explorer view.
Select the device in the Connection Explorer view. It is ready to be run and used to test your project.

You can transfer files between the connected devices and the host system:

To transfer a file from a connected device to the host file system, pull the selected file to the desired host system path.

To transfer a file from the host file system to a connected device, push the selected file to the desired connected device path. @@ -76,7 +75,7 @@ src="../images/connection_explorer.png" />

You can set the following Connection Explorer preferences:

Change the Emulator Manager path
Set the file transfer timeout value

Content

Using the Emulator
Using the Emulator
Emulator Manager
Using Hardware Virtualization
Emulator Control Keys and Menu

The Tizen SDK includes a virtual device Emulator. The Emulator provides the full stacks of the Tizen platform so that you can test Tizen applications before deploying them to the real target device. The Emulator is based on the open source QEMU project and comprises virtual CPU, memory, and various peripherals. Currently, the Tizen SDK only supports the x86 machine architecture for guest. You can use the Emulator Manager to create and launch a Virtual Machine instance. You can communicate with the Emulator instance using the Smart Development Bridge (SDB).

The main features of the Emulator are:

Providing full system emulation, including CPU, memory, and peripheral devices
Simulating events with the Emulator Control Panel
Accelerating guest operations using host CPU or GPU

You can refer to supported features in detail. + +

For more information see Supported Features.

To run applications on the Emulator:

Start the Emulator via Emulator Manager. +
Start the Emulator through the Emulator Manager.
You can launch the Emulator from both the Emulator Manager and the command line. If you are using the command line, you can modify the start-up options.
While running the Emulator, you can use the control keys and context menu or Emulator Control Panel to control the Emulator. You can use extended features while running applications, such as shared directory, multi-point touch, a Webcam, and et. al.
While running the Emulator, you can use the control keys and context menu or the Emulator Control Panel to control the Emulator. You can use extended features while running applications, such as a shared directory, multi-point touch, and a Webcam.

In order to start Emulator quickly,

To start the Emulator quickly:

Start the Emulator Manager by using the Desktop or Start menu:
- In Linux: Desktop > Applications > Tizen SDK > Emulator Manager
- In Windows®: Start > All Programs > Tizen SDK > Emulator Manager
- In Linux: Desktop > Applications > Tizen SDK > Emulator Manager
- In Windows®: Start > All Programs > Tizen SDK > Emulator Manager
Select your prefered profile tab, such as mobile or wearable.
Select Create New and then click Confirm.
Click the Launch button () or press the Enter keyboard key.
Select your preferred profile tab, such as mobile or wearable.
Select Create New and click Confirm.
Click the Launch button ( ) or press the ENTER keyboard key.
To stop the Emulator, right-click the Emulator and select Close.

Figure: Emulator Manager -

Emulator Manager

Figure: Emulator Manager

Emulator Manager

Note
In order to run App faster, it is recommended that CPU VT and GPU are turned on. If CPU VT is disabled, please check the Using Hardware Virtualization. If GPU is disabled, it is recommended to install latest vendor-provided graphic driver.	To run the application faster, switch on CPU VT and GPU. If CPU VT is disabled, check the Using Hardware Virtualization section for more information. If GPU is disabled, install the latest vendor-provided graphic driver.

You can also create a new VM by Emulator Manager CLI. -

The created VM is added under the current tab. The name of tab, <Profile>, refers to the image profile. You can create a VM by using custom image in Base Image of detail view. Background color of custom VM is blue.

You can also create a new virtual machine (VM) with the Emulator Manager CLI.

You can also export a base image of VM and manipulate VM: +

The created VM is added under the current tab. The name of tab, <Profile>, refers to the image profile. You can create a VM by using a custom image in Base Image of the detail view. The background color of a custom VM is blue.

You can also export a base image of the VM and manipulate the VM:

To create a VM, select Create New and then click Confirm.
To create a VM, select Create New and click Confirm.
To create a base image of a VM, select the VM and Export as, and enter a name and location for the base image.
To modify a VM, click the Modify icon (), make the appropriate changes, and click Confirm.
To delete a VM, click Delete or press the Delete keyboard key (fn + Delete in Mac OS® X).
To launch a VM, click the Launch button () or press the Enter keyboard key.
To modify a VM, click the Modify icon ( ), make the appropriate changes, and click Confirm.
To delete a VM, click Delete or press the DELETE keyboard key (fn + Delete in Mac OS® X).
To launch a VM, click the Launch button ( ) or press the ENTER keyboard key.

A virtual machine (VM) is a set of hardware options including the file system image. The Emulator Manager controls the virtual machines. When you launch the Emulator, you can specify the VM that you want to customize. Each VM has its own Emulator file system image. In other words, different VMs have different states of Emulators.

File Sharing -
You can share a directory between the host PC and the Emulator. If you want to use this feature, set the value to ON and define the input directory to share in the directory field. For more information, see Directory Sharing.

You can share a directory between the host PC and the Emulator. If you want to use this feature, set the value to ON and define the input directory to share in the directory field. For more information, see Sharing a Directory.

CPU VT
The Emulator supports hardware virtualization. It is kvm on Ubuntu and HAX on Windows®. If the host CPU supports hardware virtualization and a hardware virtualization module is installed, you can change this value. For more information, see Using Hardware Virtualization.

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

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

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

In Linux: -
```
<TIZEN_SDK>/tools/emulator/bin/em-cli
```

In Windows®: -

<TIZEN_SDK>\tools\emulator\bin\em-cli.bat

For more information, see the CLI help messages.

Please refer to CLI's help messages for detailed information.

Figure: Emulator Manager command line

Emulator Manager command line

Figure: Emulator Manager command line

Emulator Manager command line

In order to run App faster, the Tizen x86 Emulator exploits KVM (Kernel-based Virtual Machine in Linux) or HAX (Hardware Accelerated eXecution in Windows® and Mac OS® X) with HW virtualization support.

If the CPU VT is disabled in Detail View on Emulator Manager, you should check the following prerequisites and may install KVM or HAX

To run the application faster, the Tizen x86 Emulator exploits KVM (Kernel-based Virtual Machine in Linux) or HAX (Hardware Accelerated eXecution in Windows® and Mac OS® X) with HW virtualization support.

If the CPU VT is disabled in the Detail view on the Emulator Manager, check the following prerequisites and install KVM or HAX.

In Linux: -
No installation is required for KVM.
+
No installation is required for KVM.
In Windows® and Mac OS® X:
The HAXM driver is installed during the Tizen SDK installation. See the installation manual on the Tizen developer site.
@@ -285,19 +285,20 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo

If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP) related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see MSDN).

If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP) -related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see MSDN).

- +

No configuration is required for KVM or HAX.

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

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.

The Tizen Emulator provides a variety of control keys and menus.

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

Figure: Profile-specific skin Emulator

Profile-specific skin Emulator Wearable

Profile-specific skin Emulator Mobile

The image of the general purpose skin is generated by nine-patch image processing. The Emulator skin frame has the same appearance on every state of resolution, scale, or rotation. Unlike the profile-specific skin, the layout of the general purpose skin is not configurable.

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

The following figure illustrates the general purpose skin Emulator.

Figure: General purpose skin Emulator

General purpose skin Emulator Wearable

General purpose skin Emulator Mobile

+ +

The following keys are available on the Emulator:

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

When you tap, it opens a list of options available for the current screen.

Home (mobile only) -

If you long press the Home key, the Task switcher application appears as in a real device.

Back (mobile only)

When you tap, it returns to the previous screen.

@@ -403,7 +405,7 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo Directory Sharing - Whether host directory sharing is used or not + Whether host directory sharing is used @@ -413,12 +415,12 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo CPU Virtualization - Whether hardware virtualization is supported or not + Whether hardware virtualization is supported GPU Virtualization - Whether GPU virtualization is supported or not + Whether GPU virtualization is supported @@ -495,21 +497,23 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo Note - - In Ubuntu, you need to change a global GNOME setting to view the menu icons: -

In the command console, execute the gconf-editor command.
In the tree, navigate to desktop > gnome > interface.
Enable the menus_have_icons option.

- - + + In Ubuntu, you need to change a global GNOME setting to view the menu icons: +

In the command console, execute the gconf-editor command.
In the tree, navigate to desktop > gnome > interface.
Enable the menus_have_icons option.

+ + +

You can execute the ECP by selecting Control Panel on the Context Menu after the Emulator was successfully launched. You can control and monitor the state of the Emulator dynamically.

The main features of ECP:

+ +

You can execute the Emulator Control Panel (ECP) by selecting Control Panel on the Context Menu after the Emulator is successfully launched. You can control and monitor the state of the Emulator dynamically.

The main features of ECP:

Device Manager @@ -568,19 +572,19 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo Wearable Description - + Uninstaller No Yes You can see user-installed applications and uninstall them. - - - + + +
Event Injector
The following table lists the Event Injector features and their availability on different profiles.
@@ -590,40 +594,40 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo Feature - Mobile + Mobile Wearable Description - + Battery Yes Yes - You can set the battery level using the Level slider. + You can set the battery level using the Level slider. To set the charger status to connected or disconnected, select the appropriate Charger radio button. - + RSSI Yes No You can set the remote signal strength using the level bar. - + Sensor - 3-Axis Sensor + 3-Axis Sensor Yes Yes - You can inject user acceleration, magnetic, gyroscope using slider bars or text input. - - + You can inject user acceleration, magnetic, and gyroscope values using slider bars or text input. + + - Light + Light Yes Yes - You can inject a lux value into light sensor. - If you set brightness as auto, then display will be changed by injecting light value. + You can inject a lux value into light sensor. + If you set brightness as auto, then display will be changed by injecting light value. @@ -632,14 +636,14 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo Yes You can inject the presence of nearby objects. - + Pressure Yes Yes You can inject a hPa value into the pressure sensor. - + Ultraviolet Yes @@ -659,40 +663,40 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo No You can inject adding or removing headset. - + Gesture No Yes You can inject flick up (menu button) or flick down (back button) events in the wearable profile. - + USB Yes Yes You can add or remove a USB device by setting the USB device setting to the connected or disconnected state. - + SDCard Yes No - You can inject 4, 8, 16, or 32G SD card. + You can inject a 4, 8, 16, or 32G SD card. - + Location Yes Yes - You can inject latitude and longitude value via map. Also you can inject these manually. Log file as well. + You can inject a latitude and longitude values using a map, manually, or from a log file. - + Telephony Yes Yes - You can make/receive a call via Call tab. Also you can send/receive SMS via SMS tab. + You can make and receive a call through the Call tab. You can also send and receive SMS messages through the SMS tab. @@ -795,8 +799,8 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo S USB - - + O + Memory @@ -821,7 +825,7 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo Telephony - +

- +

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: -
```
<TIZEN_SDK>/tools/emulator/bin/ecp-cli
```

In Windows®: -

<TIZEN_SDK>\tools\emulator\bin\ecp-cli.bat

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: +
<TIZEN_SDK>/tools/emulator/bin/ecp-cli
In Windows®: +
<TIZEN_SDK>\tools\emulator\bin\ecp-cli.bat

You can use the CLI by session mode or shell mode: +

You can use the CLI in a session mode or shell mode:

Session mode
You can access this mode by running the binary without any parameters. The mode keeps a session until it is exited. You can exit by entering the exit command.

Shell mode @@ -888,10 +892,10 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo

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

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

Table: CLI Common commands
Commands	Command	Syntax	Description
hds status	Show the current host directory sharing status.

+ @@ -944,14 +948,14 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + - + @@ -969,16 +973,16 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + - + - + @@ -988,12 +992,12 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + - + @@ -1009,10 +1013,10 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + @@ -1024,10 +1028,10 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + @@ -1035,10 +1039,10 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + @@ -1046,10 +1050,10 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + @@ -1057,10 +1061,10 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + @@ -1072,12 +1076,12 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - + - + @@ -1108,18 +1112,18 @@ $egrep -c '(vmx|svm)' /proc/cpuinfo - + - +

Table: CLI profile commands
Command	Mobile	Wearable	Syntax	Syntax
call	call	dial	Yes	No	No	call dial <number>

		status				call status
		sms				sms	send	Yes	No	No	sms send <number> <text>
							set status				set status	sms set <available \| unavailable>

mms_status	sms mms_status
location	location	set	Yes	Yes	Yes	location set <longitude> <latitude>
		location file <file-path>
		battery				battery	level	Yes	Yes	Yes	battery level <percent>
							battery status
earjack	earjack		set	Yes	No		No				earjack set <3wire \| 4wire \| off>
earjack	earjack	earjack status		Yes	No		No
usb	usb	set	Yes	Yes	Yes	usb set <on \| off>
usb	usb	usb status	Yes	Yes	Yes
rssi	rssi	set	Yes	No	No	rssi set <0~4>
rssi	rssi	rssi status	Yes	No	No
sdcard	sdcard	mount	Yes	No	No	sdcard mount <sdcard_ext4_[ 4 \| 8 \| 16 \| 32 ]G>
		sdcard status
		sensor				sensor	accelerometer	Yes	Yes	Yes	sensor accelerometer <x> <y> <z>
gyroscope	sensor gyroscope <x> <y> <z>
status	sensor status [sensor]		sensor status [sensor]
file	sensor file <sensor> <path>		sensor file <sensor> <path>

The Emulator provides various virtual H/W, media formats, codecs and OpenGL® ES acceleration. For better performance of OpenGL® ES support, the Tizen Emulator exploits the latest feature of graphic driver so that it is recommended to install latest vendor-provided graphic driver. The Emulator, however, has some limitations and differences compared to physical target devices.

The Emulator provides various virtual H/W, media formats, codecs and OpenGL® ES acceleration. For better performance of the OpenGL® ES support, the Tizen Emulator exploits the latest feature of the graphic driver, so always install the latest vendor-provided graphic driver. The Emulator, however, has some limitations and differences compared to physical target devices.

The following table lists the basic features supported in the Emulator.

Category	Subject	Subject	Physical target	Emulator
Skin	Skins are fitted to the screen resolution: +	Skins are fitted to the screen resolution: Mobile WVGA (480 x 800, default) qHD (540 x 960) HD (720 x 1280) - + Wearable 320 x 320 360 x 360 (default) 360 x 480 - + - 4 orientation modes are supported: + 4 orientation modes are supported: Portrait (default), landscape, reverse portrait, and reverse landscape @@ -1209,15 +1213,15 @@ $egrep -c '(vmx\|svm)' /proc/cpuinfo	Sound	AC97 device	Supported	Audio in: +	Audio in: - Make sure that the input volume of the microphone is enough to record your voice or songs on the host machine. + Make sure that the input volume of the microphone is enough to record your voice or songs on the host machine. On Windows® 7, inject the microphone into the host machine before starting the Emulator. - Audio out: + Audio out: - On Windows® 7, enable at least 1 audio out device before starting the Emulator. Make sure that the volume icon in the tray is not disabled. + On Windows® 7, enable at least 1 audio out device before starting the Emulator. Make sure that the volume icon in the tray is not disabled. While the Emulator is running, do not disable the audio out device, as it can lock the audio system of the guest platform.
Camera	Virtual camera device connecting a host machine's Webcam +	Virtual camera device connecting a host machine's Webcam Support: preview, capture, and record - Image format: YUYV, I420, and YV12 - Attributes: brightness and contrast + Image format: YUYV, I420, and YV12 + Attributes: brightness and contrast Resolution: 160 x 120, 176 x 144, 320 x 240, 352 x 288, and 640 x 480 - Video resolution: 1280 x 720 for the WVGA, 320 x 240 for the WQVGA, and 640 x 480 for the HVGA devices. - The supported video codecs are MPEG-4, H.263, H.264, VC-1 for both encoding and decoding. + Video resolution: 1280 x 720 for the WVGA, 320 x 240 for the WQVGA, and 640 x 480 for the HVGA devices. + The supported video codecs are MPEG-4, H.263, H.264, and VC-1 for both encoding and decoding.	Supported	While recording a video using the Emulator, an audio-video synchronization error can occur depending on your computer hardware and performance.
Not supported	Supported
Portability	Screen resolution	Bluetooth	Fully supported	Not supported
	Performance	Performance	CPU performance	Mobile CPU	Desktop CPU (with hardware virtualization)
			Category	Physical target	Physical target	Emulator
			Real device and driver	Virtual (VirtIO) device and driver
	Host keyboard and hardware key	Real device and driver	Light	Receives the actual ambient light value of the device.	Receives the virtual ambient light value through the Emulator Control Panel. - You can register an event handler for the light sensor and test it with the Emulator Control Panel. However, in order to test the screen brightness change, the brightness setting must be automatic in setting application. + You can register an event handler for the light sensor and test it with the Emulator Control Panel. However, in order to test the screen brightness change, the brightness setting must be automatic in the setting application.
	Ultraviolet	Receives the actual ultraviolet value of the device.	Receives the virtual actual ultraviolet value through the Emulator Control Panel. +	Receives the actual ultraviolet value of the device.	Receives the virtual actual ultraviolet value through the Emulator Control Panel.
	Not supported

Content

Using Multi-point Touch
Sharing directory
Sharing a Directory
Using a Webcam
Using Emulator in a Network
Using Network Features
Using Custom Skin Layout
Using EventCast
Emulator Start-up Options
Emulator Directory Structure
Using Emulator Start-up Options
Emulator Directory Structure

@@ -39,16 +39,17 @@

The Emulator features can be extended in many ways. With the Emulator, you can:

Using multi-point touch
Sharing directory
Using a webcam
Using Emulator in a Network
Using custom skin layout
Using EventCast
Emulator start-up options
Emulator directory structure
Use multi-point touch
Share a directory
Use a Webcam
Use network features
Use custom skin layout
Use EventCast
Use Emulator start-up options

You can also familiarize yourself with the Emulator directory structure.

To create a multi-point touch effect in the Emulator, press and hold the CTRL key (Command key in Mac OS® X), while mouse-clicking on the Emulator screen.

@@ -62,31 +63,42 @@

Figure: Adding a touch point

Adding a touch point

To move an existing point, press and hold the CTRL key (Command key in Mac OS® X), mouse-click an existing point, and move it to another location on the screen.

To move an existing point one by one, press and hold the CTRL key (Command key in Mac OS® X), mouse-click an existing point, and move it to another location on the screen.

Figure: Moving an existing point

Moving an existing point

To move all existing points together, press and hold the CTRL (Command in Mac OS® X) and SHIFT keys, mouse-click an existing point, and move it to another location on the screen.

+ +

Figure: Moving all existing points

Moving all existing points

+ +

To move 2 existing points symmetrically together, press and hold the CTRL (Command in Mac OS® X) and ALT keys, mouse-click an existing point, and move it to another location on the screen.

+ +

Figure: Symmetrically moving 2 existing points

Symmetrical moving the two existing points

+ +

To end the multi-point touch, release the CTRL key (Command key in Mac OS® X). The touched points on the Emulator screen are invalidated, and the next screen touch event is read as a new event, not part of the previous multi-point touch event.

Figure: Invalidating touched points

Invalidating touched points

You are able to share a directory between Emulator and your computer. The host machine's directory is shown as /mnt/host in the Emulator.

@@ -103,8 +115,7 @@ style="display: block; text-align: center; margin-left: auto; margin-right: auto

Start the Emulator.

Right-click the Emulator and select Control Panel .

Move to the Host Directory Sharing tab.

Mount/unmount the host machine directory. -

Mount or unmount the host machine directory.

@@ -214,64 +225,69 @@ Contrast

The Tizen Emulator provides two types of network backend, NAT-based TCP/IP communication and a bridged network. By default, NAT-based network is used. You can configure the type on Emulator Manager > Network Configuration. The Emulator is based on the QEMU virtual machine. "NAT" type exploits QEMU user networking (SLIRP) and "Bridge" type uses tap networking. For more information about networking, refer to QEMU Networking documentation.

The Tizen Emulator provides 2 types of network backend: NAT-based TCP/IP communication and a bridged network. By default, the NAT-based network is used. You can configure the type of the network backend in Emulator Manager > Network Configuration.

The Tizen Emulator provides three methods of configuration proxy. This can be configurable on Emulator Manager > Network Configuration.

The Emulator is based on the QEMU virtual machine. The NAT type exploits the QEMU user networking (SLIRP) and the bridge type uses tap networking. For more information about networking, see QEMU Networking documentation.

+ +

+ +

The Tizen Emulator provides 3 methods of proxy configuration. They can be configured in Emulator Manager > Network Configuration:

No proxy: does not use proxy configuration.
Use host proxy: sets the same proxy value that host uses.
Use manual proxy: sets proxy value manually different from host.
No proxy: does not use the proxy configuration.
Use host proxy: sets the same proxy value that the host uses.
Use manual proxy: sets manually a proxy value different from the host.

- + +

Localhost
127.0.0.0/8
10.0.0.0/16

The automatic proxy configuration is not supported due to license issues.

Note
The following preallocated addresses are not supported as a manual proxy: - - Localhost - 127.0.0.0/8 - 10.0.0.0/16 - - The automatic proxy configuration is not supported, due to license issues.

Note

The following preallocated addresses are not supported as a manual proxy: -

Localhost
127.0.0.0/8
10.0.0.0/16

The automatic proxy configuration is not supported, due to license issues.

NAT is a default networking backend and has a better usability than other backends. The Emulator supports TCP, UDP, and "ping" within a guest. However, raw socket is not supported.

The Emulator virtually provides a LAN(Local Area Network), such as the following:

NAT is the default networking backend and has better usability than other backends. The Emulator supports TCP, UDP, and ping within a guest. However, a raw socket is not supported.

The Emulator virtually provides a LAN (Local Area Network), such as the following:

10.0.2.2: Gateway, host machine
10.0.2.3: DNS (you can specify the Emulator to use the host DNS IP when the Emulator starts)
10.0.2.15: Emulator's IP
10.0.2.15: Emulator IP

Figure: Emulator NAT network architecture

Emulator network architecture

Emulator NAT network architecture

Inbound connection from external to emulator fails in the NAT backed. If you want to permit inbound connection and test, you should forward port by using one of following methods:

Inbound connections from external to the Emulator fail in the NAT backend. If you want to permit inbound connections and test, you must forward the port by using one of following methods:

ECP(Emulator Control Panel)

You can add port forwarding by using ECP. In ECP > Device Manager > Network tab > User Network Information, click Add port-forwarding button and enter ports to forward

SDB(Smart Development Bridge)

SDB provides port forwarding as command. For more information about SDB command, refer to sdb forward.

Xml on boot

You can forward the port on booting the Emulator by modifying QEMU redirection option.

The QEMU redirection option can be appended in the <TIZEN_SDK_DATA>/emulator/vms/<image name>/vm_config.xml file with the following appending command:

ECP (Emulator Control Panel) +
You can add port forwarding by using the ECP. In the ECP > Device Manager > Network tab, under User Network Information, click Add port-forwarding and enter the ports to forward.
SDB (Smart Development Bridge) +
The SDB provides port forwarding as a command. For more information about the SDB command, see sdb forward.

Xml on boot +

You can forward the port on booting the Emulator by modifying the QEMU redirection option. The QEMU redirection option can be appended in the <TIZEN_SDK_DATA>/emulator/vms/<image name>/vm_config.xml file with the following appending command:

-redir <PROTOCOL>:<HOST_PORT>:10.0.2.15:<GUEST_PORT>

Note that <PROTOCOL> supports only udp and tcp in the <advancedOptions> section:

Note that <PROTOCOL> only supports udp and tcp in the <advancedOptions> section:

<usability>
    <logging>
       <level>NONE</level>
@@ -285,28 +301,32 @@ Contrast

 
 Set up the server on A, listening to 10.0.2.15:<ServerPort>.
 
-On A, append the -redir tcp:<B's localPort>:10.0.2.15:<A's serverPort> redirection option in the vm_config.xml file.
+On A, append the -redir tcp:<B's localPort>:10.0.2.15:<A's serverPort> redirection option in the vm_config.xml file. 
 
 On B, let the client connect to 10.0.2.2:<B's localPort>.
-
-For more information, see How to use Network.
+

For more information, see Connection from Host OS to Guest OS by option -redir.

- + +

The bridge backend requires a dedicated IP for the Emulator and you can communicate to an external without any port forwarding. If you want to use one of the following, you can try the bridge backend:

Bridge backend requires a dedicated IP for emulator and you can communicate to external without any port forwarding. If you want one of followings, you can try the bridge backend.

You want to permit inbound connection with no port forwarding.
Your application should send and receive broadcast/multicast packet. e.g. DLNA(Digital Living Network Alliance) application.
You want to use firewall-free IP for emulator
High performance of network
You want to permit an inbound connection with no port forwarding.
Your application must send and receive broadcast/multicast packets, for example a DLNA (Digital Living Network Alliance) application.
You want to use a firewall-free IP for the Emulator.
You want high performance from the network.

You can configure the Emulator's IP on Emulator Manager > Network configuration. If you have DHCP server on network, you can configure the Emulator's IP by using DHCP. If not, you should configure the IP manually.

+ +

You can configure the Emulator IP in Emulator Manager > Network Configuration. If you have a DHCP server on the network, you can configure the Emulator IP using DHCP. If not, you must configure the IP manually.

Figure: Emulator bridged network architecture

+ +

Emulator bridged network architecture

+ + -

Emulator network architecture

@@ -318,35 +338,35 @@ Contrast
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <dbi version="2.0"/> <rotations> -  +  <rotation name="Portrait"> -  +  <display id="0">"> -  +  <region left="35" top="86" width="480" height="800"/> </display> <imageList> -  +  <mainImage>default_0.png</mainImage>"> -  +  <keyPressedImage>default_0_p.png</keyPressedImage> </imageList> <keyMapList> - <keyMap>  -  + <keyMap>  +  <region left="238" top="887" width="74" height="74"/> <eventInfo> - <keyCode>139</keyCode>  - <keyName>HOME</keyName>  + <keyCode>139</keyCode>  + <keyName>HOME</keyName>  </eventInfo> -  +  <tooltip>Home</tooltip> </keyMap> </keyMapList> </rotation> </rotations> <hover> -  +  <color B="255" G="255" R="255" /> </hover> </EmulatorUI> @@ -364,7 +384,7 @@ resolution.height=800

Create a new skin folder in the <TIZEN_SDK>/tools/emulator/skins/ folder.
In the skin folder, define the contents of the default.dbi and info.ini files and include the required skin image files.
Select the skin name in the Emulator Manager. You can also use the Emulator start-up options in the command line.
+
Select the skin name in the Emulator Manager. You can also use the Emulator start-up options in the command line.

The image defined in your modified XML meta file is displayed when the Emulator is launched.

@@ -380,13 +400,14 @@ resolution.height=800 +

The Emulator supports event injection using ECP (Emulator Control Panel). However, injecting sensor events using ECP is less intuitive and convenient. When you are injecting events, touching the Emulator screen simultaneously is impossible. EventCast enables you to inject sensor and touch events more intuitively using a real target device.

The following figure illustrated how the EventCast application in the target device gathers events and passes them to the Emulator controller, which converts and hands them over to the Tizen platform. This is convenient in case you do not have a Tizen mobile device.

Figure: EventCast architecture

eventcast_architecture

EventCast provides the following features:

Click Show Event. You can now inject a sensor or touch value to the Emulator.

+ +

You can launch the Emulator with specific settings by defining start-up options in the command line:

 # ./emulator-x86 --skin-args <skin options> --qemu-args <QEMU options>
@@ -661,7 +684,6 @@ If this option is true<
 Enables a rotary device.
 
 
-
 
 Brightness
 -device maru-brightness
@@ -742,6 +764,7 @@ maru-brightness -device virtio-vmodem-pci -device maru-camera -device virtio-tou
 	
 
 
+
 Emulator Directory Structure
     
 The following table describes the content of the Emulator directory, located in the <TIZEN_SDK>/tools/emulator folder.
@@ -776,7 +799,7 @@ maru-brightness -device virtio-vmodem-pci -device maru-camera -device virtio-tou
 			
 				bin/emulator-manager.jar
 				Emulator manager jar, which can also launch the
-					Emulator with the Emulator
+					Emulator with the Emulator
 						Manager.
 				
 			
@@ -956,7 +979,7 @@ maru-brightness -device virtio-vmodem-pci -device maru-camera -device virtio-tou
 	
     
        <image name>/vm_config.xml	
-       Hardware configuration (for more information, see Virtual Machine)
+       Hardware configuration (for more information, see Virtual Machine)
 	
 	
        <image name>/${USER}.lock	
@@ -970,8 +993,6 @@ maru-brightness -device virtio-vmodem-pci -device maru-camera -device virtio-tou
  
 
  
-
- 
 
 
 
@@ -995,4 +1016,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/event_injec.htm b/org.tizen.devtools/html/common_tools/event_injec.htm
index 31cff3b..d508719 100644
--- a/org.tizen.devtools/html/common_tools/event_injec.htm
+++ b/org.tizen.devtools/html/common_tools/event_injec.htm
@@ -36,7 +36,7 @@
 
 Event Injector
 
- In the Emulator Control Panel(ECP), you can inject various types of events.
+In the Emulator Control Panel (ECP), you can inject various types of events.
 
 Providing Device Data
 
@@ -302,4 +302,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
index 147cfd9..94bcc82 100644
--- a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
+++ b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		  
+		   
 	
 	
 		Content
@@ -26,11 +26,10 @@
 			Connection Explorer
 			Build and Run
 			Debug
-			Content Assist
+			Content Assist
 			Project Management
 			Editor
 			Refactor
-			Web UI Builder
 			Native IDE
 			Web IDE
 			Dynamic Analyzer
@@ -43,9 +42,9 @@
 
 The following symbols are used to define the supported operating system for each shortcut: 
 
-: Windows®
-: Ubuntu
-: Mac OS®
+: Windows®
+: Ubuntu
+: Mac OS®
 
 
   Connection Explorer
@@ -188,7 +187,7 @@
 
 
 
-Content Assist
+Content Assist
   @@ -523,38 +522,6 @@
 
     
   

 
 
-Web UI Builder
-  
-    -  -  -
-	
-		
-		
-		
-	
-	
-		
-		
-		
-	
-
-	
-		
-		
-		
-	
-
-	
-		
-		
-		
-	
-
-
-


Command Support Shortcut
Toggle editor   Ctrl+Tab
Toggle editor reverse   Shift+Ctrl+Tab
Toggle page designer mode   Ctrl+'
-
 Native IDE
   diff --git a/org.tizen.devtools/html/common_tools/log_view.htm b/org.tizen.devtools/html/common_tools/log_view.htm
index feb75cf..4ab0452 100644
--- a/org.tizen.devtools/html/common_tools/log_view.htm
+++ b/org.tizen.devtools/html/common_tools/log_view.htm
@@ -16,12 +16,12 @@
 
  
 
- 
+ 
 	
 
 
 	
-		  
+		   
 	
 	
 Log View
diff --git a/org.tizen.devtools/html/common_tools/project_explorer.htm b/org.tizen.devtools/html/common_tools/project_explorer.htm
index 03aaaad..28363c8 100644
--- a/org.tizen.devtools/html/common_tools/project_explorer.htm
+++ b/org.tizen.devtools/html/common_tools/project_explorer.htm
@@ -15,22 +15,22 @@
 
  
 
- 
+ 
 	
 
 
 	
-		  
+		   
 	
 	
 Project Explorer View
-The Project Explorer view provides a hierarchical view of all resources in the workspace. You can open files for editing or select resources for operations, such as building, packaging, signing, or validating a widget or an application.
+The Project Explorer view provides a hierarchical view of all resources in the workspace. You can open files for editing or select resources for operations, such as building, packaging, signing, or validating an application.
 
 The following figure shows and example of the Project Explorer view with a Web application.
 
 Figure: Project Explorer view
 
-
 
diff --git a/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm b/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
index 3f8d006..14c79e5 100644
--- a/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
+++ b/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
@@ -16,9 +16,9 @@
 
  
 
- 
+ 
 	
-		  
+		   
 	
 	
 	
diff --git a/org.tizen.devtools/html/common_tools/smart_launch.htm b/org.tizen.devtools/html/common_tools/smart_launch.htm
index 9d2e72f..c30e079 100644
--- a/org.tizen.devtools/html/common_tools/smart_launch.htm
+++ b/org.tizen.devtools/html/common_tools/smart_launch.htm
@@ -14,12 +14,12 @@
   
  
 
- 
+ 
 	
 
 
 	
-		  
+		   
 	
 	
   Smart Launch 
@@ -27,11 +27,11 @@
   
   To use Smart Launch, click the icon on the Tizen IDE toolbar.
   Figure: Smart Launch 
-   
+   
 
   If there is a launch history in the IDE, a list of previous project launch settings is displayed.
   Figure: Launch history 
-   
+   
   
   To set a new launch configuration, select New Configuration or use the Shift+Alt+F12 key (option+F12 key in Mac OS® X) combination.
   The New Launch Configuration window:
@@ -41,12 +41,12 @@
   Launches your project without a configuration if a profile has been defined.
   
   Figure: New smart launch configuration 
-   
+   
   
   To view the current launch information, including the configuration name and device serial number, use the  Shift+Alt+[ key (option+[ key in Mac OS® X) or Shift+Alt+] key (option+] key in Mac OS® X) combinations. 
   
   Figure: Latest launch information 
-  
+  
  
 
 
diff --git a/org.tizen.devtools/html/cover_page.htm b/org.tizen.devtools/html/cover_page.htm
index a33fa39..4238fdf 100644
--- a/org.tizen.devtools/html/cover_page.htm
+++ b/org.tizen.devtools/html/cover_page.htm
@@ -16,12 +16,12 @@
 
 
 
-
+
 
 
 
     
-          
+           
     
 	
   Tizen

diff --git a/org.tizen.devtools/html/css/styles.css b/org.tizen.devtools/html/css/styles.css
index 52c0ab9..4c8f5a8 100644
--- a/org.tizen.devtools/html/css/styles.css
+++ b/org.tizen.devtools/html/css/styles.css
@@ -217,14 +217,12 @@ p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep u
 	color: #ffffff;
 }
 
-#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
 #toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
 #toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
 #main {width: 75%; height: 90%;}
 #container {width:100%;}
 #container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
 body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #navigation {width: auto;}
 body.no-toc #toc-navigation {width: auto;}
 body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
 body.no-toc #profile {float: right;right: -32px;}
@@ -252,10 +250,10 @@ ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 7
 	ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
 	ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
 
-	ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-	ul.devicespecifications li div.devicespec-tit span a.bt-arr 	{display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-	ul.devicespecifications li div.devicespec-tit span a.bt-arr em 	{display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-	ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+	ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+	ul.devicespecifications li div.devicespec-tit > span a.bt-arr 	{display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+	ul.devicespecifications li div.devicespec-tit > span a.bt-arr em 	{display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+	ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
 
 	ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
 	ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
diff --git a/org.tizen.devtools/html/images/animator.png b/org.tizen.devtools/html/images/animator.png
deleted file mode 100644
index 7c10db8..0000000
Binary files a/org.tizen.devtools/html/images/animator.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_GroupName1.png b/org.tizen.devtools/html/images/animator_GroupName1.png
deleted file mode 100644
index 785b1f2..0000000
Binary files a/org.tizen.devtools/html/images/animator_GroupName1.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_custom_add.png b/org.tizen.devtools/html/images/animator_custom_add.png
deleted file mode 100644
index c752063..0000000
Binary files a/org.tizen.devtools/html/images/animator_custom_add.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_custom_confirm.png b/org.tizen.devtools/html/images/animator_custom_confirm.png
deleted file mode 100644
index 693e4ad..0000000
Binary files a/org.tizen.devtools/html/images/animator_custom_confirm.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_custom_create.png b/org.tizen.devtools/html/images/animator_custom_create.png
deleted file mode 100644
index 59ed0fb..0000000
Binary files a/org.tizen.devtools/html/images/animator_custom_create.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_custom_data.png b/org.tizen.devtools/html/images/animator_custom_data.png
deleted file mode 100644
index 0ebe9b1..0000000
Binary files a/org.tizen.devtools/html/images/animator_custom_data.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_custom_delete.png b/org.tizen.devtools/html/images/animator_custom_delete.png
deleted file mode 100644
index f52d910..0000000
Binary files a/org.tizen.devtools/html/images/animator_custom_delete.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_editor_area.png b/org.tizen.devtools/html/images/animator_editor_area.png
deleted file mode 100644
index 078da6f..0000000
Binary files a/org.tizen.devtools/html/images/animator_editor_area.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_outline_add_frame_normal.png b/org.tizen.devtools/html/images/animator_outline_add_frame_normal.png
deleted file mode 100644
index 2fd09cc..0000000
Binary files a/org.tizen.devtools/html/images/animator_outline_add_frame_normal.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_outline_lock_off.png b/org.tizen.devtools/html/images/animator_outline_lock_off.png
deleted file mode 100644
index 674aa97..0000000
Binary files a/org.tizen.devtools/html/images/animator_outline_lock_off.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_outline_view_off.png b/org.tizen.devtools/html/images/animator_outline_view_off.png
deleted file mode 100644
index 84fb063..0000000
Binary files a/org.tizen.devtools/html/images/animator_outline_view_off.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_tab.png b/org.tizen.devtools/html/images/animator_tab.png
deleted file mode 100644
index edb49d6..0000000
Binary files a/org.tizen.devtools/html/images/animator_tab.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline.png b/org.tizen.devtools/html/images/animator_timeline.png
deleted file mode 100644
index 7f61517..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_WidgetList.png b/org.tizen.devtools/html/images/animator_timeline_WidgetList.png
deleted file mode 100644
index daa634a..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_WidgetList.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame1.png b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame1.png
deleted file mode 100644
index 656e7db..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame1.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame2.png b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame2.png
deleted file mode 100644
index ee382b4..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame2.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame3.png b/org.tizen.devtools/html/images/animator_timeline_addKeyFrame3.png
deleted file mode 100644
index f95f66c..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_addKeyFrame3.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame1.png b/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame1.png
deleted file mode 100644
index 7ce4ec7..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame1.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame3.png b/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame3.png
deleted file mode 100644
index 9a992fe..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_addPreKeyFrame3.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_animationGroupMenu.png b/org.tizen.devtools/html/images/animator_timeline_animationGroupMenu.png
deleted file mode 100644
index b79a526..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_animationGroupMenu.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_animationState.png b/org.tizen.devtools/html/images/animator_timeline_animationState.png
deleted file mode 100644
index 00cac8b..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_animationState.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_copy.png b/org.tizen.devtools/html/images/animator_timeline_copy.png
deleted file mode 100644
index a064106..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_copy.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_delete.png b/org.tizen.devtools/html/images/animator_timeline_delete.png
deleted file mode 100644
index 9da273b..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_delete.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_ease.png b/org.tizen.devtools/html/images/animator_timeline_ease.png
deleted file mode 100644
index dcd9aa0..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_ease.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_keyframe.png b/org.tizen.devtools/html/images/animator_timeline_keyframe.png
deleted file mode 100644
index 1834b2a..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_keyframe.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_keyframeUnit.png b/org.tizen.devtools/html/images/animator_timeline_keyframeUnit.png
deleted file mode 100644
index 977380a..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_keyframeUnit.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_newAnimationGroup.png b/org.tizen.devtools/html/images/animator_timeline_newAnimationGroup.png
deleted file mode 100644
index a4ceadd..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_newAnimationGroup.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_outline.png b/org.tizen.devtools/html/images/animator_timeline_outline.png
deleted file mode 100644
index d2348d0..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_outline.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_paste.png b/org.tizen.devtools/html/images/animator_timeline_paste.png
deleted file mode 100644
index 9f9f032..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_paste.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_preview.png b/org.tizen.devtools/html/images/animator_timeline_preview.png
deleted file mode 100644
index 4553136..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_preview.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_ruler.png b/org.tizen.devtools/html/images/animator_timeline_ruler.png
deleted file mode 100644
index 98ecb64..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_ruler.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_timeBar.png b/org.tizen.devtools/html/images/animator_timeline_timeBar.png
deleted file mode 100644
index bd6ea0f..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_timeBar.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_timeTextBox.png b/org.tizen.devtools/html/images/animator_timeline_timeTextBox.png
deleted file mode 100644
index 44b0496..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_timeTextBox.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_timeline.png b/org.tizen.devtools/html/images/animator_timeline_timeline.png
deleted file mode 100644
index 4539918..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_timeline.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_toolbar.png b/org.tizen.devtools/html/images/animator_timeline_toolbar.png
deleted file mode 100644
index ff8d13e..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_toolbar.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_timeline_zooml.png b/org.tizen.devtools/html/images/animator_timeline_zooml.png
deleted file mode 100644
index d84515c..0000000
Binary files a/org.tizen.devtools/html/images/animator_timeline_zooml.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_backward_normal.png b/org.tizen.devtools/html/images/animator_toolbar_backward_normal.png
deleted file mode 100644
index 41cc06b..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_backward_normal.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_dropdown_normal.png b/org.tizen.devtools/html/images/animator_toolbar_dropdown_normal.png
deleted file mode 100644
index 384661e..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_dropdown_normal.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_dropdown_predefined_keyframe.png b/org.tizen.devtools/html/images/animator_toolbar_dropdown_predefined_keyframe.png
deleted file mode 100644
index 48e3397..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_dropdown_predefined_keyframe.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_ease_inout.png b/org.tizen.devtools/html/images/animator_toolbar_ease_inout.png
deleted file mode 100644
index 4319396..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_ease_inout.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_filter_normal.png b/org.tizen.devtools/html/images/animator_toolbar_filter_normal.png
deleted file mode 100644
index fb8555b..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_filter_normal.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_forward_normal.png b/org.tizen.devtools/html/images/animator_toolbar_forward_normal.png
deleted file mode 100644
index 259d650..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_forward_normal.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_play_normal.png b/org.tizen.devtools/html/images/animator_toolbar_play_normal.png
deleted file mode 100644
index 06c2dd9..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_play_normal.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_repeat_normal.png b/org.tizen.devtools/html/images/animator_toolbar_repeat_normal.png
deleted file mode 100644
index 81d0da9..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_repeat_normal.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/animator_toolbar_stop.png b/org.tizen.devtools/html/images/animator_toolbar_stop.png
deleted file mode 100644
index 297ac88..0000000
Binary files a/org.tizen.devtools/html/images/animator_toolbar_stop.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/binding_info_designer.png b/org.tizen.devtools/html/images/binding_info_designer.png
deleted file mode 100644
index f178656..0000000
Binary files a/org.tizen.devtools/html/images/binding_info_designer.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/binding_info_panel.png b/org.tizen.devtools/html/images/binding_info_panel.png
deleted file mode 100644
index e211811..0000000
Binary files a/org.tizen.devtools/html/images/binding_info_panel.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/binding_info_toggle.png b/org.tizen.devtools/html/images/binding_info_toggle.png
deleted file mode 100644
index feb5b82..0000000
Binary files a/org.tizen.devtools/html/images/binding_info_toggle.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/binding_info_toggle_delete.png b/org.tizen.devtools/html/images/binding_info_toggle_delete.png
deleted file mode 100644
index 407061c..0000000
Binary files a/org.tizen.devtools/html/images/binding_info_toggle_delete.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/binding_link.png b/org.tizen.devtools/html/images/binding_link.png
deleted file mode 100644
index 820059e..0000000
Binary files a/org.tizen.devtools/html/images/binding_link.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/css_layer1.png b/org.tizen.devtools/html/images/css_layer1.png
deleted file mode 100644
index 2b1bed8..0000000
Binary files a/org.tizen.devtools/html/images/css_layer1.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/css_layer2.png b/org.tizen.devtools/html/images/css_layer2.png
deleted file mode 100644
index 88270e3..0000000
Binary files a/org.tizen.devtools/html/images/css_layer2.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/css_layer3.png b/org.tizen.devtools/html/images/css_layer3.png
deleted file mode 100644
index a456920..0000000
Binary files a/org.tizen.devtools/html/images/css_layer3.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/css_layers.png b/org.tizen.devtools/html/images/css_layers.png
deleted file mode 100644
index b4e49b8..0000000
Binary files a/org.tizen.devtools/html/images/css_layers.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/css_preview.png b/org.tizen.devtools/html/images/css_preview.png
index ad0facd..d0d9bd7 100644
Binary files a/org.tizen.devtools/html/images/css_preview.png and b/org.tizen.devtools/html/images/css_preview.png differ
diff --git a/org.tizen.devtools/html/images/data_model_add.png b/org.tizen.devtools/html/images/data_model_add.png
deleted file mode 100644
index 996189f..0000000
Binary files a/org.tizen.devtools/html/images/data_model_add.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_clear.png b/org.tizen.devtools/html/images/data_model_clear.png
deleted file mode 100644
index 9ed325c..0000000
Binary files a/org.tizen.devtools/html/images/data_model_clear.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_collapse.png b/org.tizen.devtools/html/images/data_model_collapse.png
deleted file mode 100644
index 4da7cfd..0000000
Binary files a/org.tizen.devtools/html/images/data_model_collapse.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_compacted.png b/org.tizen.devtools/html/images/data_model_compacted.png
deleted file mode 100644
index 2ae03e8..0000000
Binary files a/org.tizen.devtools/html/images/data_model_compacted.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_create.png b/org.tizen.devtools/html/images/data_model_create.png
deleted file mode 100644
index 2a983a3..0000000
Binary files a/org.tizen.devtools/html/images/data_model_create.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_delete.png b/org.tizen.devtools/html/images/data_model_delete.png
deleted file mode 100644
index c1b2c24..0000000
Binary files a/org.tizen.devtools/html/images/data_model_delete.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_down.png b/org.tizen.devtools/html/images/data_model_down.png
deleted file mode 100644
index 5cfbfa7..0000000
Binary files a/org.tizen.devtools/html/images/data_model_down.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_expand.png b/org.tizen.devtools/html/images/data_model_expand.png
deleted file mode 100644
index f43c9f4..0000000
Binary files a/org.tizen.devtools/html/images/data_model_expand.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_formatted.png b/org.tizen.devtools/html/images/data_model_formatted.png
deleted file mode 100644
index 1a0e8d4..0000000
Binary files a/org.tizen.devtools/html/images/data_model_formatted.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_item.png b/org.tizen.devtools/html/images/data_model_item.png
deleted file mode 100644
index 20c7a05..0000000
Binary files a/org.tizen.devtools/html/images/data_model_item.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_open.png b/org.tizen.devtools/html/images/data_model_open.png
deleted file mode 100644
index 06caecc..0000000
Binary files a/org.tizen.devtools/html/images/data_model_open.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_panel.png b/org.tizen.devtools/html/images/data_model_panel.png
deleted file mode 100644
index 53e2cd7..0000000
Binary files a/org.tizen.devtools/html/images/data_model_panel.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_reload.png b/org.tizen.devtools/html/images/data_model_reload.png
deleted file mode 100644
index 64fd456..0000000
Binary files a/org.tizen.devtools/html/images/data_model_reload.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_remove.png b/org.tizen.devtools/html/images/data_model_remove.png
deleted file mode 100644
index fbd8e22..0000000
Binary files a/org.tizen.devtools/html/images/data_model_remove.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_remove_all.png b/org.tizen.devtools/html/images/data_model_remove_all.png
deleted file mode 100644
index 58fa3f9..0000000
Binary files a/org.tizen.devtools/html/images/data_model_remove_all.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_model_up.png b/org.tizen.devtools/html/images/data_model_up.png
deleted file mode 100644
index 6971be6..0000000
Binary files a/org.tizen.devtools/html/images/data_model_up.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source1.png b/org.tizen.devtools/html/images/data_source1.png
deleted file mode 100644
index a7a8254..0000000
Binary files a/org.tizen.devtools/html/images/data_source1.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source2.png b/org.tizen.devtools/html/images/data_source2.png
deleted file mode 100644
index c94fff0..0000000
Binary files a/org.tizen.devtools/html/images/data_source2.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_api.png b/org.tizen.devtools/html/images/data_source_api.png
deleted file mode 100644
index 0ee84b7..0000000
Binary files a/org.tizen.devtools/html/images/data_source_api.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_create.png b/org.tizen.devtools/html/images/data_source_create.png
deleted file mode 100644
index ea2c2f5..0000000
Binary files a/org.tizen.devtools/html/images/data_source_create.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_delete.png b/org.tizen.devtools/html/images/data_source_delete.png
deleted file mode 100644
index 319143f..0000000
Binary files a/org.tizen.devtools/html/images/data_source_delete.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_dialog.png b/org.tizen.devtools/html/images/data_source_dialog.png
deleted file mode 100644
index cc5091b..0000000
Binary files a/org.tizen.devtools/html/images/data_source_dialog.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_empty.png b/org.tizen.devtools/html/images/data_source_empty.png
deleted file mode 100644
index 02774ec..0000000
Binary files a/org.tizen.devtools/html/images/data_source_empty.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_file.png b/org.tizen.devtools/html/images/data_source_file.png
deleted file mode 100644
index 4fca812..0000000
Binary files a/org.tizen.devtools/html/images/data_source_file.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_panel.png b/org.tizen.devtools/html/images/data_source_panel.png
deleted file mode 100644
index e567a68..0000000
Binary files a/org.tizen.devtools/html/images/data_source_panel.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_remote.png b/org.tizen.devtools/html/images/data_source_remote.png
deleted file mode 100644
index f7c3c9b..0000000
Binary files a/org.tizen.devtools/html/images/data_source_remote.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_set.png b/org.tizen.devtools/html/images/data_source_set.png
deleted file mode 100644
index a855089..0000000
Binary files a/org.tizen.devtools/html/images/data_source_set.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/data_source_static.png b/org.tizen.devtools/html/images/data_source_static.png
deleted file mode 100644
index a9bee48..0000000
Binary files a/org.tizen.devtools/html/images/data_source_static.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/databinding_calendar.png b/org.tizen.devtools/html/images/databinding_calendar.png
deleted file mode 100644
index 7552515..0000000
Binary files a/org.tizen.devtools/html/images/databinding_calendar.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/databinding_call_history.png b/org.tizen.devtools/html/images/databinding_call_history.png
deleted file mode 100644
index fd533e4..0000000
Binary files a/org.tizen.devtools/html/images/databinding_call_history.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/databinding_contact.png b/org.tizen.devtools/html/images/databinding_contact.png
deleted file mode 100644
index 6b24f3f..0000000
Binary files a/org.tizen.devtools/html/images/databinding_contact.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/databinding_file_system.png b/org.tizen.devtools/html/images/databinding_file_system.png
deleted file mode 100644
index 0667154..0000000
Binary files a/org.tizen.devtools/html/images/databinding_file_system.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/databinding_remote.png b/org.tizen.devtools/html/images/databinding_remote.png
deleted file mode 100644
index 1706664..0000000
Binary files a/org.tizen.devtools/html/images/databinding_remote.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/databinding_static.png b/org.tizen.devtools/html/images/databinding_static.png
deleted file mode 100644
index 5e3bba9..0000000
Binary files a/org.tizen.devtools/html/images/databinding_static.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/databinding_view.png b/org.tizen.devtools/html/images/databinding_view.png
deleted file mode 100644
index f3598af..0000000
Binary files a/org.tizen.devtools/html/images/databinding_view.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/designer_areasize.png b/org.tizen.devtools/html/images/designer_areasize.png
deleted file mode 100644
index a779f85..0000000
Binary files a/org.tizen.devtools/html/images/designer_areasize.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/designer_max.png b/org.tizen.devtools/html/images/designer_max.png
deleted file mode 100644
index 3fe0848..0000000
Binary files a/org.tizen.devtools/html/images/designer_max.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/designer_next.png b/org.tizen.devtools/html/images/designer_next.png
deleted file mode 100644
index 57d6648..0000000
Binary files a/org.tizen.devtools/html/images/designer_next.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/designer_previous.png b/org.tizen.devtools/html/images/designer_previous.png
deleted file mode 100644
index 6f02ea5..0000000
Binary files a/org.tizen.devtools/html/images/designer_previous.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/designer_resolution.png b/org.tizen.devtools/html/images/designer_resolution.png
deleted file mode 100644
index 1ec808d..0000000
Binary files a/org.tizen.devtools/html/images/designer_resolution.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/designer_zoomin.png b/org.tizen.devtools/html/images/designer_zoomin.png
deleted file mode 100644
index 4037d41..0000000
Binary files a/org.tizen.devtools/html/images/designer_zoomin.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/designer_zoomout.png b/org.tizen.devtools/html/images/designer_zoomout.png
deleted file mode 100644
index 2fdc457..0000000
Binary files a/org.tizen.devtools/html/images/designer_zoomout.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/device_change.png b/org.tizen.devtools/html/images/device_change.png
deleted file mode 100644
index 65afaa6..0000000
Binary files a/org.tizen.devtools/html/images/device_change.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/device_select.png b/org.tizen.devtools/html/images/device_select.png
deleted file mode 100644
index 1bc02a9..0000000
Binary files a/org.tizen.devtools/html/images/device_select.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/devices.png b/org.tizen.devtools/html/images/devices.png
deleted file mode 100644
index cd72bd7..0000000
Binary files a/org.tizen.devtools/html/images/devices.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/devices_page.png b/org.tizen.devtools/html/images/devices_page.png
deleted file mode 100644
index de58169..0000000
Binary files a/org.tizen.devtools/html/images/devices_page.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/editor_area.png b/org.tizen.devtools/html/images/editor_area.png
deleted file mode 100644
index 7fe1f8c..0000000
Binary files a/org.tizen.devtools/html/images/editor_area.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/emulator_controls_mobile.png b/org.tizen.devtools/html/images/emulator_controls_mobile.png
deleted file mode 100644
index f8a0fef..0000000
Binary files a/org.tizen.devtools/html/images/emulator_controls_mobile.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/emulator_controls_wearable.png b/org.tizen.devtools/html/images/emulator_controls_wearable.png
deleted file mode 100644
index a20765c..0000000
Binary files a/org.tizen.devtools/html/images/emulator_controls_wearable.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/emulator_general_mobile.png b/org.tizen.devtools/html/images/emulator_general_mobile.png
new file mode 100644
index 0000000..4044b69
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_general_mobile.png differ
diff --git a/org.tizen.devtools/html/images/emulator_general_wearable.png b/org.tizen.devtools/html/images/emulator_general_wearable.png
new file mode 100644
index 0000000..be95936
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_general_wearable.png differ
diff --git a/org.tizen.devtools/html/images/emulator_profile_mobile.png b/org.tizen.devtools/html/images/emulator_profile_mobile.png
new file mode 100644
index 0000000..e10b92e
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_profile_mobile.png differ
diff --git a/org.tizen.devtools/html/images/emulator_profile_wearable.png b/org.tizen.devtools/html/images/emulator_profile_wearable.png
new file mode 100644
index 0000000..c594f6f
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_profile_wearable.png differ
diff --git a/org.tizen.devtools/html/images/emulator_profile_wearable_o.png b/org.tizen.devtools/html/images/emulator_profile_wearable_o.png
new file mode 100644
index 0000000..ed4fec7
Binary files /dev/null and b/org.tizen.devtools/html/images/emulator_profile_wearable_o.png differ
diff --git a/org.tizen.devtools/html/images/multitouch_move.png b/org.tizen.devtools/html/images/multitouch_move.png
deleted file mode 100644
index 35d0f20..0000000
Binary files a/org.tizen.devtools/html/images/multitouch_move.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/multitouch_move1.png b/org.tizen.devtools/html/images/multitouch_move1.png
new file mode 100644
index 0000000..2b9983d
Binary files /dev/null and b/org.tizen.devtools/html/images/multitouch_move1.png differ
diff --git a/org.tizen.devtools/html/images/multitouch_move2.png b/org.tizen.devtools/html/images/multitouch_move2.png
new file mode 100644
index 0000000..46895d3
Binary files /dev/null and b/org.tizen.devtools/html/images/multitouch_move2.png differ
diff --git a/org.tizen.devtools/html/images/multitouch_move3.png b/org.tizen.devtools/html/images/multitouch_move3.png
new file mode 100644
index 0000000..74c15b2
Binary files /dev/null and b/org.tizen.devtools/html/images/multitouch_move3.png differ
diff --git a/org.tizen.devtools/html/images/mw_icon_optional.png b/org.tizen.devtools/html/images/mw_icon_optional.png
deleted file mode 100644
index 4fbf95b..0000000
Binary files a/org.tizen.devtools/html/images/mw_icon_optional.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/n_division.png b/org.tizen.devtools/html/images/n_division.png
index df38a99..d687bc5 100644
Binary files a/org.tizen.devtools/html/images/n_division.png and b/org.tizen.devtools/html/images/n_division.png differ
diff --git a/org.tizen.devtools/html/images/n_fold.png b/org.tizen.devtools/html/images/n_fold.png
deleted file mode 100644
index 6336532..0000000
Binary files a/org.tizen.devtools/html/images/n_fold.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/native_application_wizard.png b/org.tizen.devtools/html/images/native_application_wizard.png
new file mode 100644
index 0000000..45d3341
Binary files /dev/null and b/org.tizen.devtools/html/images/native_application_wizard.png differ
diff --git a/org.tizen.devtools/html/images/navigation_001.png b/org.tizen.devtools/html/images/navigation_001.png
deleted file mode 100644
index 8e344e1..0000000
Binary files a/org.tizen.devtools/html/images/navigation_001.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/navigation_002.png b/org.tizen.devtools/html/images/navigation_002.png
deleted file mode 100644
index c86700d..0000000
Binary files a/org.tizen.devtools/html/images/navigation_002.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/navigation_003.png b/org.tizen.devtools/html/images/navigation_003.png
deleted file mode 100644
index 3c292d7..0000000
Binary files a/org.tizen.devtools/html/images/navigation_003.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/nscreen_feature.png b/org.tizen.devtools/html/images/nscreen_feature.png
deleted file mode 100644
index 7c52a5f..0000000
Binary files a/org.tizen.devtools/html/images/nscreen_feature.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/nscreen_view.png b/org.tizen.devtools/html/images/nscreen_view.png
deleted file mode 100644
index d3f38c0..0000000
Binary files a/org.tizen.devtools/html/images/nscreen_view.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/nscreen_view_devices.png b/org.tizen.devtools/html/images/nscreen_view_devices.png
deleted file mode 100644
index 06c8ebf..0000000
Binary files a/org.tizen.devtools/html/images/nscreen_view_devices.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/outline_view.png b/org.tizen.devtools/html/images/outline_view.png
deleted file mode 100644
index 024126f..0000000
Binary files a/org.tizen.devtools/html/images/outline_view.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/page_designer.png b/org.tizen.devtools/html/images/page_designer.png
deleted file mode 100644
index b100457..0000000
Binary files a/org.tizen.devtools/html/images/page_designer.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/pages.png b/org.tizen.devtools/html/images/pages.png
deleted file mode 100644
index b6e4664..0000000
Binary files a/org.tizen.devtools/html/images/pages.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/pages_template.png b/org.tizen.devtools/html/images/pages_template.png
deleted file mode 100644
index 8db171f..0000000
Binary files a/org.tizen.devtools/html/images/pages_template.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/path.png b/org.tizen.devtools/html/images/path.png
deleted file mode 100644
index b32154a..0000000
Binary files a/org.tizen.devtools/html/images/path.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/path_controller.png b/org.tizen.devtools/html/images/path_controller.png
deleted file mode 100644
index 9446e43..0000000
Binary files a/org.tizen.devtools/html/images/path_controller.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/path_edge.png b/org.tizen.devtools/html/images/path_edge.png
deleted file mode 100644
index f710002..0000000
Binary files a/org.tizen.devtools/html/images/path_edge.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/path_handler.png b/org.tizen.devtools/html/images/path_handler.png
deleted file mode 100644
index 046b842..0000000
Binary files a/org.tizen.devtools/html/images/path_handler.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/proj_component.png b/org.tizen.devtools/html/images/proj_component.png
deleted file mode 100644
index 59beb2f..0000000
Binary files a/org.tizen.devtools/html/images/proj_component.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties.png b/org.tizen.devtools/html/images/properties.png
deleted file mode 100644
index 609a2cb..0000000
Binary files a/org.tizen.devtools/html/images/properties.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties_add.png b/org.tizen.devtools/html/images/properties_add.png
deleted file mode 100644
index 275bf4c..0000000
Binary files a/org.tizen.devtools/html/images/properties_add.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties_add_selector.png b/org.tizen.devtools/html/images/properties_add_selector.png
deleted file mode 100644
index 2d9dcb7..0000000
Binary files a/org.tizen.devtools/html/images/properties_add_selector.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties_delete.png b/org.tizen.devtools/html/images/properties_delete.png
deleted file mode 100644
index 3d809d5..0000000
Binary files a/org.tizen.devtools/html/images/properties_delete.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties_forward.png b/org.tizen.devtools/html/images/properties_forward.png
deleted file mode 100644
index 0e3f688..0000000
Binary files a/org.tizen.devtools/html/images/properties_forward.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties_go_to.png b/org.tizen.devtools/html/images/properties_go_to.png
deleted file mode 100644
index f1dbc77..0000000
Binary files a/org.tizen.devtools/html/images/properties_go_to.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties_remove.png b/org.tizen.devtools/html/images/properties_remove.png
deleted file mode 100644
index d1ad534..0000000
Binary files a/org.tizen.devtools/html/images/properties_remove.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties_specification.png b/org.tizen.devtools/html/images/properties_specification.png
deleted file mode 100644
index 52d3f79..0000000
Binary files a/org.tizen.devtools/html/images/properties_specification.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/properties_style.png b/org.tizen.devtools/html/images/properties_style.png
deleted file mode 100644
index 5afe9ea..0000000
Binary files a/org.tizen.devtools/html/images/properties_style.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/resources.png b/org.tizen.devtools/html/images/resources.png
deleted file mode 100644
index 7e66612..0000000
Binary files a/org.tizen.devtools/html/images/resources.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/resources_view.png b/org.tizen.devtools/html/images/resources_view.png
deleted file mode 100644
index c6aa2ea..0000000
Binary files a/org.tizen.devtools/html/images/resources_view.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/rest_viewer_authentication.png b/org.tizen.devtools/html/images/rest_viewer_authentication.png
index c6d9a09..df3fea1 100644
Binary files a/org.tizen.devtools/html/images/rest_viewer_authentication.png and b/org.tizen.devtools/html/images/rest_viewer_authentication.png differ
diff --git a/org.tizen.devtools/html/images/rest_viewer_drag_drop.png b/org.tizen.devtools/html/images/rest_viewer_drag_drop.png
index 4f880e7..267df32 100644
Binary files a/org.tizen.devtools/html/images/rest_viewer_drag_drop.png and b/org.tizen.devtools/html/images/rest_viewer_drag_drop.png differ
diff --git a/org.tizen.devtools/html/images/screen_enable.png b/org.tizen.devtools/html/images/screen_enable.png
deleted file mode 100644
index a1b8544..0000000
Binary files a/org.tizen.devtools/html/images/screen_enable.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/skin_emulator_mobile.png b/org.tizen.devtools/html/images/skin_emulator_mobile.png
deleted file mode 100644
index 8a86389..0000000
Binary files a/org.tizen.devtools/html/images/skin_emulator_mobile.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/skin_emulator_wearable.png b/org.tizen.devtools/html/images/skin_emulator_wearable.png
deleted file mode 100644
index c4cb55c..0000000
Binary files a/org.tizen.devtools/html/images/skin_emulator_wearable.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/ui_builder_1.png b/org.tizen.devtools/html/images/ui_builder_1.png
index 0d8ed4a..8871bbb 100644
Binary files a/org.tizen.devtools/html/images/ui_builder_1.png and b/org.tizen.devtools/html/images/ui_builder_1.png differ
diff --git a/org.tizen.devtools/html/images/ui_builder_config.png b/org.tizen.devtools/html/images/ui_builder_config.png
deleted file mode 100644
index e04c601..0000000
Binary files a/org.tizen.devtools/html/images/ui_builder_config.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/uibuilder.png b/org.tizen.devtools/html/images/uibuilder.png
deleted file mode 100644
index cd96e1b..0000000
Binary files a/org.tizen.devtools/html/images/uibuilder.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/w_fold.png b/org.tizen.devtools/html/images/w_fold.png
deleted file mode 100644
index 1967eb0..0000000
Binary files a/org.tizen.devtools/html/images/w_fold.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/web_application_wizard.png b/org.tizen.devtools/html/images/web_application_wizard.png
new file mode 100644
index 0000000..3ff212c
Binary files /dev/null and b/org.tizen.devtools/html/images/web_application_wizard.png differ
diff --git a/org.tizen.devtools/html/images/mw_fold.png b/org.tizen.devtools/html/images/wn_division.png
similarity index 66%
rename from org.tizen.devtools/html/images/mw_fold.png
rename to org.tizen.devtools/html/images/wn_division.png
index a96e013..11a7876 100644
Binary files a/org.tizen.devtools/html/images/mw_fold.png and b/org.tizen.devtools/html/images/wn_division.png differ
diff --git a/org.tizen.devtools/html/images/ww_fold.png b/org.tizen.devtools/html/images/ww_fold.png
deleted file mode 100644
index b3c1361..0000000
Binary files a/org.tizen.devtools/html/images/ww_fold.png and /dev/null differ
diff --git a/org.tizen.devtools/html/images/ww_icon_optional.png b/org.tizen.devtools/html/images/ww_icon_optional.png
deleted file mode 100644
index 464ba76..0000000
Binary files a/org.tizen.devtools/html/images/ww_icon_optional.png and /dev/null differ
diff --git a/org.tizen.devtools/html/index.htm b/org.tizen.devtools/html/index.htm
index 274631b..cf3fcdc 100644
--- a/org.tizen.devtools/html/index.htm
+++ b/org.tizen.devtools/html/index.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 
 
 
@@ -37,15 +37,17 @@
 			
 		
 		Log View  
+		T-trace
 		Keyboard Shortcuts
 		
 	
 	Web Tools
 		
+		Project Wizard
 		Configuration Editor
 		Privilege Checker
 		REST Viewer
-			Content Assist	
+		Content Assist	
 		HTML Editor
 		HTML Preview
 		CSS Editor
@@ -54,7 +56,6 @@
 		Code Beautifier
 		Code Minifier
 		Live Editing
-		UI Builder
 		Command Line Interface
 		Web Simulator
 			
@@ -62,7 +63,7 @@
 			
 		
 		Web Unit Test Tool
-		Remote Inspector
+		Web Inspector
 		JavaScript Analyzer
 		JavaScript Log Console View	
 		IDE Preferences
diff --git a/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm b/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm
index d5706ca..5109fa1 100644
--- a/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm
+++ b/org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm
@@ -14,17 +14,17 @@
   
  
 
- 
+ 
 
 
 
 	
-		
+		 
 	
 	
   API and Privilege Checker 
-  The IDE provides the API and privilege checker tool to identify potential problems in the application code related to API and privilege usage. 
-  You can enable the checks during build process or code editing in the project properties. You can also perform the checks manually in the IDE by selecting Project > Check API and Privilege Violations. 
+  The IDE provides the API and privilege checker tool to identify potential problems in the application code related to API and privilege usage. 
+  You can enable the checks during build process or code editing in the project properties. You can also perform the checks manually in the IDE by selecting Project > Check API and Privilege Violations. 
   The results of the check are displayed in the Problems view. The following tables define the different alarms that the checks can generate. 
   

     

-	  
@@ -254,7 +259,7 @@ org.tizen.basic-1.0.0-i386.tpk
  tizen install <-t | -target <target name>> <-n | --name <package name>> [--]
 
-
+
 -t, --target:
 Sets the target, which installs the Tizen package.
 -n, --name:
@@ -265,7 +270,7 @@ tizen install <-t | -target <target name>> <-n | --name <packa
 	 

 
diff --git a/org.tizen.devtools/html/native_tools/call_stack_view_n.htm b/org.tizen.devtools/html/native_tools/call_stack_view_n.htm
index 748dba3..3ecd115 100644
--- a/org.tizen.devtools/html/native_tools/call_stack_view_n.htm
+++ b/org.tizen.devtools/html/native_tools/call_stack_view_n.htm
@@ -14,12 +14,12 @@
   
  
 
- 
+ 
 
 
 
 	
-		
+		 
 	
 	
   Call Stack View  
diff --git a/org.tizen.devtools/html/native_tools/command_line_interface_n.htm b/org.tizen.devtools/html/native_tools/command_line_interface_n.htm
index c94f513..ea667fb 100644
--- a/org.tizen.devtools/html/native_tools/command_line_interface_n.htm
+++ b/org.tizen.devtools/html/native_tools/command_line_interface_n.htm
@@ -14,12 +14,12 @@
   
  
 
- 
+ 
 
 
 
 
-		
+		 
 	
  Command Line Interface
 
@@ -32,7 +32,7 @@ export PATH=$<TIZEN_SDK_HOME>/tools/ide/bin
 
 
 The CLI in the IDE provides functional commands for:
-
+
 Setting CLI configuration options
 Displaying a sub-command list
 Creating a project
@@ -76,7 +76,7 @@ tizen cli-config [-g|--global] <key>=<value>
 tizen cli-config -l | --list
 
 
-
+
 -l, --list:
 Shows the list of all CLI configuration keys and values.
 -g, --global:
@@ -85,7 +85,7 @@ tizen cli-config -l | --list
 	 Queries, sets, replaces, and unsets CLI setting options.
 	 The key and the name are separated by an equal sign.
 The CLI configuration keys are:
-
+
 default.build.architecture=<x86|arm>
 Sets the default executable architecture type: x86 or arm.
 default.build.compiler=<llvm|gcc>
@@ -99,7 +99,7 @@ Sets the default connection timeout value. The default is 60000 milliseconds.
 	 
       
-
+
 Set the profile.xml path globally:
  $ tizen cli-config âg default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
@@ -124,7 +124,7 @@ tizen list native-project
 	 Shows what kind of template each profile supports, and the list corresponding with the given sub-command.
 	 
       
-
+
 List all templates:
  $ tizen list native-project
@@ -148,7 +148,7 @@ $ tizen list native-project
  tizen create native-project [-p|--profile <profile name>] [-t|--template <predefined template>] 
                             [-n|--name <project name>] [-- <project location>]
-
+
 -p, --profile:
 Sets the profile name.
 -t, --template:
@@ -160,7 +160,7 @@ tizen create native-project [-p|--profile <profile name>] [-t|--template &
 
 	 Creates a Tizen native project. If an option is empty, the default project is generated from the default template.
       
-
+
 Create the template project based on the basic Tizen mobile UI project:
  $ tizen create native-project âp mobile-2.3 ât basic_ui ân basic -- /home/workspace
@@ -175,7 +175,7 @@ $ cd /home/workspace/basic
 tizen build-native [-a|--arch <architecture name>] [-c|--compiler <compiler name>] 
                    [-C|--configuration <configuration name>] [--]
 
-
+
 -a, --arch, <x86|arm>:
 Determines the architecture type for the rootstrap.
 -c, --compiler <llvm|gcc>:
@@ -188,7 +188,7 @@ tizen build-native [-a|--arch <architecture name>] [-c|--compiler <comp
 	 Builds the Tizen native project with the default values (if you do not set the options). There are 3 options: architecture, compiler, and configuration. All the options are required and the default values are described in the CLI configuration file. 
 	 
       
-
+
 Build the project with the llvm compiler and the debug mode. The x86 executable named basic is generated, if the project is built successfully:
  $ tizen build-native -âarch x86 â-compiler llvm â-configuration Debug -- /home/workspace/basic
@@ -211,7 +211,7 @@ $ ls /home/workspace/basic/Debug/
  tizen package [-t | --type <package type>] [-s | --sign <security profile name>] [-S, --strip <on|off>] [--]
 
-
+
 -t, --type <tpk | wgt>:
 Sets the package type.
 -s, --sign:
@@ -220,16 +220,16 @@ tizen package [-t | --type <package type>] [-s | --sign <security profi
 Determines whether to strip the native binary.
 The default value is off. This option only works when the native binary is based on the arm architecture and release build configuration.
 --:
-Sets the project's build configuration path.
+Sets the project's build configuration path or package file path with a  file name.
 
 Packages the Tizen application with signing. 
+	 Packages the Tizen application with signing. If there is a package file path in the options, the package is re-signed.
 	 
 	 The Tizen application is signed with a certified profile named profiles.xml. You can create the default profile from the Tizen IDE, which generates the file in a hidden directory in your workspace (<Your workspace directory>/.metadata/.plugins/org.tizen.common.sign/profiles.xml). Set the path of the profile.xml file once before packaging the Tizen application (you can use the tizen cli-config command).
 	 
 	 
       
-
+
 Set up the path of the profile.xml file that you already have:
  $ tizen cli-config âg default.profiles.path=/home/workspace/profiles.xml
@@ -245,7 +245,12 @@ $ tizen package â-type tpk â-sign myprofile -- /home/workspace/basic/Debug
 $ ls /home/workspace/basic/Debug
 
 org.tizen.basic-1.0.0-i386.tpk
-
+
+Re-sign the package:
++$ tizen package --type tpk --sign myprofile2 -- /home/workspace/basic/Debug/org.tizen.basic-1.0.0-i386.tpk
+
+
 
 	  
     Installs a Tizen application to a Tizen device.
 	 
       
-
+
 Install a basic application named org.tizen.basic-1.0.0-i386.tpk to the emulator-26101:
  $ tizen install -âtarget emulator-26101 â-name org.tizen.basic-1.0.0-i386.tpk -- /home/workspace/basic/Debug
@@ -278,7 +283,7 @@ $ tizen install -âtarget emulator-26101 â-name org.tizen.basic-1.0.0-i386.tp
  tizen uninstall <-t | --target <target name>> <-p | --pkgid <package id>>
 
-
+
 -t, --target:
 Sets the target, which uninstalls the Tizen package.
 -p, --pkgid:
@@ -286,7 +291,7 @@ tizen uninstall <-t | --target <target name>> <-p | --pkgid <p
 
 	 Uninstalls a Tizen application from a Tizen device.
       
-
+
 Uninstall a basic application whose pkgid is org.tizen.basic from the emulator-26101:
  $ tizen uninstall -âtarget emulator-26101 -âpkgid org.tizen.basic
@@ -299,7 +304,7 @@ $ tizen uninstall -âtarget emulator-26101 -âpkgid org.tizen.basic
  tizen run <-t | --target <target name>> <-p | --pkgid <package id>>
 
-
+
 -t, --target:
 Sets the target, which runs the Tizen package.
 -p, --pkgid:
@@ -308,7 +313,7 @@ tizen run <-t | --target <target name>> <-p | --pkgid <package
 	 Runs the Tizen application.
 	 
       
-
+
 Run the basic application whose pkgid is org.tizen.basic  on an emulator-26101:
  $ tizen run -âtarget emulator-26101 â-pkgid org.tizen.basic
@@ -323,7 +328,7 @@ tizen version
 
 	 Prints the CLI version number of the executable and exits.
       
-
+
 Show the version:
  $ tizen version
diff --git a/org.tizen.devtools/html/native_tools/content_assist_n.htm b/org.tizen.devtools/html/native_tools/content_assist_n.htm
index dc2ad55..928b0d8 100644
--- a/org.tizen.devtools/html/native_tools/content_assist_n.htm
+++ b/org.tizen.devtools/html/native_tools/content_assist_n.htm
@@ -15,21 +15,21 @@
 
 
 
-
+
 	
 
 
 	
-		
+		 
 	
 
  Content Assist
   
 				
   The Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient: 
-  
+  
   API Assist 
-  This feature is used for writing and editing source code. It helps to create content faster by providing suggestions for the APIs that are already present. A list of API methods, keywords, and macros defined in the native API Reference is displayed when you enter prefix words that match related items. 
+  This feature is used for writing and editing source code. It helps to create content faster by providing suggestions for the APIs that are already present. A list of API methods, keywords, and macros defined in the API Reference is displayed when you enter prefix words that match related items. 
   API Hover 
   This features displays information about API methods and API-related types and macros for the native framework.
 
diff --git a/org.tizen.devtools/html/native_tools/da_file_n.htm b/org.tizen.devtools/html/native_tools/da_file_n.htm
index 9b31dd5..b3cfe47 100644
--- a/org.tizen.devtools/html/native_tools/da_file_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_file_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -40,7 +40,7 @@
   The File tab of the dynamic analyzer shows information associated with file operations. The File tab can be enabled or disabled in runtime from the Configuration dialog. If the file analysis capabilities are disables, the file API information is not displayed.
   
   Figure: File analysis 
-     
+     
   The tab consists of the following views: 
    
    File chart shows file operations (open/close, read/write, lock) as a time flow chart. 
@@ -65,7 +65,7 @@
   File Chart 
   The file chart has a separated child and parent chart. There can be only 1 parent chart of each file, whereas multiple child charts are supported. Multiple child charts are separated by PID and TID. The parent chart records all the operations performed by the child charts.
   Figure: File chart 
-     
+     
  The file chart shows the following information:
   
   The open or closed state of the file is shown through the color of the graph bars:
@@ -85,7 +85,7 @@
       File API List 
   The File API List view shows the APIs that are associated with the file selected in the File chart. When the child of the file is selected, this view shows information about the file included in the TID. 
   Figure: File API List view 
-     
+     
   The view has the following columns: 
    
    # shows the sequence number of the API calls. 
@@ -103,7 +103,7 @@
     File Details 
   The File Details view shows detail information of the file selected in the file chart. When the child row of the file is selected, this view shows information of the file that is included in the TID. 
   Figure: File Details view 
-     
+     
   The view has the following fields: 
    
    File name is the file name. 
diff --git a/org.tizen.devtools/html/native_tools/da_network_n.htm b/org.tizen.devtools/html/native_tools/da_network_n.htm
index 71dc907..9dff939 100644
--- a/org.tizen.devtools/html/native_tools/da_network_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_network_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -41,7 +41,7 @@
   The Network tab of the dynamic analyzer displays network information. It only supports the socket APIs of glibc.
 
   Figure: Network analysis 
-     
+     
   
   The tab consists of the following views:
    
@@ -56,7 +56,7 @@
   The Network chart displays the socket object in a tree format using a graph.
 
   Figure: Network chart 
-     
+     
   
   The color of horizontal bar in the chart indicates the state of the socket:
   
@@ -87,7 +87,7 @@
  
 
   Figure: Network API List view 
-     
+     
   
   The view has the following columns:
   
@@ -109,7 +109,7 @@
   The Network Details view displays detailed information of the network socket object selected in the network chart.
 
   Figure: Network Details view 
-     
+     
   
   The view has the following fields:
   
diff --git a/org.tizen.devtools/html/native_tools/da_opengl_n.htm b/org.tizen.devtools/html/native_tools/da_opengl_n.htm
index 17d1ace..441b7ad 100644
--- a/org.tizen.devtools/html/native_tools/da_opengl_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_opengl_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -41,7 +41,7 @@
   The OpenGL (Open Graphics Library) page of the dynamic analyzer displays information about OpenGL® 2.0 and EvasGL.
 
   Figure: OpenGL® analysis 
-     
+     
   
   The tab consists of the following views:
    
@@ -60,25 +60,25 @@
     The frame time chart shows the elapsed frame time. The x-axis value  of the frame time chart means the frame index number. A small chart value means a good status frame. Only the frames smaller than the value specified by the user and changed to yellow are visible.
 
   Figure: Frame time chart 
-    
 
+     
   
   The frame rate chart shows the FPS. The x-axis value of the frame rate chart means the analysis time. A larger chart value means a good status frame.
   
    Figure: Frame rate chart 
-    
 
+    
 
   
 
    The Details view shows the details of the selected chart.
   
       Figure: OpenGL® Chart Details view 
-     
+     
 
   Statistics 
   
   The Statistics view displays the API statistics related to EvasGL and OpenGL® 2.0.
 
   Figure: OpenGL® Statistics List view 
-     
+     
   
   The view has the following columns:
   
@@ -93,7 +93,7 @@
   The API List view displays the APIs associated with the values selected in the chart.
 
   Figure: OpenGL® API List view 
-     
+     
   
   The view consists of the following columns:
   
@@ -110,14 +110,14 @@
    The OpenGL®  Details view displays the detail information associated with the API selected in the API List view. The detailed information shows the uniform data and the error value.
    
      Figure: OpenGL® Details view 
-     
+     
 
    Redundant List 
   
   The Redundant view displays the APIs that are called repeatedly with the same parameters.
 
   Figure: OpenGL® Redundant view 
-     
+     
   
   The view has the following columns:
   
@@ -133,7 +133,7 @@
   The Context view displays the context rendering state associated with the item selected in the API List view. The title of the table refers to the context number of the selected API.
 
   Figure: OpenGL® Context view 
-     
+     
   
   The view has the following columns:
   
@@ -144,14 +144,14 @@
 Compare the Default state and Current state to see changes in any value. Yellow represents a changed state. If you click the filter icon (marked with a red box in the following figure), only the changed state is shown in the list. You can also view the API that changed the value of the state. 
   
   Figure: OpenGL® Context view (changed state) 
-     
+     
   
    Program List 
   
   The Program view displays the program information associated with the items selected in the API List view.
 
   Figure: OpenGL® Program view 
-     
+     
   
   The view has the following columns:
   
@@ -166,14 +166,14 @@
   The Details view displays the source of the selected program.
   
   Figure: OpenGL® Details view 
-     
+     
   
   Texture List 
   
   The Texture view displays the textures associated with the item selected in the API List view.
 
   Figure: OpenGL® Texture view 
-     
+     
   
   The view has the following columns:
   
diff --git a/org.tizen.devtools/html/native_tools/da_overview_n.htm b/org.tizen.devtools/html/native_tools/da_overview_n.htm
index 00ca589..d9c5c1b 100644
--- a/org.tizen.devtools/html/native_tools/da_overview_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_overview_n.htm
@@ -18,19 +18,19 @@
 
 
 
-
+
 	
 
 
 	
-		
+		 
 	
 Dynamic Analyzer 
   You can monitor the performance and reliability of your Native application on a target device or the Emulator 
-  	by running the dynamic analyzer tool included within the Tizen SDK. 
+  	by running the dynamic analyzer tool included within the Tizen SDK. 
   Dynamic Analyzer provides various functions for profiling applications. To better understand the profiling result, you need to know about each component that tool screen contains, providing you with the tracing information of your application. 
   Figure: Dynamic Analyzer screen 
-     
+     
    
    Timeline 
    The Timeline tab shows the application data values over time as a graph.
 
@@ -61,11 +61,11 @@
   The tabs on the main display can be reordered by dragging and dropping.
 
   Figure: Tab pages 
-       
+       
   
 The analysis result helps you to recognize and fix bottlenecks, bugs, and memory and resource leaks. 
 	For instructions on running the dynamic analyzer and ways to analyze the result and utilize the result 
-	for improving your application performance, see Dynamic Analysis.
+	for improving your application performance, see Dynamic Analysis.
 	
 	Settings 
   The settings button on the toolbar opens the Settings dialog box, which is used to adjust the dynamic analyzer functions during operation or stop.
@@ -75,7 +75,7 @@
 	The target shows a list of the currently supported profiles.
 	The template is a combination of several useful features and you can set up a template for each target. When you select a template, the template description is displayed on the screen.
 	 Figure: Features tab 
-     
+     
 	 The following templates are provided:
 	 
 		Bottleneck: This template shows where can be the most bottleneck point while you are using your program.
@@ -92,7 +92,7 @@
 	 
 	 When you click the Details button in the Features tab, the Feature details dialog appears on the screen.
 	 Figure: Feature details 
-     
+     
 	 
 	 The Feature detail dialog contains the following settings for feature analysis:
 	 
@@ -111,7 +111,7 @@
     Options 
 	The configuration settings define the dynamic analyzer configuration.
 	 Figure: Options tab 
-     
+     
 	 Recording / Replay option
 	 Auto-stop while replaying: Reproduces the information that was saved through the dynamic analyzer previously. The stored information has an end time. 
 	 Select this option to terminate at the same time as before.
diff --git a/org.tizen.devtools/html/native_tools/da_range_info_n.htm b/org.tizen.devtools/html/native_tools/da_range_info_n.htm
index c973a11..bfae7d1 100644
--- a/org.tizen.devtools/html/native_tools/da_range_info_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_range_info_n.htm
@@ -16,18 +16,18 @@
 
 
 
-
+
 	
 
 
 	
-		
+		 
 	
 	
   Range 
   The range information feature of the dynamic analyzer provides information about the application performance in a selected range. 
   Figure: Range information 
-   
+   
   The range information can be created in one of the following 2 ways:
   
 	Chart (Timeline, File, and Thread tabs)
@@ -45,7 +45,7 @@
 	
   
 	Figure: Set range on a chart 
-    
+    
   
 	Table (all tables, except profiling)
 	
@@ -57,7 +57,7 @@
 	
 	
 	Figure: Set range on a table 
-    
+    
 
     
   In the context menu, select Clear Analyze range to clear the set range values and close the range page. The start and end time selection is not removed.
@@ -67,7 +67,7 @@
   When range information is created, the values within the range are displayed in yellow in the other views. 
 
   Figure: Range area in the Call Trace view 
-   
+   
 
 
     
diff --git a/org.tizen.devtools/html/native_tools/da_summary_n.htm b/org.tizen.devtools/html/native_tools/da_summary_n.htm
index e268361..d7f7fdb 100644
--- a/org.tizen.devtools/html/native_tools/da_summary_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_summary_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -37,7 +37,7 @@
   The Summary tab of the dynamic analyzer provides various information about the application performance. 
 
   Figure: Summary information 
-     
+     
   The tab consists of the following views: 
    
 
@@ -52,11 +52,11 @@
   The Leaks view shows data that is recognized as a leak on application runtime, mainly related to memory allocation and file operations. 
  
   Figure: Leaks view 
-     
+     
  
   The Leak candidates view shows data that is estimated as a leak in the running application, mainly due to memory allocation and file operations.
     Figure: Leak candidates view 
-     
+     
   
   These views have the following columns: 
    
diff --git a/org.tizen.devtools/html/native_tools/da_thread_n.htm b/org.tizen.devtools/html/native_tools/da_thread_n.htm
index 246a300..36af9ea 100644
--- a/org.tizen.devtools/html/native_tools/da_thread_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_thread_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
diff --git a/org.tizen.devtools/html/native_tools/da_timeline_n.htm b/org.tizen.devtools/html/native_tools/da_timeline_n.htm
index b02e3a0..44d852e 100644
--- a/org.tizen.devtools/html/native_tools/da_timeline_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_timeline_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -36,7 +36,7 @@
 Timeline 
   The Timeline tab of the dynamic analyzer shows the data values over time as a graph. 
   Figure: Timeline information 
-     
+     
   The tab consists of the following views: 
    
    Timeline chart shows the data values in a graph. The chart content can be edited in the Edit chart dialog.
@@ -48,7 +48,7 @@
   The timeline chart shows the data values over time as a chart. You can create 12 different charts, which can be selected from the left side of the window. 
 
   Figure: Timeline chart 
-    
+    
    
    CPU chart 
    Shows CPU usage. 
@@ -56,7 +56,8 @@
     
 : System CPU usage (%) 
      : Application CPU Usage (%) 
     
-   CPU core chart
 Shows CPU core usage. Depending on the number of device cores, the number of lines on the chart varies. 
+
+   
CPU core chart Shows CPU core usage. Depending on the number of device cores, the number of lines on the chart varies. 
      
       : CPU core0 usage (%) 
       : CPU core1 usage (%) 
@@ -67,7 +68,7 @@
 	  : CPU core6 usage (%)
 	  : CPU core7 usage (%)
     
  
-   CPU frequency chart 
+   CPU frequency chart
    Shows CPU frequency. Depending on the number of device cores, the number of lines on the chart varies. In the Emulator, the frequency is always 0. 
     
      : CPU core0 frequency (KHz)
@@ -78,17 +79,16 @@
 	 : CPU core5 frequency (KHz)
 	 : CPU core6 frequency (KHz)
 	 : CPU core7 frequency (KHz)
-    
-   
Heap allocation chart 
+   
  
+   Heap allocation chart
    Shows heap memory allocation. System total and app-allocated data is shown. Confirm additional binary allocation if you have set the binary in the setting dialog.
-   If a process is added, a child chart is dynamically created for the added process.
- 
+   If a process is added, a child chart is dynamically created for the added process. 
     
      : System total allocated (KB) 
      : App-allocated (KB) 
 	Optionally, binary (user set) allocated (KB)
-    
-   
Process Size chart
 Shows amount of memory usage. VSS is virtual memory, RSS is physical memory and PSS is process's private memory + shared memory / number of shared processes. 
+     
+   Process Size chart Shows amount of memory usage. VSS is virtual memory, RSS is physical memory and PSS is process's private memory + shared memory / number of shared processes. 
    If a process is added, a child chart is dynamically created for the added process.
    
      
@@ -96,14 +96,14 @@
      : Physical RSS (resident set size) memory (KB) size used by the process 
      : PSS (proportional set size) memory (KB) in the following format: [(Unique memory + Shared memory)/number of processes sharing the memory]. 
      
-   Memory chart
  Shows system memory usage. 
+   
Memory chart  Shows system memory usage. 
      
      : System maximum memory (KB) 
      : System used memory (KB) 
      : App used memory (KB) 
      
 
-   Screenshot chart
 Shows screenshots (they can be taken only when the Take snapshot button is enabled). 
+   Screenshot chart Shows screenshots (they can be taken only when the Take snapshot button is enabled).
     
@@ -113,28 +113,28 @@
        
-    
      
      The screenshot is captured about 2 seconds after the scene or form is transformed. To capture screenshots perfectly, use scene management or animation to transform a panel or form. 
       
      
-   
Disk IO chart
 Shows the disk's read and write bytes and the number of sectors. 
+     
+   Disk IO chart Shows the disk's read and write bytes and the number of sectors. 
      
      : Disk read operation counts 
      : Disk write operation counts 
      : Disk bytes read size (KB) 
      : Disk bytes written size (KB) 
      
-   Network IO
 Shows the network send and receive bytes. 
+   
Network IO Shows the network send and receive bytes. 
      
      : Receive bytes (KB) 
      : Send bytes (KB) 
 
      	
    
-   UI Event chart
 Shows UI events that occur on the device. 
+   
UI Event chart Shows UI events that occur on the device. 
      
      : Touch event 
      : Orientation event 
      
 	
-	   Device chart
 Shows the status of Wi-Fi, Bluetooth, GPS, DNet, and camera on the device. 
+	   
Device chart Shows the status of Wi-Fi, Bluetooth, GPS, DNet, and camera on the device. 
      
      : Wi-Fi 
      : Bluetooth 
@@ -143,7 +143,7 @@
      : Camera 
      
 	
-	   Energy chart
 Shows the power consumption of Flash memory, CPU, and LCD. 
+	   
Energy chart Shows the power consumption of Flash memory, CPU, and LCD. 
      
      : Total energy usage (mA) 
      : Flash memory (mA) 
@@ -155,10 +155,10 @@
   Chart Buttons and Slider 
   You can use the chart buttons to ease the analysis. 
   Figure: Chart buttons 
-     
+     
    
    Add button The button activates the Edit chart dialog. You can define which charts are visible in the Timeline page. 
-   Chart Minimize button Comparing different charts can be helpful. You can do it easily by minimizing all the charts.
    
+   Chart Minimize button Comparing different charts can be helpful. You can do it easily by minimizing all the charts.
    
    Chart Maximize button To see the chart in more detail, maximize it. 
    
 
@@ -167,7 +167,7 @@
   To manage the process life-cycle and modify the time scale:
   
   Confirm the status of the target process through the life-cycle bar.
-  
+  
        
      : Initializing status 
      : Running status 
@@ -177,7 +177,7 @@
 
 
   Adjust the chart's time scale using the scale slider at the bottom left.
-    
+    
 
   
   
@@ -185,7 +185,7 @@
    Chart Configuration 
   The Edit chart dialog is an editor window for managing the Timeline page chart. The Edit chart dialog can be used to control the order in which the visible charts are shown on the Timeline page in runtime. To change the order, drag the applicable chart to the new location. To change the visibility state of a chart, click the chart. For a detailed description of each chart, see Timeline Chart. 
   Figure: Chart Configuration 
-     
+     
   The chart classifies the visibility states by color: 
    
    Blue
diff --git a/org.tizen.devtools/html/native_tools/da_views_n.htm b/org.tizen.devtools/html/native_tools/da_views_n.htm
index 2422767..54bfce7 100644
--- a/org.tizen.devtools/html/native_tools/da_views_n.htm
+++ b/org.tizen.devtools/html/native_tools/da_views_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -48,7 +48,7 @@
  Snapshot 
   The Snapshot view shows the current screen capture and CPU usage, process usage, and available memory. 
   Figure: Snapshot view 
-  
+  
   The Snapshot view contains the following components:
    
    Image viewerThe image viewer shows a snapshot of the current screen.
 If you select an image, the Call Trace view and the timeline chart content moves to the API at that time.
  
diff --git a/org.tizen.devtools/html/native_tools/enventor_n.htm b/org.tizen.devtools/html/native_tools/enventor_n.htm
index f61cc31..954d306 100644
--- a/org.tizen.devtools/html/native_tools/enventor_n.htm
+++ b/org.tizen.devtools/html/native_tools/enventor_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -51,7 +51,7 @@
 For more information about the EDC format, see Edje module and EDC format.
 
 Figure: Enventor basic view 
- 
+ 
   
 Before using Enventor, familiarize yourself with the following:
 
@@ -78,7 +78,7 @@
 
 
 Figure: Layout of Enventor 
- 
+ 
 
 Using the Text View
 
@@ -92,7 +92,7 @@
 The following figure shows the auto-complete contextual pop-up listing the reserved keywords.
 
 Figure: Auto-complete pop-up 
- 
+ 
 
 
 Candidate list
@@ -102,12 +102,12 @@
 The following figure shows the type candidate list.
 
 Figure: Candidate list 
- 
+ 
 
 The candidate list function also helps you to know the available range of the numeric value based on the context. The numeric candidate function shows the range of the available number.
 
 Figure: Numerical value range 
- 
+ 
 
 
 
@@ -124,7 +124,7 @@
 The following figure shows the LiveEdit contextual pop-up containing part object types.
 
 Figure: Part object types 
- 
+ 
 
 
 Set the position and size of the part object.
@@ -135,14 +135,14 @@
 The following figure shows the preview of the rectangle object in the live view with the position and the size information created by the LiveEdit contextual pop-up.
 
 Figure: Part object position and size settings 
- 
+ 
 
 After the position and size of the part object is set, press Enter to add the part object. The corresponding EDC source code is added automatically in the text view.
 
 The following figure shows the automatically written EDC source code corresponding to the added rectangle part object.
 
 Figure: Automatically created source code 
- 
+ 
 
 
 
@@ -182,67 +182,67 @@
 Function 
  
  
-  
+  
 Save 
 Save a file. 
 
  
-  
+  
 Undo 
 Undo text changes. 
 
  
-  
+  
 Redo 
 Redo text changes. 
 
  
-  
+  
 Highlight 
 Add or remove the part object highlighting in the live view. 
 
  
-  
+  
 Swallow 
 Show or hide virtual images to visualize SWALLOW part objects in the live view. 
 
  
-  
+  
 LiveEdit 
 Add or remove the LiveEdit function. 
 
  
-  
+  
 Lines 
 Show or hide the line numbers in the text view. 
 
  
-  
+  
 Find 
 Find the given word. 
 
  
-  
+  
 Goto 
 Go to the given line in the text view. 
 
  
-  
+  
 Console 
 Show or hide the console view. 
 
  
-  
+  
 Status 
 Show or hide the status bar. 
 
  
-  
+  
 Setting 
 Show the configure setting window. 
 
  
-  
+  
 About 
 Show shortcut keys. 
 
@@ -430,7 +430,7 @@
 Additionally, you can control the tool functions.
 
 Figure: Configuration Setting window 
- 
+ 
 
 
 
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 69a7658..41fc4a5 100644
--- a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
+++ b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
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 b0d2c4b..8bd2a3f 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
@@ -15,9 +15,9 @@
 
 
 
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -31,15 +31,17 @@
 			
<ui-application> Element
 			<account> Element
 			<privileges> Element
-			<feature> Element			
+			<feature> Element	
+			<profile> Element	
+			<widget-application> Element			
 		
 	
 	
 
  
   Manifest Text Editor 
-    A Tizen native application package consists of exactly 1 manifest file, called tizen-manifest.xml. It is used to describe the information of application. The manifest file is composed of XML elements, which include the root <manifest> element and its child elements representing application information, such as  <version>, and <privileges>. The child elements are organized into a specific hierarchy. Elements may have attributes associated with them. Attributes describe information about the element.
-The manifest file information can be edited using the manifest editor, or you can modify the XML structure directly using the text editor. To open the manifest editor, double-click the tizen-manifest.xml file in the Project Explorer view of the IDE. To use the text editor, right-click the tizen-manifest.xml file in the Project Explorer view and select Open with > Text Editor.
+    A Tizen native application package consists of exactly 1 manifest file, called tizen-manifest.xml, which is used to describe the application information. The manifest file is composed of XML elements, which include the root <manifest> element and its child elements representing application information, such as  <version>, and <privileges>. The child elements are organized into a specific hierarchy. The elements can have attributes associated with them, providing more information about the element.
+The manifest file information can be edited using the manifest editor, or you can modify the XML structure directly using the text editor. To open the manifest editor, double-click the tizen-manifest.xml file in the Project Explorer view of the IDE. To use the text editor, right-click the tizen-manifest.xml file in the Project Explorer view and select Open with > Text Editor.
 
 
@@ -56,7 +58,7 @@
    <author email="email@email.com" href="http://test.com">author</author>
    <description>testdescriptions</description>
    <description xml:lang="en-gb">testdesc</description>
-   <ui-application appid="org.tizen.uiapp" auto-restart="false" exec="uiapp" multiple="false" nodisplay="false" on-boot="true" taskmanage="true" type="capp">
+   <ui-application appid="org.tizen.uiapp" auto-restart="false" exec="uiapp" launch_mode="single" multiple="false" nodisplay="false" on-boot="true" taskmanage="true" type="capp">
       <label>uiapplication</label>
       <label xml:lang="en-gb">testlang</label>
       <icon>uiapp.png</icon>
@@ -83,6 +85,12 @@
    </privileges>
    <feature name="http://tizen.org/feature/camera.front.flash"/>
    <feature name="http://tizen.org/feature/data.encryption"/>
+   <profile name="mobile"/>
+   <widget-application appid="org.tizen.widget-test" exec="widget-test" main="true" update-period="0">
+      <icon>widget-test.png</icon>
+      <label>widget-test</label>
+      <support-size preview="widget-test.png">2x2</support-size>
+   </widget-application>
 </manifest>
 
 
@@ -268,6 +276,36 @@
 		<feature>
+
+
+		
+	
+
+
+		
+		
+
+
+		
+	
+	
+
+		
+	
+
+
+		
+	
 
 
 	

+		<profile>
+

+		<widget-application>
+

+		<icon>
+		

+		<label>
+		

+		<support-size>
+		
 
 
 
@@ -330,8 +368,10 @@
  
     
 
-Figure: Manifest editor
-
+
+Figure: Editing the <manifest> element in the manifest editor
+
+
 
 
 
@@ -339,14 +379,14 @@
     
 
  Installation location for the application.
-     By default, set to the internal and developer may select auto or prefer-external to the installation to an external device, sunc as an SD card.
+By default, this value is set to "internal-only". You can select other values to install to an external device, such as an SD card.
     Expected value:  
     
-One of the following values: "auto", "internal-only", "prefer-external" 
+"auto" (the platform decides where the application is installed)
+"internal-only"
+"prefer-external" (preferably installed to an external storage device; however, if the external storage device has no empty space, the application is installed in the internal storage)
+
       
-    auto - The platform will decide where the app is installed.
-    internal-only
-    prefer-external - Asked to install an external storage device, but is not guaranteed. If there is no empty space in the external storage device, it is installed on the internal.
  
     
 
@@ -408,7 +448,7 @@
 
 For example:  
    -<manifest xmlns="http://tizen.org/ns/packages" package="org.tizen.uiapp" version="1.0.0"  api-version="2.3.0">
+<manifest xmlns="http://tizen.org/ns/packages" package="org.tizen.uiapp" version="1.0.0"  api-version="2.3.1">
    <author email="email@email.com" href="http://test.com">author</author>
    <description>.....</description>
    <ui-application>.....</ui-application>
@@ -460,7 +500,7 @@
 href attribute 
     
 
- Web site of the package creator. (e.g., a homepage, a profile on a social network, etc)
+ Web site of the package creator (such as a homepage or a profile on a social network).
     Expected value:  
     
 Any valid Web site string value 
@@ -518,7 +558,8 @@
 
   <service-application> Element 
 The <service-application> element represents the manifest information of a Tizen native application without a graphical user interface (GUI).
-This is suitable for developing a program to be run continuously, as getting the sensor data. Service application can be packaged with native up application, web application.
+
+Create a service application if you want to develop a program that is to be run continuously, for example, to get the sensor data. The service application can be packaged together with a native UI application or a Web application.
 
   
@@ -656,6 +697,17 @@
     
 
 
  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 
@@ -671,6 +723,17 @@
     
 
  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 
@@ -742,6 +805,7 @@
 	  
 appid 
        exec 
+	   launch_mode 
        multiple 
 	   nodisplay 
        taskmanage
@@ -780,6 +844,22 @@
  
     
 
+
+
+ 
+    
+
+ 
+    
+
+launch_mode attribute
 Application launch mode.
+By default, this value is set to caller.
+	  Expected value:       
+	  
+single (launched as a main application) 
+caller (caller application defines the launch mode with the app_control_set_launch_mode() function) 
+      
+
 
-
-
 
 
@@ -850,6 +930,17 @@
     
 
  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 
@@ -865,6 +956,17 @@
     
 
  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 
@@ -876,7 +978,7 @@
 
 
 For example:
-<ui-application appid="org.tizen.uiapp" auto-restart="false" exec="uiapp" 
+<ui-application appid="org.tizen.uiapp" auto-restart="false" exec="uiapp" launch_mode="single" 
                 multiple="false" nodisplay="false" on-boot="true" taskmanage="true" type="capp">
    <label>uiapplication</label>
    <label xml:lang="en-gb">testlang</label>
@@ -1006,7 +1108,7 @@
 <icon> element 
     
  Since the icons are used in the device under settings, Accounts place them in a shared directory.
+  Account provider icon image. Since the icons are used in the device under settings, the account icons are placed in a shared directory.
 	  Attributes:       
       
 section 
@@ -1041,7 +1143,7 @@
 <capability> element 
     
  Capability of the account provider. Capabilities are defined in the http://<VENDOR_INFORMAION>/accounts/capability/<NAME> 
+  Account provider capability. The capabilities are defined as the http://<VENDOR_INFORMAION>/account/capability/<NAME>.
 	  Expected value:       
       
 IRI string 
@@ -1063,12 +1165,12 @@
 
 
 		 <privileges> Element 
-The <privileges> element represents required privileges for the Tizen application.
-Applications that use such sensitive APIs must declare the required privileges in the manifest.xml.
-Since the category of privilege different for each type of API, developer have to find a privilege related to the API on document.
-Press the Add button briings up the Add privilege dialog.
-Figure: Privileges
-
+The <privileges> element represents required privileges for the Tizen application. Applications that use sensitive APIs must declare the required privileges in the manifest.xml file. Since the privilege categories differ for each API type, make sure you define a correct privilege related to the API you need.
+
+Press Add to open the Add Privilege dialog.
+Figure: Editing the <privileges> element in the manifest editor
+
+
   
-
 
 
@@ -1100,15 +1202,13 @@
 <privilege> element 
     
 
-Required privilege for the Tizen application.
-Occurrences: 
+  Required privilege for the Tizen application. 
+Occurrences:  
       
 1 or more (optional) 
       
 Expected value:  
-name
-Mandatory, URI of the Device API privilege
+Name (mandatory, the URI of the Device API privilege)
 For example:     
 	  
 	  http://tizen.org/privilege/application.admin
@@ -1116,7 +1216,7 @@
       http://tizen.org/privilege/account.read
 
       
-For more information on the expected values, see Security and API Privileges. 
+For more information on the expected values, see Security and API Privileges. 
  
     
 
@@ -1129,9 +1229,12 @@
 
 
 		<feature> Element 
-The <feature> element represents the list of required features for feature-based filtering in the Tizen Store. It is used to define the hardware and software components for the tizen application. In order to use/access to api that specialized for each vendor or platform, features must declare. This element has no child elements.
-Figure: features
-
+The <feature> element represents the list of required features for feature-based filtering in the Tizen Store. This element has no child elements.
+
+The <feature> element represents the list of required features for feature-based filtering in the Tizen Store. It is used to define the hardware and software components for the Tizen application. In order to use or access an API that is specialized for each vendor or platform, the feature must be declared. This element has no child elements.
+Figure: Editing the <feature> element in the manifest editor
+
+
   
 
 
@@ -1145,9 +1248,8 @@
       
 Attributes:       
 	  
-name 
+name (mandatory, a feature key URI) 
       
-Mandatory: feature key URI
  
     
 
@@ -1164,7 +1266,7 @@
     "http://tizen.org/feature/camera"
     "http://tizen.org/feature/fmradio"
       
-For more information on the expected values and the application filtering mechanism, see Feature Filtering for Native Applications.
+For more information on the expected values and the application filtering mechanism, see Application Filtering.
 	   
     
 
@@ -1175,8 +1277,8 @@
 <feature name="http://tizen.org/feature/fmradio"/>
 
 
-		<profile> Element
-The <profile> element determinated that tizen package operate what kind of device. This element has no child elements.
+<profile> Element
+The <profile> element determines on which kind of device the Tizen package operates. This element has no child elements.
 
 
 
@@ -1184,39 +1286,231 @@
     
 
 
-targeted requirements for specific device categories which layer on top of the Tizen Common Platform, including additional components for devices, APIs, and hardware requirements. Platform must conform to the Tizen common requirements as well as at least one profile.
+Targeted requirements for specific device categories, which layer on top of the Tizen Common Platform, including additional components for devices, APIs, and hardware requirements. The platform must conform to the Tizen common requirements as well as at least 1 profile.
 Occurrences: 
     
 1 or more (optional)
     
 Attributes: 
     
-name
+name
     
 
     
 
-
+
-
 
 
 name attribute
     
 profile name
+ Profile name.
 Expected value: 
 For example:
     
 mobile
-wearabel
+wearable
     
 
     
 
-
 For example:
  <profile name="mobile"/>
 
+
+<widget-application> Element
+The <widget-application> element represents the settings for the widget application.
+
+
+
+
+    
+
+ 
+    
+
+
+<widget-application> element
 Settings for the widget application.
+For more information on the relationship between the elements, see the element hierarchy.
+Occurrences:  
+      
+1 (optional) 
+      
+Expected children:       
+	    
+
+ 
+      
+    
+
+ 
+      
+    
+
+ 
+      
+    
+
+ 
+      
+    
+Child element Occurrences
<icon> 1
<label> 1
<support-size> 1
+Attributes:       
+	  
+	 	appid 
+		exec 
+		main 
+		update-period 
+      
+
+  
+
+ 
+    
+
+ 
+    
+
+<icon> element
 Widget application icon image. 
+Occurrences:  
+      
+1 
+      
+
+Expected value:      
+	  
+	  Icon file name
+      
+
+  
+
+ 
+    
+
+ 
+    
+
+<label> element
 Widget application text. 
+Occurrences:  
+      
+1 
+      
+
+Expected value:      
+	  
+	  Label value in string
+      
+ 
+ 
+
+ 
+    
+
+ 
+    
+
+<support-size> element
 Size supported by the widget application. 
+Occurrences:  
+      
+1 
+      
+Attributes:  
+		
+	  preview
+      
+
+Expected value:      
+	  
+	  2x2
+      4x4
+      
+
+
+
+
+
+    
+
+
+    
+
+appid attribute
Widget application unique ID.
+Expected value:
+    
+		String
+    
+
+
+
+
+
+    
+
+
+    
+
+exec attribute
Widget application executable file path.
+Expected value:
+    
+		String
+    
+
+
+
+
+
+    
+
+
+    
+
+main attribute
Indicates which widget application is the main application.
+Expected value:
+    
+		true
+		false
+    
+
+
+
+
+
+    
+
+
+    
+
+update-period attribute
Indicates the update period in seconds.
+Expected value: 
+    
+Time in seconds
+    
+
+
+
+
+
+    
+
+
+    
+
+preview attribute
Relative path to the preview image.
+
+Expected value:      
+	  
+	  File name
+      
+
+For example:
++<widget-application appid="org.tizen.widget-test" exec="widget-test" main="true" update-period="0">
+   <icon>widget-test.png</icon>
+   <label>widget-test</label>
+   <support-size preview="widget-test.png">2x2</support-size>
+</widget-application>
+
 		
 
 
@@ -1240,4 +1534,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/po_file_editor_n.htm b/org.tizen.devtools/html/native_tools/po_file_editor_n.htm
index d0aea7f..67eee33 100644
--- a/org.tizen.devtools/html/native_tools/po_file_editor_n.htm
+++ b/org.tizen.devtools/html/native_tools/po_file_editor_n.htm
@@ -16,12 +16,12 @@
 
 
 
-
+
 	
 
 
 	
-		
+		 
 	
 	
 PO File Editor 
@@ -32,31 +32,34 @@
 Note 
       
 
-There is no specific wizard to create .po files. To create a .po file,  go to New > Other > General > File and save the file with the extension .po. 
+There is no specific wizard to create .po files. To create a .po file,  go to New > Other > General > File and save the file with the extension .po.
+A .po file name usually has the form <ll>_<CC>.po. Here <ll> stands for an ISO 639 2-letter language code, and <CC> stands for an ISO 3166 2-letter country code. For example, for German in Germany, the file name is de_DE.po.
+
+
       
 
 
 To open the PO file editor, double-click the .po file in the Project Explorer.
 
 Figure: PO file editor 
- 
+ 
 
     To add a new message, click +Msg. A new row is added in the message table.
 
     To remove a message, click -Msg. Select an item to be removed in the Remove Messages dialog.
 Figure: Removing messages 
- 
+ 
 
 To add a language, click +Lang. Select a language code item in the Add Languages dialog.
 	
 Figure: Adding languages 
- 
+ 
 
 To remove a language, click -Lang. Select a message ID in the Remove Languages dialog.
 
 
 Figure: Removing languages 
- 
+ 
 
 
     
diff --git a/org.tizen.devtools/html/native_tools/project_wizard_n.htm b/org.tizen.devtools/html/native_tools/project_wizard_n.htm
index baa534e..04eb40c 100644
--- a/org.tizen.devtools/html/native_tools/project_wizard_n.htm
+++ b/org.tizen.devtools/html/native_tools/project_wizard_n.htm
@@ -15,18 +15,18 @@
 
 
 
-
+
 	
 
 
 	
-		
+		 
 	
 	
 
   Project Wizard 
   The Tizen native Project Wizard is an IDE tool that is used to create a native application project. 
-  	 It allows you to define the application type and requirements and components.
+  	 It allows you to define the application type and requirements and components.
   The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen native Project Wizard uses to automatically create basic functionalities for the native application. The default project files and folders are also created.
   The following project templates are available: 
    
@@ -34,20 +34,23 @@
    This template is suitable for creating a UI application with project files.  
    
    Service Application 
-  This template is suitable for creating a service application that does not have an UI and always runs in the background. Service applications can also work with a UI application.
 
+  This template is suitable for creating a service application that does not have an UI and always runs in the background. Service applications can also work with a UI application. 
   
+  Library 
+  This template is suitable for creating a Tizen library module. Multiple application projects can reference the library modules. If a template project is created as a library project, it cannot be installed onto a device. 
+
+  
   
   
-   Project Components 
   On the main page of the Tizen native Project Wizard, you can set basic properties of a project, such as the project name, package name, location, sample, and template. 
   
-  Figure: Project Components 
-  
+  Figure: Project Wizard
+  
   
   The options you can set are listed in the following table.
    
@@ -63,7 +66,7 @@
         
-        
+        
@@ -76,7 +79,7 @@
        
-        
+        
      
-       Table: Project component options 
+       Table: Project Wizard options 
       
       
       If the selected category has samples or templates, they are displayed in the list on the left. 
        
 	  Application Type Application type 
        Select the application type. It can be previewed in the description view on the right. 
       
 	  
        
        Location Manually select the location of the project. If you check Use default location, this option is disabled. Manually select the location of the project. If you check the Use default location checkbox, this option is disabled. 
       
       
     
diff --git a/org.tizen.devtools/html/native_tools/static_analyzer_n.htm b/org.tizen.devtools/html/native_tools/static_analyzer_n.htm
index 01d2add..a667501 100644
--- a/org.tizen.devtools/html/native_tools/static_analyzer_n.htm
+++ b/org.tizen.devtools/html/native_tools/static_analyzer_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -55,16 +55,16 @@
 	To run a static analysis for your application: 
   
 In the Project Explorer view, right-click the project and select Check Potential Bugs with Build.
- 
+ 
 
 View the analysis results in the Potential Bugs view on the right side. 
-
+
  
   
   
 You can also enable the LLVM Static Analyzer to be run during the build process. Change the setting in the project properties: Tizen SDK > Static Analysis. 
  Figure: Static analysis properties 
- 
+ 
  
  
  Detectable Bugs 
@@ -121,13 +121,13 @@ Select Potential Bugs and click OK.
  
 
 Figure: Opening the Potential Bug view 
-   
-   
+   
+   
 
   In the Potential Bug view, you can group the warnings based on type or file. You can also select any particular bug and expand it to see the complete flow, which resulted in the issue. 
   
   Figure: Static Analyzer Results 
-  
+  
 
 
 
diff --git a/org.tizen.devtools/html/native_tools/tools_n.htm b/org.tizen.devtools/html/native_tools/tools_n.htm
index bedacd6..f0d49d7 100644
--- a/org.tizen.devtools/html/native_tools/tools_n.htm
+++ b/org.tizen.devtools/html/native_tools/tools_n.htm
@@ -16,18 +16,18 @@
 
 
 
-
+
 
 
 
 
     
-        
+         
     
 	
  Native Tools
 
- The Tizen SDK provides the following set of tools for mobile native application development:
+ The Tizen SDK provides the following set of tools for native application development:
 
  
diff --git a/org.tizen.devtools/html/native_tools/uibuilder_n.htm b/org.tizen.devtools/html/native_tools/uibuilder_n.htm
index 38697c2..4d316a8 100644
--- a/org.tizen.devtools/html/native_tools/uibuilder_n.htm
+++ b/org.tizen.devtools/html/native_tools/uibuilder_n.htm
@@ -35,7 +35,7 @@
 The UI Builder is not only a UI layout code generating tool, it also supports an easy-to-use programming model though the UI Builder project.
Figure: UI Builder
-
+
Supported Views and Editors
@@ -49,63 +49,63 @@
 The Navigation view displays thumbnail images of all the views in the currently selected project. If the Navigation view is not visible, open it from Window > Show View > Other > Tizen > Navigation.
Figure: Navigation view
-
+
The Navigation view provides the following features:
-
 
-View navigation
-	
-	You can see the thumbnails of the views.
-	You can select a view to edit on WYSIWYG Editor.
-	
-View management
-	
-	You can create / delete the views.
-	
-	context menu > New 
-		Figure: New View Wizard
-		
-	context menu > Add Empty View (Ctrl + a) 
-	context menu > Delete (Delete) 
-	
-		Startup View & Editing View can not be deleted
-	
-	
-	You can copy / cut / paste / move the views.
-	You can select startup view.
-	
-View template
-	
-	You can create / delete the view templates.
-	
-	context menu > Create View Template 
-		Figure: New View Template Wizard
-		
-	
-	You can use the view templates to create new view.
-	
+View navigation
+
+       You can see the view thumbnails.
+       You can select a view to edit in the WYSIWYG Editor.
+
+View management
+
+       You can create and delete views.
+	   
+       To create a new view, select New in the context menu.
+               Figure: New View Wizard
+               
+       To add an empty view, select Add Empty View (Ctrl + a) in the context menu.
+       To delete a view, select Delete (Delete) in the context menu.
+	   Startup and Editing views cannot be deleted.
+       
+       
+       You can copy, cut, paste, and move views.
+       You can select a startup view.
+
+
+View templates
+
+       You can create and delete view templates.
+	   
+       To create a new view template, select Create View Template in the context menu.
+               Figure: New View Template Wizard
+               
+       
+	   
+
+       You can use the view templates to create a new view.
+
 
-
 
                 Outline View
               
-The Outline view displays the hierarchical structure of the view currently open in the WYSIWYG Editor. If the Outline view is not visible, open it from Window > Show View > Other > General > Outline.
+The Outline view displays the hierarchical structure of the view currently open in the WYSIWYG Editor view. If the Outline view is not visible, open it from Window > Show View > Other > General > Outline.
Figure: Outline view
-
-
+
The Outline view provides the following features:

-Widget navigation
+Widget navigation
 
-	You can see widget hierarchy.
+       You can see the widget hierarchy.
 
-
-
Widget management
+
+Widget management
 
-	You can copy / cut / paste / delete / rename the widgets.
+ You can copy, cut, paste, delete, and rename widgets.
 
+
 
Properties View
@@ -115,7 +115,7 @@
 The Properties helps you to edit widget and events.
Figure: Properties view
-
+
The Properties view consists of Attributes, and Event tabs:

@@ -129,11 +129,11 @@
 The Widget specification category includes all widget-specific attributes.
 
 
-
+
Event
 In the Event tab, you can create an event handler and bind it. If you click the  button, the C editor opens. When the event handler function is focused, you can start writing code.
-
+
 
            
@@ -141,7 +141,7 @@
 
 The Resources view displays the resources in the selected project. If the Resources view is not visible, open it from Window > Show View > Other > Tizen > Resources.
Figure: Resources view
-
+
The Resources view provides the following features:

 Resource navigation
@@ -166,17 +166,17 @@
 			
 The WYSIWYG Editor view is a WYSIWYG (What You See Is What You Get) editor for the UI Builder project.
 Figure: WYSIWYG Editor
-
+
 The WYSIWYG Editor view consists of the following parts:
 
 
 Palette
 The palette contains EFL widgets, which you can select and add to the design area.
 
-Supported widgets for mobile
-Scroller, Grid, Table, Box, Panes, Panel, Button, Check, Radio, Colorselector, Entry, Spinner, Slider, Naviframe, List, Genlist, Toolbar, Multibuttonentry, Gengrid, Index, Background, Datetime, Icon, Image, Label, Progressbar, Layout
-Supported widgets for wearable
-Scroller, Grid, Table, Box, Panel, Button, Check, Radio, Entry, Spinner, Slider, Naviframe, List, Genlist, Index, Background, Datetime, Icon, Image, Label, Progressbar, Layout
+Supported widgets for mobile applications:
+Scroller, Grid, Table, Box, Panes, Panel, Button, Check, Radio, Colorselector, Entry, Spinner, Slider, Naviframe, List, Genlist, Toolbar, Multibuttonentry, Gengrid, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout
+Supported widgets for wearable applications:
+Scroller, Grid, Table, Box, Panel, Button, Check, Radio, Entry, Spinner, Slider, Naviframe, List, Genlist, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout
 
 
 
@@ -263,4 +263,4 @@
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.devtools/html/native_tools/valgrind_n.htm b/org.tizen.devtools/html/native_tools/valgrind_n.htm
index 53154ce..9accbc6 100644
--- a/org.tizen.devtools/html/native_tools/valgrind_n.htm
+++ b/org.tizen.devtools/html/native_tools/valgrind_n.htm
@@ -14,12 +14,12 @@
   
  
 
- 
+ 
 	
 
 
 	
-		
+		 
 	
 	
    Valgrind 
@@ -29,7 +29,7 @@
    
Massif Heap memory profiler.
  
    
  
-  Tizen IDE provides the interface for running Valgrind with your application easily. After performance profiling is terminated, you can see the profiling result and use it for improving performance. 
+  Tizen IDE provides the interface for running Valgrind with your application easily. After performance profiling is terminated, you can see the profiling result and use it for improving performance. 
   
   

    
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                 
 
 
 
 
 
 
 
 
 
 
  
diff --git a/org.tizen.devtools/html/scripts/showhide.js b/org.tizen.devtools/html/scripts/showhide.js
index aed9d55..2e85407 100644
--- a/org.tizen.devtools/html/scripts/showhide.js
+++ b/org.tizen.devtools/html/scripts/showhide.js
@@ -118,9 +118,8 @@ $(document).ready(function(){
 	}
 
 	$('#contents').scroll();
-	
 
-	var updateH = function(){
+	var checkBreadCrumbs = function() {
 		if (!isScrolledIntoView($('#contents .content h1')))
 		{
 			$('a.top.sms').show();
@@ -130,13 +129,13 @@ $(document).ready(function(){
 			$('.help_breadcrumbs').show();
 		}
 		$('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+	}	
+
+	var updateH = function(){
+		checkBreadCrumbs();
 		$('a.top').css('bottom', $('#footer').outerHeight());
-		
-		if($('#navigation').length) {
-			$('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
-		} else {
-			$('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
-		}
+		$('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
+
 		$('#toc').css('top', $('#toc_border').position()['top'] + 7);
 
 		if ($('a.top').is(':visible'))
@@ -151,18 +150,13 @@ $(document).ready(function(){
 		$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
 		//$('#toc').css('top', $('#toc_border').position()['top'] + 2);
 		$('#toc').css('top', $('#toc_border').position()['top'] + 7);
-		
-		if($('#navigation').length) {
-			$('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+		$('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
 		//$('#toc').css('width', $('#toc_border').width() - 40);
-		} else {
-			$('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
-		}
-		
 		$('#toc').css('width', $('#toc_border').width() - 49);
 	};
 
 	var updateH_no_toc = function() {
+		checkBreadCrumbs();
 		if (!isScrolledIntoView($('#contents .content h1')))
 		{
 			$('a.top.sms').show();
diff --git a/org.tizen.devtools/html/web_tools/code_beautifier_w.htm b/org.tizen.devtools/html/web_tools/code_beautifier_w.htm
index a567ced..7b939f1 100644
--- a/org.tizen.devtools/html/web_tools/code_beautifier_w.htm
+++ b/org.tizen.devtools/html/web_tools/code_beautifier_w.htm
@@ -14,7 +14,7 @@
  
 
- 
+ 
 
 
 	
diff --git a/org.tizen.devtools/html/web_tools/code_minifier_w.htm b/org.tizen.devtools/html/web_tools/code_minifier_w.htm
index 63d5451..de2dc84 100644
--- a/org.tizen.devtools/html/web_tools/code_minifier_w.htm
+++ b/org.tizen.devtools/html/web_tools/code_minifier_w.htm
@@ -14,7 +14,7 @@
   
  
 
- 
+ 
 
 
 	
diff --git a/org.tizen.devtools/html/web_tools/command_line_interface_w.htm b/org.tizen.devtools/html/web_tools/command_line_interface_w.htm
index f4b4ee0..883dbbf 100644
--- a/org.tizen.devtools/html/web_tools/command_line_interface_w.htm
+++ b/org.tizen.devtools/html/web_tools/command_line_interface_w.htm
@@ -14,7 +14,7 @@
   
  
 
- 
+ 
 	
 	
 	
@@ -23,7 +23,7 @@
 
 
 
-		
+		 
 	
  Command Line Interface
 
@@ -33,19 +33,8 @@
 export PATH=$<TIZEN_SDK_HOME>/tools/ide/bin
 
 
-  
 
     
   
-    
-     
-      
-     
-     
-      
-     
-    
-  Note
This tool is supported in mobile applications only.  
-
 The CLI in the IDE provides the functional commands for:
-
+
 Setting CLI configuration options
 Displaying a sub-command list
 Creating a project
@@ -89,7 +78,7 @@ tizen cli-config [-g|--global] <key>=<value>
 tizen cli-config -l | --list

Command	Support	Shortcut
Toggle editor		Ctrl+Tab
Toggle editor reverse		Shift+Ctrl+Tab
Toggle page designer mode		Ctrl+'

@@ -339,14 +379,14 @@
Installation location for the application. - By default, set to the internal and developer may select auto or prefer-external to the installation to an external device, sunc as an SD card. + By default, this value is set to "internal-only". You can select other values to install to an external device, such as an SD card. Expected value: - One of the following values: "auto", "internal-only", "prefer-external" + "auto" (the platform decides where the application is installed) + "internal-only" + "prefer-external" (preferably installed to an external storage device; however, if the external storage device has no empty space, the application is installed in the internal storage) + - auto - The platform will decide where the app is installed. - internal-only - prefer-external - Asked to install an external storage device, but is not guaranteed. If there is no empty space in the external storage device, it is installed on the internal.

+launch_mode attribute
Application launch mode. + By default, this value is set to caller. + Expected value: + + single (launched as a main application) + caller (caller application defines the launch mode with the app_control_set_launch_mode() function) + +

@@ -1184,39 +1286,231 @@
- targeted requirements for specific device categories which layer on top of the Tizen Common Platform, including additional components for devices, APIs, and hardware requirements. Platform must conform to the Tizen common requirements as well as at least one profile. + Targeted requirements for specific device categories, which layer on top of the Tizen Common Platform, including additional components for devices, APIs, and hardware requirements. The platform must conform to the Tizen common requirements as well as at least 1 profile. Occurrences: 1 or more (optional) Attributes: - name + name

name attribute
profile name +	Profile name. Expected value: For example: mobile - wearabel + wearable

+<icon> element
Widget application icon image. + Occurrences: + + 1 + + + Expected value: + + Icon file name + +

+<label> element
Widget application text. + Occurrences: + + 1 + + + Expected value: + + Label value in string + +

+<support-size> element
Size supported by the widget application. + Occurrences: + + 1 + + Attributes: + + preview + + + Expected value: + + 2x2 + 4x4 + +

+appid attribute
Widget application unique ID. + Expected value: + + String + +

+exec attribute
Widget application executable file path. + Expected value: + + String + +

+main attribute
Indicates which widget application is the main application. + Expected value: + + true + false + +

+update-period attribute
Indicates the update period in seconds. + Expected value: + + Time in seconds + +

+preview attribute
Relative path to the preview image. + + Expected value: + + File name + +

- Table: Project component options + Table: Project Wizard options
If the selected category has samples or templates, they are displayed in the list on the left.
Application Type	Application type	Select the application type. It can be previewed in the description view on the right.
Location	Manually select the location of the project. If you check Use default location, this option is disabled.	Manually select the location of the project. If you check the Use default location checkbox, this option is disabled.

Note
This tool is supported in mobile applications only.

-l, --list:
Shows the list of all CLI configuration keys and values.

-g, --global: @@ -98,7 +87,7 @@ tizen cli-config -l | --list Queries, sets, replaces, and unsets CLI setting options.

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

The CLI configuration keys are:

default.profiles.path=<path of profile.xml>
Sets the path to the profile.xml file.

Set the profile.xml path globally:

 $ tizen cli-config -g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
@@ -133,7 +122,7 @@ tizen list web-project
 	 Shows what kind of template each profile supports, and the list corresponding with the given sub-command.
 	 
       
-
+
 List all templates:
  $ tizen list web-project
@@ -165,7 +154,7 @@ $ tizen list web-project
  tizen create web-project [-p|--profile <profile name>] [-t|--template <predefined template>] 
                          [-n|--name <project name>] [-- <project location>]
-
+
 -p, --profile:
 Sets the profile name.
 -t, --template:
@@ -177,7 +166,7 @@ tizen create web-project [-p|--profile <profile name>] [-t|--template <
 
 	 Creates a Tizen Web project. If an option is empty, the default project is generated from the default template.
       
-
+
 Create the template project based on the basic Tizen mobile UI project:
  $ tizen create web-project -p mobile-2.3 -t BasicBasicApplication -n basic -- /home/workspace
@@ -190,7 +179,7 @@ $ tizen create web-project -p mobile-2.3 -t BasicBasicApplication -n basic -- /h
  tizen build-web [-opt | --optimize] [-euf | --exclude-uifw] [-e | --exclude] [-out | --output] [--]
 
-
+
 -opt, --optimize:
 Optimizes the application size. The Javascript and CSS files are minimized and the Tizen Web UI framework source is excluded. The related link address is modified to a platform-dependent location instead.
 
@@ -209,7 +198,7 @@ tizen build-web [-opt | --optimize] [-euf | --exclude-uifw] [-e | --exclude] [-o
 	 In the Web application, there is no need to build a project. However, you can optimize the application (for example, minimize the JavaScript or CSS file and exclude the Tizen Web UI framework sources).
 	 
       
-
+
 Build the project with default options:
  $ tizen build-web -- /home/workspace/basic
@@ -222,22 +211,24 @@ $ cd /home/workspace/basic/.buildResult
      tizen package  
       
 -tizen package [-t | --type <package type>] [-s | --sign <security profile name>] [--]
+tizen package [-t | --type <package type>] [-s | --sign <security profile name>] [-r | --reference <native package file path>] [--]
 
-
+
 -t, --type:
 Sets the package type.
 -s, --sign:
 Sets the profile name to use for signing.
+-r, --reference:
+Sets the reference of the native package file (tpk) for hybrid application packing. Various options are allowed.
 --:
-Sets the built project path.
+Sets the built project path or package file path with a file name.
 
-	 Packages the Tizen application with signing.
+	 Packages the Tizen application with signing. If there is a package file path in the options, the package is re-signed. And if a reference option is given, the package is re-signed with the referenced packages.
 The Tizen application is signed with a certified profile named profiles.xml. You can create the default profile from the Tizen IDE, which generates the file in a hidden directory in your workspace (<Your workspace directory>/.metadata/.plugins/org.tizen.common.sign/profiles.xml). Set the path of the profile.xml file once before packaging the Tizen application (you can use the tizen cli-config command).
 
 	 
       
-
+
 Set up the path of the profile.xml file that you already have:
  $ tizen cli-config -g default.profiles.path=/home/workspace/profiles.xml
@@ -253,7 +244,16 @@ $ tizen package --type wgt --sign myprofile -- /home/workspace/basic/.buildResul
 $ cd /home/workspace/basic/.buildResult
 
 basic.wgt
-
+
+Re-sign the package:
++$ tizen package --type wgt --sign myprofile2 -- /home/workspace/basic/.buildResult/basic.wgt
+
+Re-sign a hybrid application package:
++$ tizen package --type wgt --sign myprofile2 --reference /home/workspace/a.tpk --reference /home/workspace/b.tpk -- /home/workspace/basic/.buildResult/basic.wgt
+
+
 
 	  
      
@@ -262,7 +262,7 @@ basic.wgt
  tizen install <-t | -target <target name>> <-n | --name <package name>> [--]
 
-
+
 -t, --target:
 Sets the target, which installs the Tizen package.
 -n, --name:
@@ -273,7 +273,7 @@ tizen install <-t | -target <target name>> <-n | --name <packa
 	 Installs a Tizen application to a Tizen device.
 	 
       
-
+
 Install the basic application named basic.wgt to the emulator-26101:
  $ tizen install --target emulator-26101 --name basic.wgt -- /home/workspace/basic/.buildResult
@@ -286,7 +286,7 @@ $ tizen install --target emulator-26101 --name basic.wgt -- /home/workspace/basi
  tizen uninstall <-t | --target <target name>> <-p | --pkgid <package id>>
 
-
+
 -t, --target:
 Sets the target, which uninstalls the Tizen package.
 -p, --pkgid:
@@ -294,7 +294,7 @@ tizen uninstall <-t | --target <target name>> <-p | --pkgid <p
 
 	 Uninstalls a Tizen application from a Tizen device.
       
-
+
 Uninstall the basic application whose pkgid is cRG1sLZpWb from the emulator-26101:
  $ tizen uninstall --target emulator-26101 --pkgid cRG1sLZpWb
@@ -307,7 +307,7 @@ $ tizen uninstall --target emulator-26101 --pkgid cRG1sLZpWb
  tizen run <-t | --target <target name>> <-p | --pkgid <package id>>
 
-
+
 -t, --target:
 Sets the target, which runs the Tizen package.
 -p, --pkgid:
@@ -316,7 +316,7 @@ tizen run <-t | --target <target name>> <-p | --pkgid <package
 	 Runs the Tizen application.
 	 
       
-
+
 Run the basic application whose pkgid is org.tizen.basic  on the emulator-26101:
  $ tizen run --target emulator-26101 --pkgid cRG1sLZpWb
@@ -331,7 +331,7 @@ tizen version
 
 	 Prints the CLI version number of the executable and exits.
       
-
+
 Show the version:
  $ tizen version
diff --git a/org.tizen.devtools/html/web_tools/config_editor_w.htm b/org.tizen.devtools/html/web_tools/config_editor_w.htm
index 9955389..357c34c 100644
--- a/org.tizen.devtools/html/web_tools/config_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/config_editor_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
          
     
@@ -33,8 +33,8 @@
 
   Configuration Editor
 
-  The Tizen Web widget configuration file is composed of XML elements, including the <widget> element as its root and other elements representing the application information, such as configuration elements and Tizen extending configuration elements for mobile and wearable applications. Note that although the <feature> element is a W3C element, a modified Tizen extended version of it is used.
-  The configuration file can be edited with the widget configuration editor, or you can modify the XML structure directly using the configuration text editor. To open the widget configuration editor, double-click the config.xml file in the Project Explorer view of the IDE. To use the configuration text editor, right-click the config.xml file in the Project Explorer view and select Open with > Text Editor.
+  
The Tizen Web application configuration file is composed of XML elements, including the <widget> element as its root and other elements representing the application information, such as configuration elements and Tizen extending configuration elements for mobile and wearable applications. Note that although the <feature> element is a W3C element, a modified Tizen extended version of it is used.
+  The configuration file can be edited with the Web application configuration editor, or you can modify the XML structure directly using the configuration text editor. To open the Web application configuration editor, double-click the config.xml file in the Project Explorer view of the IDE. To use the configuration text editor, right-click the config.xml file in the Project Explorer view and select Open with > Text Editor.
    
    
@@ -86,7 +86,7 @@
     
-        
+        
@@ -165,6 +165,7 @@
         
+	
     
@@ -269,7 +270,7 @@
     
-     
@@ -304,9 +305,9 @@
      
-     
@@ -317,9 +318,9 @@
      
-     
@@ -328,12 +329,12 @@
   
    
     
         <content> <content>
     
     
         
         <tizen:application> (in mobile or wearable)
     

         
         <tizen:content> (in mobile or wearable)
     
       Represents the root element of a configuration document.
 Expected children: 
-	<name>, <description>, <author>, <license>, <icon>, <content>, <feature>, <preference>, <access>, <tizen:account>, <tizen:app-control>, <tizen:application>, <tizen:content>, <tizen:privilege>, <tizen:setting>, and <tizen:profile>
 Attributes: 
+<name>, <description>, <author>, <license>, <icon>, <content>, <feature>, <preference>, <access>, <tizen:account>, <tizen:app-control>, <tizen:application>, <tizen:content>, <tizen:privilege>, <tizen:setting>, and <tizen:profile>
 Attributes: 
     xml:lang
     dir
     id
@@ -289,9 +290,9 @@
      <name> element
     
      Represents the widget name used for example, in the application menu.
 Expected children: 
+      Represents the Web application name used for example, in the application menu.
 Expected children: 
     <span> and <text node>
 Attributes:
-    xml:lang
+    xml:lang
     dir
     short
 
     
<description> element
     
      Represents text describing the purpose of the widget.
 Expected children: 
+      Represents text describing the purpose of the Web application.
 Expected children: 
     <span> and <text node>
 Attributes:
-    xml:lang
+    xml:lang
     dir
 
     
    
<author> element
     
      Represents the person that created the widget.
 Expected children: 
+      Represents the person that created the Web application.
 Expected children: 
     <span> and <text node>
 Attributes:
-xml:lang
+xml:lang
     dir
     href
     email
 
   
-    
+    
-     
-     
-     
@@ -376,8 +377,8 @@
      
-     
-     
@@ -405,7 +406,7 @@
     
@@ -417,7 +418,7 @@
     
@@ -450,20 +451,20 @@
      
    

      <content> element
     
      Represents the boot-strapping mechanism used to point to the main file of the widget.
  Attributes:
-     xml:lang
+      Represents the boot-strapping mechanism used to point to the main file of the Web application.
  Attributes:
+     xml:lang
     dir
     encoding
     src
@@ -347,8 +348,8 @@
      <icon> element
     
      Represents the widget icon.
  Attributes:
-     xml:lang
+      Represents the Web application icon.
  Attributes:
+     xml:lang
     dir
     src
     width
@@ -362,9 +363,9 @@
      <license> element
     
      Represents the license under which the widget is distributed.
 Expected children: 
+      Represents the license under which the Web application is distributed.
 Expected children: 
     <span> and <text node>
 Attributes:
-    xml:lang
+    xml:lang
     dir
     href
     
<preference> element
     
      Used to declare preferences as key-value pairs for the widget for use at runtime.
 Attributes:
-    	 
+      Used to declare preferences as key-value pairs for the Web application for use at runtime.
 Attributes:
+    	 
 	   nameThe maximum length may be limited to 80 bytes.  In that case, leftover bytes are ignored.
 	   valueThe maximum length may be limited to 8192 bytes.  In that case, leftover bytes are ignored.
 	   readonly
@@ -392,7 +393,7 @@
      <access> element
     
      Used to control network access from within a widget and to request access to certain network resources from the user agent.
 Attributes:
 origin
+      Used to control network access from within a Web application and to request access to certain network resources from the user agent.
 Attributes:
 origin
     subdomains
 
     
    

       Represents the generic container used mainly for internationalization.
 Expected children: 
     <span> and <text node>
 Attributes:
-    xml:lang
+    xml:lang
     dir
     
    
     
       Used to declare parameters to be used with a feature in mobile and wearable applications.
 Attributes:
-     xml:lang
+     xml:lang
     dir
     name
     value
  Used to register account provider information.
 
      Occurrences: 
-    
+    
        0 or more
     
     Expected children: 
-      
+      
        icon Mandatory. Since the icons are used in the device under Settings > Accounts, place them in a shared directory.
        Attributes:
-       Account - File path of the account provider icon. The icon size is 72 x 72 pixels.
+       Account - File path of the account provider icon. The icon size is 72 x 72 pixels.
        AccountSmall - File path of the account provider small icon. The icon size is 45 x 45 pixels. 
        display-name Mandatory; display name of the account provider
        capabilityOptional; capability of the account provider. Capabilities are defined in the http://<VENDOR_INFORMATION>/accounts/capability/<NAME> IRI format.
       
      Attributes: 
-      
+      
        multiple-account-support Mandatory; indicates whether multiple accounts are supported (available values: true, false)
 
       
Example: 
<tizen:account multiple-account-support="false">
@@ -485,11 +486,11 @@
     

       Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see Application Controls.
      Occurrences: 
-    
+    
        0 or more
     
      Expected children: 
-      
+      
        src Mandatory; page handling the requests
        operation Mandatory; string that defines the action to be performed
        uri and mimeOptional; additional parameters used for resolving application control requests
@@ -512,11 +513,11 @@
     

       Used to uniquely identify a Tizen application.
      Occurrences: 
-    
+    
        1
     
      Attributes: 
-      
+      
        id Mandatory; Tizen application ID, which is a combination of the Tizen package ID and project name. The application ID is unique in the device.
The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.
        package Mandatory; Tizen package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store.
        required_version Mandatory; Tizen API version required for running the Web application
@@ -526,6 +527,8 @@
     
    
   
+
+ 
   
     Tizen-hosted Web Application
   
@@ -535,14 +538,14 @@
     
@@ -580,11 +583,11 @@
     
@@ -636,12 +639,12 @@
   
     
       Used to point to a document which is hosted on an external server and acts as the Web application start page. The Tizen WRT allows the start page to be hosted on an external server.
-     If the start page is contained in the widget package, it is defined with the <content> W3C element. If both <content> and <tizen:content /> elements are defined, the <tizen:content /> element is used.
+     If the start page is contained in the widget package, it is defined with the <content> W3C element. If both <content> and <tizen:content /> elements are defined, the <tizen:content /> element is used.
      Occurrences: 
-    
+    
        0 or more
        If more than 1 <tizen:content /> elements are specified, the first instance of the element is used.
     
      Attributes: 
-      
+      
        srcMandatory; URI of the external start page
       
 
@@ -560,11 +563,11 @@
     

       Used to get the required API access privileges for the Web application.
      Occurrences: 
-    
+    
        0 or more (if duplicates, the first occurrence is considered and all others ignored)
     
      Attributes: 
-      
+      
        name Mandatory; URI of the Device API privilege
       
Example: 
<tizen:privilege name="http://tizen.org/privilege/application.launch" />
 
     

       Used to define additional application settings.
      Occurrences: 
-    
+    
        0 or more
     
      Attributes: 
-      
+      
        background-support Optional; application execution continues when it is moved to the background (available values enable, disable (default))
        context-menu Optional; context menu is displayed when the user clicks, for example, an image, text, or link (available values: enable (default), disable)
        encryption Optional; Web application resources (HTML, JavaScript, and CSS files) are stored encrypted (available values: enable, disable (default))
@@ -593,23 +596,23 @@
       hwkey-event Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: enable (default),   disable)
If this option is enabled, the tizenhwkey custom event is sent to the Web application. The tizenhwkey event object has a keyName attribute (available values: menu and back).
 
 
-      
Example: 
/* Web application execution is not suspended */
-/* when the application is sent to the background */
+      
Example: 
<!--Web application execution is not suspended-->
+<!--when the application is sent to the background-->
 <tizen:setting background-support="enable" />
 
-/* Context menu is not displayed */
+<!--Context menu is not displayed-->
 <tizen:setting context-menu="disable" />
 
-/* Web applications resources are stored encrypted by the WRT */
+<!--Web applications resources are stored encrypted by the WRT-->
 <tizen:setting encryption="enable" />
 
-/* Viewport orientation is locked to "landscape" */
+<!--Viewport orientation is locked to "landscape"-->
 <tizen:setting screen-orientation="landscape" />
 
-/* Installation location is set to "internal-only" */
+<!--Installation location is set to "internal-only"-->
 <tizen:setting install-location="internal-only" />
 
-/* Hardware key event is sent to the Web application when the hardware key is pressed */
+<!--Hardware key event is sent to the Web application when the hardware key is pressed-->
 <tizen:setting hwkey-event="enable" />
 
     
    
 
      Occurrences: 
-    
+    
        0 or more
     
      Attributes: 
-      
-       name Mandatory; feature key URI
+      
+       name Mandatory; feature key URI
       
Example: 
<feature name="http://tizen.org/feature/network.bluetooth" />
 
     
    
@@ -655,7 +658,7 @@
     
       Used to define an additional content security policy for a packaged or hosted application.
      Occurrences: 
-    
+    
        0 or more
        If more than 1, the first occurrence is applied.
     
@@ -672,7 +675,7 @@
     
       Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.
      Occurrences: 
-    
+    
        0 or more
        If more than 1, the first occurrence is applied.
     
@@ -691,7 +694,7 @@
     
       Used to define a list of URL domains that are allowed to be navigated in using the Web application.
      Occurrences: 
-    
+    
        0 or more
        If more than 1, the first occurrence is applied.
     
@@ -708,11 +711,11 @@
     
       Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen Application API.
      Occurrences: 
-    
+    
        0 or more
     
      Attributes: 
-      
+      
        key
            Mandatory; unique key string.
            The maximum length can be limited to 80 bytes.  In this case, leftover bytes are ignored.
@@ -737,11 +740,11 @@
      
       Used to define the application profile.
 	 Occurrences:  
-	 
+	 
        1
 	
 	 Attributes:  
-       
+       
        name Mandatory; string. 
       
Example: 
<tizen:profile name="mobile" />
 
      
@@ -773,17 +776,31 @@
      
       Used to uniquely identify a Tizen wearable application.
 	 Occurrences:  
-	 
+	 
        1 
 	
 	 Attributes:  
-       
-       id Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.
The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes. 	   
-	   package Mandatory;  Tizen wearable package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.
-       required_version Mandatory; Tizen API version required for running the Web application 
+       
+        id Mandatory;  Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.
The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.        	  
+       package Mandatory;  Tizen wearable package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.
+       required_version Mandatory; Tizen API version required for running the Web application
+       ambient_support Optional; Sets whether the Web application supports the ambient mode (available values: enable, disable (default))
If this option is enabled, the application can be shown in the ambient mode.
+   
+     
+     
+      
+     
+     
+      
+     
+    
+    Note
The ambient_support option is only used for watch applications, and ignored in all non-watch applications. 
+
       
Example: 
<tizen:application id="1234abcDEF.projectname"  
                    package="1234abcDEF"
-                   required_version="2.1" />
 
+                   required_version="2.1"
+                   ambient_support="enable" />
 
+
      
     
    
@@ -796,11 +813,11 @@
      
       Used to get the required API access privileges for the Web application.
 	 Occurrences:  
-	 
+	 
        0 or more 
 	
 	 Attributes:  
-       
+       
        name Mandatory; URI of the Device API privilege 
       
Example: 
<tizen:privilege name="http://tizen.org/privilege/application.launch" />
  
      
@@ -817,11 +834,11 @@
     
       Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see Application Controls.
      Occurrences: 
-    
+    
        0 or more
     
      Expected children: 
-      
+      
        src Mandatory; page handling the requests
        operation Mandatory; string that defines the action to be performed
        uri and mimeOptional; additional parameters used for resolving application control requests
@@ -844,11 +861,11 @@
      
       Used to define additional application settings.
 	 Occurrences:  
-	 
+	 
        0 or more 
 	
 	 Attributes:  
-       
+       
      
       background-support Optional; Sets whether Web Application is suspended when it goes to the background (available values: enable ,   disable (default))
If this option is enabled, Web Application is not suspended when it goes to the background. 
       context-menu Optional; Sets whether the context menu is shown (available values: enable (default),   disable)
If this option is enabled, the context menu is visible to the user.
@@ -878,11 +895,11 @@
      
       Used to define the start page to be hosted on an external server.
 	 Occurrences:  
-	 
+	 
        0 or moreIf more than 1, the first occurrence is considered and all others ignored.
 	
 	 Attributes:  
-       
+       
      
       src Mandatory; URI of an external start page 
 
@@ -901,7 +918,7 @@
      
       Used to define an additional content security policy for a packaged or hosted application. 
 	 Occurrences:  
-	 
+	 
        0 or more
 	   If more than 1, the first occurrence is applied. 
 	
@@ -919,7 +936,7 @@
      
       Used to define an additional content security policy for a packaged or hosted application for monitoring purposes. 
 	 Occurrences:  
-	 
+	 
        0 or more 
 	   If more than 1, the first occurrence is applied. 
 	
@@ -939,7 +956,7 @@
      
       Used to define a list of URL domains that are allowed to be navigated in using the Web application. 
 	 Occurrences:  
-	 
+	 
        0 or more 
 	   If more than 1, the first occurrence is applied. 
 	
@@ -957,11 +974,11 @@
      
       Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen Application API.
 	 Occurrences:  
-	 
+	 
        0 or more 
 	
 	 Attributes:  
-       
+       
        key
            Mandatory; unique key string.
            The maximum length may be limited to 80 bytes. In that case, leftover bytes are ignored.
@@ -995,11 +1012,11 @@
     
     
 	 Occurrences:  
-	 
+	 
        0 or 1 
 	
 	 Expected children:  
-     
+     
        uuid Mandatory; universally unique, an unique identifier that distinguishes an IME from each other, displayed in the form of standard UUID (8-4-4-4-12 for a total of 36 characters) 
        languages Mandatory; list of input languages that the current IME supports
     
@@ -1035,7 +1052,7 @@
     
-      
       Used to define the supported input language of the current IME type application.
 	 Occurrences:  
-	 
+	 
        1 or more 
 	
          Example: 
<tizen:languages>
@@ -1053,20 +1070,21 @@
       <tizen:category /> element
     
      Used to define the Tizen wearable application type to be watch clock.
+      Used to define the categories to which the service application belongs.
          Occurrences: 
-        
-       0 or more
-	If omitted, the widget defaults to the watch widget type.
+        
+       0 or more
         
          Attributes: 
-      
+      
        name Mandatory; string
       
Example: 
<tizen:category name="http://tizen.org/category/wearable_clock" />

     
    
   
 
+
+  
       Tizen Service 
    
@@ -1077,11 +1095,11 @@
       
@@ -1139,11 +1157,11 @@
      
@@ -1159,11 +1177,11 @@
      
@@ -1179,7 +1197,7 @@
      
@@ -1195,11 +1213,11 @@
      
@@ -1237,11 +1255,11 @@
      
@@ -1270,12 +1288,12 @@
    
     Used to define Web Service Application.
 
 	 Occurrences:  
-	 
+	 
        0 or more 
 	
      Expected Children: 
-       
+       
        <tizen:name />
        <tizen:icon />
        <tizen:content />
@@ -1090,13 +1108,13 @@
        <tizen:category />
       
 	 Attributes:  
-       
+       
        id Mandatory; Tizen service ID, which is a combination of the Tizen wearable package ID and service name.
The service ID is a set of characters (0~9, a~z, A~Z) and unique in the device. The minimum value is 1 byte and maximum value is 52 bytes. 
       
-       
+       
        auto-restart Optional; Sets whether service application is re-launched automatically when it is terminated. (available values: true , false (default)) 
       
-       
+       
        on-boot Optional; Sets whether service application is launched automatically on device booting time. (available values: true , false (default)) 
       
       Example: 
<tizen:service id="webService.application" auto-restart="true" on-boot="false">
@@ -1119,11 +1137,11 @@
     
 
       Used to define the name of Web Service Application.
 	 Occurrences:  
-	 
+	 
        1 or more 
 	
 	 Attributes:  
-       
+       
        xml:lang Optional; specifies the language of the service name (for available values, see the IANA Language Subtag) 
       
 	
 
       Used to define the icon of Web Service Application.
 	 Occurrences:  
-	 
+	 
        0 or 1 
 	
 	 Attributes:  
-       
+       
        src Mandatory; file path of the Web Service Application icon. The path is relative to the source Web application directory. 
       
 	
 
       Used to define the start page of the Web Service Application.
 	 Occurrences:  
-	 
+	 
        1 
 	
 	 Attributes:  
-       
+       
        src Mandatory; start JavaScript file path of the Web Service Application. The path is relative to the source Web application directory. 
       
 	
 
       Used to define the description of the Web Service Application.
 	 Occurrences:  
-	 
+	 
        0 or 1 
 	
 	
 
       Used to define metadata information shared with other Web Applications. The defined metadata can be accessed (read-only) through the Tizen Application API.
 	 Occurrences:  
-	 
+	 
        0 or more 
 	
 	 Attributes:  
-       
+       
        key Mandatory; unique key string 
        value Optional; string 
       
@@ -1216,11 +1234,11 @@
     
 
       Used to define the categories that the service application belongs to.
 	 Occurrences:  
-	 
+	 
        0 or more 
 	
 	 Attributes:  
-       
+       
        name Mandatory; string. 
       
 	
 
       Used to define the application profile.
 	 Occurrences:  
-	 
+	 
        1
 	
 	 Attributes:  
-       
+       
        name Mandatory; string. 
       
Example: 
<tizen:profile name="wearable" />
 
     
 
      Occurrences: 
-    
+    
        0 or more
     
      Attributes: 
-      
-       name Mandatory; feature key URI
+      
+       name Mandatory; feature key URI
       
Example: 
<feature name="http://tizen.org/feature/network.bluetooth" />
 
     
    
@@ -1304,4 +1322,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.devtools/html/web_tools/content_assist_w.htm b/org.tizen.devtools/html/web_tools/content_assist_w.htm
index 2a073b0..13d018a 100644
--- a/org.tizen.devtools/html/web_tools/content_assist_w.htm
+++ b/org.tizen.devtools/html/web_tools/content_assist_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
 	
 
 
@@ -29,7 +29,7 @@
   Content assist is a functionality provided in parts of the Tizen IDE. It helps you to write quick and efficient code as it completes the names of the APIs automatically on writing the initial part of the API name. 
   Tizen IDE supports Web API, W3C API, jQuery API, and jQuery Mobile API. User-defined and third party APIs can be supported by expanding the content assist functionality. 
   Figure: Content assist in the JavaScript editor 
-   
+   
   In the JavaScript editor or HTML editor, press Ctrl + Space to complete the code. A list of available code completions opens. To use content assist: 
    
    Navigate and select lines in the list. This displays the JSDoc information of the selected line. 
@@ -46,7 +46,7 @@
      
     
    
-  For more information, see Specifying Privileges in the Privilege Tab. 
+  For more information, see Specifying Privileges in the Privilege Tab. 
   To expand content assist functionality to user-defined and third party APIs: 
    
    Prepare an API definition document using the WIDL standard. The Tizen IDE supports the .xml and .widlprocxml files. 
diff --git a/org.tizen.devtools/html/web_tools/css_editor_w.htm b/org.tizen.devtools/html/web_tools/css_editor_w.htm
index 49e1b61..d5d9d0c 100644
--- a/org.tizen.devtools/html/web_tools/css_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/css_editor_w.htm
@@ -14,7 +14,7 @@
   
  
 
- 
+ 
 
 
 	
@@ -51,7 +51,7 @@
     
    Automatic check If you save a file, the project is built and syntax is checked automatically.
    Figure: Checking CSS automatically 
-    
  
+      
      
 
 
diff --git a/org.tizen.devtools/html/web_tools/css_preview_w.htm b/org.tizen.devtools/html/web_tools/css_preview_w.htm
index 1fbba91..281aecb 100644
--- a/org.tizen.devtools/html/web_tools/css_preview_w.htm
+++ b/org.tizen.devtools/html/web_tools/css_preview_w.htm
@@ -14,56 +14,44 @@
   
  
 
- 
+ 
 
 
 	
 		 
 	
 	
-  CSS Preview 
-  The Tizen Web IDE provides the CSS Preview view for instantly previewing the entire look and feel of the CSS. All the changes made in the CSS file editor are automatically reflected in the CSS preview.
-    Figure: CSS Preview (basic mobile sample)
-    
-     
-    
-    The CSS preview view has the following features:
-    
-     CSS preview shortcut
-     Clear selector representation, such as Class
-       class1 and Adjacent
-       div+p
-     Support for the <base>
-      element
-     
-     Support for <!doctype
-       html>
-     IE compatibility using <meta
-       http-equiv="X-UA-Compatible"
-       content="IE=EmulateIE7" />
-     Support for a multi-depth selector
-    
-    To preview a CSS file in the CSS Preview view, right-click the project in the Project Explorer view and select Preview, or use the Ctrl + 4 hotkey.
-    
-    
-     
+  CSS Preview  
+  
+The Tizen Web IDE provides the CSS Preview window for instantly previewing the entire look and feel of the CSS. All the changes made in the CSS file editor are automatically reflected in the CSS preview.
+	Figure: CSS Preview (basic mobile application)
+    
+      
+The CSS preview has the following features:
+
+    CSS preview shortcut
+    Clear selector representation, such as Class class1 and Adjacent div+p
+    Support for the <base> element
+    Support for <!doctype html>
+	IE compatibility using <meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" />
+	Support for a multi-depth selector
+
+To preview a CSS file in the CSS Preview window, right-click the project in the Project Explorer view and select Preview, or use the Ctrl + 4 hotkey.
+
+  
-       
+       
-       
+       
-     
-    
       Constraint Note
       
       
-       - The CSS Preview is based on the Google Chrome™ browser.
-       - The CSS Preview may show differ from the actual product. It supports to see the overall outline.
-       - Some selectors and elements do not work on CSS Preview. The following constraints apply to the CSS preview:
+	   The CSS preview is based on the Google Chrome™ browser.
+		The CSS preview can differ from the actual product. It allows you to see the overall outline.
+		Some selectors and elements do not work on the CSS preview.
         
+  
+  
+  
+
  
 
 
diff --git a/org.tizen.devtools/html/web_tools/html_editor_w.htm b/org.tizen.devtools/html/web_tools/html_editor_w.htm
index 3d3740d..fde9161 100644
--- a/org.tizen.devtools/html/web_tools/html_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/html_editor_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
     
          
     
@@ -96,7 +96,7 @@
   
    Edit HTML tag attributes in the Properties view
     Figure: Properties view
-    
+    
    
    Integration with source editor
   
@@ -260,8 +260,10 @@
 You can toggle the visibility of the breadcrumb control by pressing Ctrl+8 or the Breadcrumb toolbar icon.
 You can set the visibility of the breadcrumb control.
 Select Window > Preferences > Tizen SDK > Web > Editor > HTML Editor. By default, the breadcrumb is shown in the HTML editor.
-Figure: Toggle the Breadcrumb icon in the toolbar
 
-Figure: Breadcrumb in the HTML editor
 
+Figure: Toggle the Breadcrumb icon in the toolbar 
+
+Figure: Breadcrumb in the HTML editor 
+
 To show the child elements, select the arrow button of each element. To navigate to the element, select the element name.
 
 Advanced Content Assist in Mobile Applications
@@ -282,7 +284,8 @@
 
Propose code completion of id or class attribute values of all elements.
 id: The list of id selectors of linked CSS files.
 class: The list of class selectors of linked CSS files.
-Figure: Content assist with <img> element
 
+Figure: Content assist with <img> element 
+
 In the HTML editor, press Ctrl + Space to complete the code. A list of available code completions opens. To use content assist:
 Navigate and select the lines in the list.
 Additional information of the selected line is displayed.
@@ -300,7 +303,8 @@
 Supports a preview of the HTML file at the src attribute value of the <iframe> element.
 Supports a preview of the image file at the src attribute value of the <img> element.
 Support a preview of the CSS rule at the id or class attribute value of all elements, if the selector (that is made by the id or class value) exists.
-Figure: Content hover with <link> element
 
+Figure: Content hover with <link> element 
+
 To use the hover feature, in the HTML editor, hover the mouse cursor at the above attributes.
 
 Advanced File Refactoring in Mobile Applications
@@ -313,8 +317,10 @@
 When a file is moved, other files to which the moved file belongs are changed at the linked line of codes.
 File delete refactoring
 When a file is deleted, other files to which the deleted file belongs are commented out at the linked line of codes.
-Figure: Before the CSS file rename refactoring
 
-Figure: After the CSS file rename refactoring
 
+Figure: Before the CSS file rename refactoring 
+
+Figure: After the CSS file rename refactoring 
+
 
 
 
diff --git a/org.tizen.devtools/html/web_tools/html_preview_w.htm b/org.tizen.devtools/html/web_tools/html_preview_w.htm
index 388f223..0617c1d 100644
--- a/org.tizen.devtools/html/web_tools/html_preview_w.htm
+++ b/org.tizen.devtools/html/web_tools/html_preview_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 
 
@@ -33,9 +33,8 @@
 	
Some network environments do not support live editing. 
   
   To preview a HTML file in the HTML Preview view, right-click the project in the Project Explorer view and select Preview, click the preview icon in the toolbar, or use the Ctrl + 4 hotkey. The toolbar icon is shown in the following figure. 
-  Figure: Toolbar icon 
-  
+  Figure: Toolbar icon 
+  
 
 Preview acts as your preference as configured by you. You can set the preview in Window > Preferences > Tizen SDK > Web > Live Editing. 
 
diff --git a/org.tizen.devtools/html/web_tools/js_analyzer_w.htm b/org.tizen.devtools/html/web_tools/js_analyzer_w.htm
index 934e73f..6f5e220 100644
--- a/org.tizen.devtools/html/web_tools/js_analyzer_w.htm
+++ b/org.tizen.devtools/html/web_tools/js_analyzer_w.htm
@@ -1,4 +1,4 @@
-ï»¿
+
 
 
 
@@ -18,32 +18,15 @@
 
 
     
-         
+         
     
     
         Content
         
-            
-                Using the JavaScript Analyzer
-                
-                    Setting JavaScript Rules
-                
-            
-            
-                Supporting Rules
-                
-                    Coding Rules
-                    Web API Usage Rules
-                
-            
-            
-                Using the Stale Object Checker
-                
-                    Result Page View
-                    Sample Code
-                
-            
-            
+            Using the JavaScript Analyzer
+			Setting JavaScript Rules
+            Supported Rules
+			Using the Stale Object Checker
         
     
 
@@ -54,58 +37,49 @@
 
 The JavaScript Analyzer (JSA) is an analysis tool, which helps to find problems in JavaScript code. When you develop a Web application with a new project in the IDE, you can run JSA to detect potential problems in your JavaScript code.
 
+JSA supports 2 analyzer types:
 
-    
-        JSA supports two types of analyzer
-        
-            Static Analyzer
-                Checkers for a set of pre-defined coding rules. It supports 27 rules, including coding rules and Web API usage rules.            
-            
-            Dynamic Analyzer
-                Checker for stale objects that cause possible memory leak. 
-            
-        
-
-
-        
-
+    Static Analyzer (Coding Rule Checker)
+        Contains checkers for a set of predefined coding rules. It supports 27 rules, including coding rules and Web API usage rules. 
+The Coding Rule Checker is a static analysis tool that evaluates an application by examining the JavaScript code without its execution. This type of checkers examine all possible execution paths and variable values, and then provide its their analysis result.		
+      
+    Dynamic Analyzer (Stale Object Checker)
+        Contains a checker for stale objects that cause possible memory leaks.
+The Stale Object Checker is a dynamic analysis tool that requires executing the application on a runtime environment for its analysis. This checker examines all the JavaScript objects created during its execution and points out relatively critical staled objects.
+     
 
 
-The Coding Rule Checker is a static analysis tool that evaluates an application by examining the JavaScript code without its execution. This type of checkers examine all possible execution paths and variable values, and then provide its their analysis result.
-
-On the other hand, the Stale Object Checker is a dynamic analysis tool that requires executing the application on a runtime environment for its analysis. This checker examines all the JavaScript objects created during its execution and points out relatively critical staled objects.
-
 Using the JavaScript Analyzer
 
-To analyze a Web application with the JSA in the IDE, select the target project in the Project Explorer and right-click the project icon. Then, the menu is shown like in Figure 1. and select Run JS Code Analysis.
-
+To analyze a Web application with the JSA in the IDE, right-click the target project in the Project Explorer view and select Check JavaScript Rules.
 
-Figure1 : JavaScript Rule Checker
-
+Figure: JSA in the menu
+
 
-The JSA analyzes JavaScript codes in the selected Web application project after selecting javaScript files and codes segment to analyze. This can be done by parsing the start html file (i.e., index.html, etc) specified in the config.xml.
+The JSA analyzes JavaScript codes in the selected Web application project after selecting JavaScript files and code segments to analyze. This can be done by parsing the start HTML file (such as index.html) specified in the config.xml file.
 
-Figure2: JavaScript Rule Checker
-
+Figure: Checking in progress
+
 
-If Javascript Analyzer detects the codes which can cause potential problems during its analysis step, the problems are listed up in the JavaScript Problems view. If you want to locate a possibly problematic code line, double-click  the alarm in the view.
+If JavaScript Analyzer detects codes that can cause potential problems during its analysis step, the problems are listed up in the Problems view. If you want to locate a possibly problematic code line, double-click the alarm in the view.
 
-Figure3: JavaScript Problems view
-
+Figure: Problems view
+
 
 Setting JavaScript Rules
 
-You can enabled or disable the JavaScript Rules in Preferences of JavaScript Analzer
-To enable or disable the JavaScript Rules :
+You can enable or disable the JavaScript rules in JavaScript Analyzer preferences.
+To enable or disable the rules:
     
-        In the Tizen IDE, go to Window > Preferences > JavaScript Analzer
-        Select a checkbox of rule items to enable or disable
+        In the Tizen IDE, go to Window > Preferences > JavaScript Analyzer.
+        Select or clear a rule checkbox to enable or disable the rule.
     
 
-Figure4: Preferences Page
-
+Figure: Preferences
+
 
-Supporting Rules
+
+Supported Rules
 
 Coding Rules
 
@@ -120,22 +94,21 @@
 This rule is supported by the JSLint and the Google Closure Linter. They say that "When you fail to specify var, the variable gets placed in the global context, potentially clobbering existing values. Also, if there is no declaration, it is hard to tell in what scope a variable lives."
 
 function func1() {
-   // The foo function is defined without the var keyword
+   /* The foo function is defined without the var keyword */
    foo = function() {
       alert('func1');
    };
 
-   // When the foo function is called, the foo function is not clear
+   /* When the foo function is called, the foo function is not clear */
    foo();
 }
-
 function func2() {
-   // The other foo function is defined without var keyword.
+   /* The other foo function is defined without var keyword */
    foo = function() {
       alert('func2');
    };
 
-   // When the foo function is called, the foo function is not clear.
+   /* When the foo function is called, the foo function is not clear */
    foo();
 }
 
@@ -150,7 +123,7 @@ function func2() {
 In the following example, the statement var arguments = []; in the function overwrites the reserved keyword arguments. As a result, the reserved keyword arguments in functions lose the feature to access the arguments of the function.
 
 function func() {
-   // 'arguments' has been predefined as a reserved keyword
+   /* 'arguments' has been predefined as a reserved keyword */
    var arguments = [];
 }
 
@@ -167,29 +140,29 @@ function func2() {
 This rule is introduced in the Google JavaScript Style Guide. They say that "The ability to create closures is perhaps the most useful and often overlooked feature of JS.One thing to keep in mind, however, is that a closure keeps a pointer to its enclosing scope. As a result, attaching a closure to a DOM element can create a circular reference and thus, a memory leak.".
 
 var outer = function() {
-   // Warning case, be careful
+   /* Warning case, be careful */
    var x = 0;
 
    return function() {
-      // Variable x of the outer function is captured in the inner function
+      /* Variable x of the outer function is captured in the inner function */
 
       return ++x;
    }
 }
 var x = -1;
 
-// The inner function of function outer is assigned to variable test outside function outer
+/* The inner function of function outer is assigned to variable test outside function outer */
 var test = outer();
 
-// Whenever the test is called, the result can be different from the expectation
+/* Whenever the test is called, the result can be different from the expectation */
 
-// 1st return
+/* 1st return */
 test();
 
-// 2nd return
+/* 2nd return */
 test();
 
-// 3rd return
+/* 3rd return */
 test();
 
 The JSA displays the following message:
@@ -203,14 +176,14 @@ test();
 This rule is described in the Google JavaScript Coding Style Guide. They say that "Extra comma and semicolon can make error.".
 
 function func() {
-   for(var i = 0; i < 10; i++) {
-      // Extra semicolon
+   for (var i = 0; i < 10; i++) {
+      /* Extra semicolon */
       x++;;
-      // Extra semicolon after the 'for' statement
+      /* Extra semicolon after the 'for' statement */
    };
 
    return x;
-// Extra semicolon after the function definition statement
+/* Extra semicolon after the function definition statement */
 };
 var result = func();
 
@@ -231,7 +204,7 @@ var result = func();
 };
 var obj = new Obj();
 
-// Deleting properties of objects can make the performance of the program worse
+/* Deleting properties of objects can make the performance of the program worse */
 delete obj.value;
 
 The JSA displays the following message:
@@ -244,7 +217,7 @@ delete obj.value;
 
 This rule is introduced by the Google JavaScript Style Guide. They say that "The whitespace at the beginning of each line can't be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript".
 
-// Multi-line string literals can create a problem
+/* Multi-line string literals can create a problem */
 var str = 'The Test String \
    for Positive TC';
 
@@ -262,10 +235,10 @@ var str = 'The Test String \
 
 var x = 1
 
-// If the variable x is 1, the array arr1 is the array whose length is 1, not arr[0] is 1
+/* If the variable x is 1, the array arr1 is the array whose length is 1, not arr[0] is 1 */
 var arr1 = new Array(x);
 
-// The array arr2 is the array which has 3 values, 1, 2, and 3
+/* The array arr2 is the array which has 3 values, 1, 2, and 3 */
 var arr2 = new Array(1, 2, 3);
 
 The JSA displays the following message:
@@ -280,7 +253,7 @@ var arr2 = new Array(1, 2, 3);
 
 This rule is introduced by the Google Javascript Style Guide. They say that "Modifying builtins like Object.prototype and Array.prototype are strictly forbidden. It leads to hard to debug issues in production and should be avoided."
 
-// Modifying the function in prototype of built-in object makes debugging difficult
+/* Modifying the function in prototype of built-in object makes debugging difficult */
 Object.prototype.create = function() {
    alert('Warning!');
 };
@@ -291,19 +264,20 @@ Object.prototype.create = function() {
 
 Rule 9. Do Not Convert Wrapper Objects to Primitives
 
-Avoid creating primitive typed values using the constructor of a wrapper objects
+Avoid creating primitive typed values using the constructor of a wrapper objects.
 
 If a boolean variable is created by the constructor Boolean, its value is a wrapper object, not true or false. In the following example, the program always prints true because the variable bool is a object that has a value, false.
 
 This rule is introduced by the Google Javascript Style Guide. They say that "There's no reason to use wrapper objects for primitive types, plus they are dangerous". 
 
-// The variable bool is not false. It is an object with the value false
+/* The variable bool is not false. It is an object with the value false */
 var bool = new Boolean(false);
 
-// bool is always true
-if(bool) {
+/* bool is always true */
+if (bool) {
    alert('true');
-} else {
+}
+else {
    alert('false');
 }
 
@@ -321,8 +295,8 @@ if(bool) {
 
 var arr = ['a', 'b', 'c'];
 
-// The variable key is not 'a', 'b', and 'c'. It is 0, 1, and 2
-for(var key in arr) {
+/* The variable key is not 'a', 'b', and 'c'. It is 0, 1, and 2 */
+for (var key in arr) {
    alert(key);
 }
 
@@ -332,26 +306,28 @@ for(var key in arr) {
 
 Rule 11. Do Not Use Unclosed Braces
 
-A method, an object , a code block and so on which has opening brace but  no closing brace is not correct . The analysis will detect this and be stopped with error message.
-In the below example, function temp needs a closing brace to indicate that the function definition is finished. The JSA detects this and makes an alarm, the analysis is stopped because of this error.
+A method, an object, a code block, or a similar element which has an opening brace but no closing brace is not correct. The analysis detects this and stops with an error message.
+In the following example, the temp() method needs a closing brace to indicate that the method definition is finished. The JSA detects this and creates an alarm, and the analysis is stopped because of the error.
 
-// The function temp needs the closing brace
++/* The temp function needs the closing brace */
 function temp() {
    var a = 'ddd';
 
 The JSA displays the following message:
 [Syntax Error]Missing closing brace } character.
 
-Rule 12. Do Not use unclosed Comments
+Rule 12. Do Not Use Unclosed Comments
 
-Writing comment only with begin comment , but no closing comment is not correct. In some scenario, it will affect  the implementation of function, code block, and so on. The analysis will detect this and be stopped with error message.
+Writing comment with only the begin comment and no closing comment is not correct. In some scenarios, it affects  the implementation of the method or code block. The analysis detects this and stops with an error message.
 
-In the below example, the comment has no closing comment, which causes the for loop canât be completed. The  JSA detects it and makes an alarm, the analysis is stopped because of this error.
+In the following example, the comment has no closing comment, and the for loop cannot be completed. The JSA detects it and creates an alarm, and the analysis is stopped because of the error.
 
-// The comment has no close comment
++/* The comment has no close comment */
 var a = 10;
 var b = 5;
-for(var i = 0; i < b; i++){
+for (var i = 0; i < b; i++) {
    a += i;
    /* init i;
 }
@@ -361,27 +337,28 @@ for(var i = 0; i < b; i++){
 
 Rule 13. Do Not Use Unclosed Strings
 
-String needs to be put in the quote, missing single quote is not allowed, analysis will  be stopped with error message because of this error.
+String needs to be put in the quotes, and missing a single quote is not allowed. The analysis is stopped with an error message because of this error.
 
-In the below example, the string misses single quote, which causes the variable definition canât be completed. The  JSA detects it and makes an alarm, the analysis is stopped because of this error.
+In the following example, the string misses a single quote, and the variable definition cannot be completed. The  JSA detects it and creates an alarm, and the analysis is stopped because of the error.
 
-// Setting value for MAX is not correct, missing single quote 
++/* Setting value for MAX is not correct, missing single quote */
 var MAX = 20;
-for (var i = 0; i < 10; i++) {
+for (var i = 0; i < 10; i++) {
    MAX = 'tt;
 }
 
 The JSA displays the following message:
 [Syntax Error]Missing closing single-quote ' character.
 
-
 Rule 14. Do Not Omit Semicolons
 
-Semicolon is needed in javascript to indicate that the declaration is finished. Missing Semicolon is not recommened, analysis will detect this, and be proceeded without stopping.
+Semicolon is needed in JavaScript to indicate that the declaration is finished. Missing a semicolon is not recommended, and although the analysis detects this, it proceeds without stopping.
 
-In the below example, the variable a declared in function tempx  without semicolon, the JSA detects it and makes an alarm.
+In the following example, the variable a declared in the tempx() function without a semicolon, and the JSA detects it and creates an alarm.
 
-// The declaration of a need semicolon in the end.
++/* The declaration of a needed semicolon in the end */
 function tempx() {
    var a = 'ddd'
 }
@@ -391,11 +368,11 @@ function tempx() {
 
 Rule 15. Do Not Begin With Operators
 
-Begining a line with the operator is not recommend, analysis will detect this, and be proceeded without stopping.
+Beginning a line with the operator is not recommended, and although the analysis detects this, it proceeds without stopping.
 
-In the below example, setting value for abc with operator =  in the new line, this is not correct, here, operator =  shoud be in the same line as abc, the JSA detects it and makes an alarm.
+In the following example, setting the value for the abc with the = operator in the new line is not correct. The operator must be in the same line as abc. The JSA detects it and creates an alarm.
 
-// Setting value for abc is not correct, should not begin with operator=.
+/* Setting value for abc is not correct, do no begin with operator = */
 var variable_sum = 1;
 var b = 2;
 var abc
@@ -407,23 +384,23 @@ var abc
 
 Rule 16. Do Not Use Double-quoted Strings
 
-Invoking a code block with double-quotes instead of single-quotes for string will be notified as CodingRule and the analysis will be proceeded without stopping.
+Invoking a code block with double-quotes instead of single-quotes for a string is noticed, although the analysis proceeds without stopping.
 
-In the below example, "aa" should be 'aa'. Because of double-quotes being used, the JSA detects it and makes an alarm.
+In the following example, "aa" must be 'aa'. The JSA detects it and creates an alarm.
 
 -if(true) {
+if (true) {
    var a = "aa";
 }
 
 The JSA displays the following message:
-[[CodingRule] Do not use double-quotes instead of single-quotes for string. 
+[[CodingRule] Do not use double-quotes instead of single-quotes for string.
 
 Rule 17. Do Not End With Commas In Literals
 
-Invoking a code block with extra comma at the end of object/array literals will be notified as CodingRule and the analysis will be proceeded without stopping.
+Invoking a code block with an extra comma at the end of object/array literals is noticed, although the analysis proceeds without stopping.
 
-In the below example, the last ',' must be removed. Because of extra comma at the end of object/array literals, the JSA detects it and makes an alarm.
+In the following example, the last ',' must be removed. The JSA detects it and creates an alarm.
 
  var abc = [1, 2, 3,];
@@ -433,20 +410,22 @@ var abc = [1, 2, 3,];
 
 Rule 18. Do Not Use Wrong Opening Brace
 
-Invoking a code block with opening brace '{' which does not appear in the same line with the statement will be notified as CodingRule and the analysis will be proceeded without stopping.
+Invoking a code block with an opening brace '{' which does not appear in the same line with the statement is noticed, although the analysis proceeds without stopping.
 
-In the below example, the opening brace '{' must appear in the same line with the statement. If not, the JSA detects it and makes an alarm. 
+In the following example, the opening brace '{' must appear in the same line with the statement. If not, the JSA detects it and creates an alarm. 
 
 -if(true)  // Do Not Use Wrong Opening Brace
+/* Do Not Use Wrong Opening Brace */
+if (true) 
 {
-   var test = 'test';
+   var test = 'test';
 }
 
 
 The JSA displays the following message:
 [CodingRule] Opening brace '{' character should appear in the same line with the statement. 
 
+
 Web API Usage Rules
 
 Tizen Web APIs extend JavaScript APIs to enable you using the device capabilities provided by Tizen devices. The Tizen Web APIs are designed to be simple and intuitive. The following rules notify you, when the APIs are used improperly.
@@ -457,7 +436,7 @@ if(true)  // Do Not Use Wrong Opening Brace
 
 In the following example, the tizen.alarm.gett() function does not exist in the Tizen API, so the JSA detects it and creates an alarm.
 
-// Mistyping get as gett
+/* Mistyping get as gett */
 var alarm = tizen.alarm.gett(abs_alarm.id);
 
 The JSA displays the following message:
@@ -471,9 +450,9 @@ var alarm = tizen.alarm.gett(abs_alarm.id);
 
 In the following example, the tizen.filesystem.resolve() function needs  more than 1 argument. Since the number of arguments is 1, the JSA detects it and creates an alarm.
 
-// The number of arguments is wrong (2 or more arguments required)
+/* The number of arguments is wrong (2 or more arguments required) */
 tizen.filesystem.resolve('images'
-                         // Missing error callback arguments);
+                         /* Missing error callback arguments */);
 
 The JSA displays the following message:
 
@@ -487,10 +466,10 @@ tizen.filesystem.resolve('images'
 
 tizen.filesystem.resolve('images',
                          function(dir) {
-                            console.log('Mount point Name is ' +  dir.path);
+                            console.log("Mount point Name is " +  dir.path);
                          }
-                         // Error callback required as the third argument);
-};
+                         /* Error callback required as the third argument */
+);
 
 The JSA displays the following message:
 
@@ -502,7 +481,7 @@ tizen.filesystem.resolve('images'
 
 In the following example, the tizen.calendar.getCalendars() is a method that can throw exceptions, so it must be wrapped by a try-catch statement. Because the try-catch statement does not exist, the JSA detects it and creates an alarm.
 
-// tizen.calendar.getCalendars API can make exceptions, so it should be wrapped in a try-catch statement
+/* tizen.calendar.getCalendars API can make exceptions, so it should be wrapped in a try-catch statement */
 tizen.calendar.getCalendars('EVENT', calendarListCallback, errorCallback);
 
 The JSA displays the following message:
@@ -517,10 +496,11 @@ tizen.calendar.getCalendars('EVENT', calendarListCallback, errorCallback
 
 var addressBooksCB = 'notFucntion';
 try {
-   // The arguments of tizen.contact.getAddressBooks API must be function types instead of strings and undefined
+   /* The arguments of tizen.contact.getAddressBooks API must be function types instead of strings and undefined */
    tizen.contact.getAddressBooks(addressBooksCB, undefined);
-} catch (e) {
- /* ... */
+}
+catch (e) {
+   /* Error handling */
 }
 
 The JSA displays the following message:
@@ -546,7 +526,7 @@ try {
 
 var invalidContactObj = new tizen.Contact(
 {
-   // The first argument, whose type is dictionary, of tizen.Contact API does not have the property 'foo'
+   /* The first argument, whose type is dictionary, of tizen.Contact API does not have the property 'foo' */
    foo: 'I'm not an member of Contact'
 
 The JSA displays the following message:
@@ -555,16 +535,16 @@ var invalidContactObj = new tizen.Contact(
 
 Rule 7. API Version Compatibility
 
-Invoking API which is not defined in Current API version will be notified as Web API Rule and the analysis will be proceeded without stopping. If these Web API was defined in another API version or platform, notify user these version name.
+Invoking an API which is not defined in the current API version is noticed, although the analysis proceeds without stopping. If the Web API was defined in another API version or platform, the version name is provided in the error message.
 
-In the below example, Web App is developed for Tizen 2.3 wearable platform, but tizen.archive.open() is defined in mobile-2.3, so the JSA detects it and makes an alarm.
+In the following example, the Web App is developed for the Tizen 2.3 wearable platform, but the tizen.archive.open() method is defined in for the Tizen 2.3 mobile platform, so the JSA detects it and creates an alarm.
 
  function onsuccess() { /* ... */ }
 function onerror() { /* ... */ }
 
 try {
-   //Source code in Web App for Tizen 2.3 wearable platform, but 'open()' is defined in mobile-2.3
+   /* Source code in Web App for Tizen 2.3 wearable platform, but 'open()' is defined in mobile-2.3 */
    tizen.archive.open('downloads/some_archive.zip', 'r', onsuccess, onerror);
 } catch (e) {
    /* ... */
@@ -578,9 +558,9 @@ try {
 
 Rule 8. API Privilege Missing
 
-To use Tizen Device API in target device, the 'config.xml' of Tizen Web App must have corresponding privilege url define. Web API Rule will be notified if not found the privilege in 'config.xml' file.
+To use a privileged Tizen Device API in a target device, the config.xml file of the Tizen Web application must have a corresponding privilege URL defined. An alarm is raised if the privilege is not found in the config.xml file.
 
-In the below example, Web App is using tizen.application.launch(), this API need 'http://tizen.org/privilege/application.launch', which is commented in the config.xml. So an alarm raise.

+
In the following example, the Web application is using the tizen.application.launch() method, which requires the http://tizen.org/privilege/application.launch privilege, which is commented in the config.xml file. So an alarm is raised.
 
 
 @@ -588,8 +568,8 @@ try {
 function onsuccess() { /* ... */ }
 tizen.application.launch('targetApp0.main', onsuccess);
 
-/* config.xml File (Privilege commented) */
-<!--tizen:privilege name="http://tizen.org/privilege/application.launch"/-->
+/* config.xml file (privilege commented) */
+<!--tizen:privilege name="http://tizen.org/privilege/application.launch"/-->
 
 
 The JSA displays the following message:
@@ -598,97 +578,74 @@ tizen.application.launch('targetApp0.main', onsuccess);
 
 Using the Stale Object Checker
 
-To analyze a web application with the Stale Object Checker in the IDE, select the target project in the Project Explorer and right-click the project icon. In other way, select the project, click Check Stale Object icon on tool bar. After those steps, select the testing platform.
-
-Figure5 : Stale Object Checker
-
-
-On Tizen device mode, it is packaged as a widget first, and then pushed to the Tizen device. At last it is launched automatically. After the application launched, user can follow the steps that designed for testing the application. 
-
-On PC Browser mode, the web application will run at 'http://localhost:8888'.
-
-When all operations are finished on the Tizen Device or PC Browser, click Stop Rcoding button on the Console toolbar or enter Alt + Shift + T key on PC Browser. Then a dialog like in figure 7 shows up on the page.
-                                           
+To analyze a Web application with the Stale Object Checker in the IDE:
 
-Figure6 : Stop Recording
-
+Right-click the target project in the Project Explorer view and select Check Stale Object (or select the project in the Project Explorer view and click Check Stale Object on the toolbar).
+
+
 
-                                         
-After clicking OK button on the dialog in the figure 7, the Stale Object Checker continues to inspect the data collected and launch a result page on 'http://localhost:9000'. And this result page can be accessed by any web browser in the PC.
+Select the testing platform:
+In the Tizen device mode, the project is packaged as an application first, and then pushed to the Tizen device. Finally, it is launched automatically. After the application is launched, you can test the application.
+In the PC Browser mode, the Web application runs at http://localhost:8888.
+
+When all operations are finished on the Tizen device or PC browser, click Stop Recoding on the Console view toolbar or enter Alt+Shift+T on the keyboard.
+
 
-Figure7 : Stop Dialog Device and Browser mode
-
+After you stop recording, a confirmation message os displayed. Click OK.
+The Stale Object Checker continues to inspect the data collected and launches a result page at http://localhost:9000. The result page can be accessed by any Web browser in the PC.
+
 
 Result Page View
 
-The first screen is given like the Figure 8. This analysis result page is composed with two parts. One is the Issue Table, and the other is the All-Sites Timeline. You can link to these pages by choosing the menu located on the main page.
+The result page opens with the view shown in the following figure. The page is composed of 2 parts: issue table and all-sites timeline. You can switch between the parts using the menu at the top of the page.
 
-Figure8 : Issue Table Page
-
+Figure: Result page with the issue table
+
 
-Information of Site, Count, Kind, and Leak is provided in the Issue Table:

+
The following details are provided in the issue table:
     
-        Site : Source location where allocations took place. Click the site, for more details about the allocation.
-        Count :  Number of objects allocated from a particular site during this execution.
-        Kind : A site allocates a DOM object, a FUNCTION, or a regular OBJECT.
-        Leak : Leak means that the count of stale instances is increasing over the life of execution.
-    
-To understand the result from the Stable Object Checker better, following concepts are necessary:
-    
-        Stale instance : Instance whose staleness value is not zero at specific time.
-        Staleness for object : Time interval between last use and unreachable time:
-        Exapmle :
-            
-             
-                if object was used more than once : unreachable time â last use time
-                if object was never used : unreachable time â creation time
-            
-        
+        Site: Source location where the allocations took place. Click the site for more details about the allocation.
+        Count:  Number of objects allocated from a particular site during this execution.
+        Kind: Site allocates a DOM object, a FUNCTION, or a regular OBJECT.
+        Leak: Leak means that the count of stale instances is increasing over the execution life time.
     
+A stale instance is any instance whose staleness value is not zero sat a specific time. The object staleness defines the time interval between the last use and the moment when the object is unreachable. For example, if the object has never been used, the staleness is the unreachable moment minus the creation time. If the object has been used, the staleness is the unreachable moment minus the last use time.
 
-Issue Table
+Issue Table
 
-When clicking the site on the issue table, a set of detail information on a leak occurrence is given. In the source view, a code segment that creates stale objects steadily, which possibly cause memory leak, is marked with a colored box. So that you can find out the code location easiliy.
+When you click a site in the issue table, a set of detailed information on a leak occurrence is shown. In the source view, you can easily find the code segment that steadily creates stale objects (possibly causing a memory leak), since it is marked with a colored box.
 
-Figure9 : Detail Information
-
+Figure: Detailed information
+
 
-For example, in the Figure 9, this page says that the anonymous event handler function at the line 10 is a stale object that might cause memory leak.
-In the call tree view, a call hierarchy of the method which contains the code that creates stale objects is shown. The name of a node in this call tree view indicates the file name, line number and column number.
-As illustrated in Figure 9, the root element "js/main_orig_.js:10:45" indicates that memory leak occurs at line 10, column 45 in "js/main_orig_.js" file. Click on the root element, the source view will skip to the location.
-Click the child node "js/main_orig_.js:27:5", the source view will skip to line 27 where the method that contains memory leak issue is called and highlight the method.
-In the timeline view, the x axis represents the time elapse and y axis represents the number of created object from this site. Move the mouse to a specific time, the number of stale instance and allocated instance will show on the graph.
-In the access paths view, you can find out the scope of an object at runtime which leads to the location of memory leak.
+In the above figure:
 
+The anonymous event handler function at the line 10 is identified as a stale object that can cause a memory leak.
+In the call tree view, a call hierarchy is shown for the method which contains the code that creates stale objects. The name of a node in the call tree view indicates the file name, line number, and column number.
+The "js/main_orig_.js:10:45" root element indicates that the memory leak occurs at line 10, column 45 in the js/main_orig_.js file.
+Click the root element to move the source view to the location. Click the "js/main_orig_.js:27:5" child node to move the source view to line 27 where the method that contains the memory leak issue is called, and to highlight the method.
+In the timeline view, the x axis represents the time elapse and the y axis represents the number of created objects from this site. Move the mouse to a specific time to show the number of stale and allocated instances on the graph.
+In the access paths view, you can find out the scope of an object at runtime which leads to the location of the memory leak.
 
-All-Sites Timeline
 
-In this page, the timeline for all the object created during the execution is given. The timeline graph in Figure 9 shows the diagram for specific diagram while the timeline in Figure 10 indicates the diagram for all sites in the application. The pie charts shows the proportion of each site in all allocated objects and stale objects.
+All-Sites Timeline
 
-Figure10 : All-Sites Timeline Page
-
+The all-sites time shows the timeline for all the objects created during the execution. The timeline graph in the issue table (figure above) shows the diagram for a specific site while the timeline in the all-sites page (figure below) indicates the diagram for all sites in the application. The pie charts shows the proportion of each site in all allocated and stale objects.
 
-
+Figure: All-sites timeline page
+
 
-
+Timer Sample Code
 
-Sample Code
-
-
-
-Example 1. Timer
-
-
-When click "start" button, the Timer will start the time. If click again, it will stop the time. The "exitApp" function register a event handler for Tizen Back key. In function "runtime()", "exitApp()" function is added by mistake.
+When you click start, the Timer starts to run. If you click again, the timer stops. The exitApp() function registers an event handler for the Tizen Back key to terminate the application when the Back key is pressed. 
     
- So every time click "start" button, "exitApp" will be called, creates an anonymous function and register it to listen Back key event. When test this application with Stale Object Checker, if click "start" button many times, it should be figured out as a memory leak.
-
+In the runtime() function, the exitApp() function is added by mistake. As a result, every time you click start, the exitApp() function is called, creates an anonymous function, and registers it to listen to the Back key events. When you test this application with the Stale Object Checker, multiple start button clicks are shown as a memory leak.
 
 -//Javascript Snippets
-function exitApp( ) {
+/* JavaScript snippets */
+function exitApp() {
    document.addEventListener('tizenhwkey', function(e) {
-      if(e.keyName == 'back') {
+      if (e.keyName == 'back') {
          try {
             tizen.application.getCurrentApplication().exit();
          } catch (error) {
@@ -699,35 +656,35 @@ function exitApp( ) {
 }
 
 function runtime() {
-   exitApp();           // Add the function call for memory leak
-   // ...  
+   exitApp(); /* Add the function call for memory leak */
 }
 
 
-When testing the souce code, we get the result as the figure 11. It indicates that memory leak occurred at site "js/main_orig_.js:39:42". Clicking this site, detail information is retrieved.
+When testing the source code, the following figure shows the result. It indicates that a memory leak occurred at the "js/main_orig_.js:39:42" site. Clicking this site, the detailed information is retrieved.
 
 
-Figure11 : Example1. Issue Table
-
+Figure: Timer example issue table
+
 
-Figure12 : Example1. Detailed Information
-
+Figure: Timer example detailed information
+
 
-Figure 12 shows that function object which is added to listen "tizenhwkey" caused memory leak. Click the "Call Tree" on the right of this page. Figure 3 shows that "exitApp()" function which has the memory leak issue is called in "runtime()" fucntion.
+The detailed information shows that function object added to listen for "tizenhwkey" events caused a memory leak. If you click the "Call Tree" on the page, you can see that the exitApp() function with a memory leak issue is called in the runtime() function.
 
-This code site is detected as a leak because the handler function objects created from the site have not been used until this application exits. The call tree says that when function "runtime()" is executed, function "exitApp()" will be invoked.
- And every time function "exitApp()" is called, it will create an anonymous function and register it to document object. And you can find out this fact from the "Timeline" graph that the number of stale instances increased steadily.
+This code site is detected as a leak because the handler function objects created from the site have not been used before the application exits. The call tree says that when the runtime() function is executed, the exitApp() function is invoked, every time creates an anonymous function and registers it to a document object.
 
-This graph show any objects created from this code site have not been used until this application exists.
+In the "Timeline" graph, you can see how the number of stale instances increases steadily. This graph shows any objects created from this code site that have not been used before the application exists.
 
 
-Example 2. Calculator
+Calculator Sample Code
 
-When click number button, "command" function will be executed. "init" function register a event handler for Tizen Back key. In function "command()", "init()" function is added by mistake. So every time click number button, "init()" will be called, creates an anonymous function and register it to listen Tizen Back key event.
-When test this application with Stale Object Checker, if click number button many times, it should be figured out as a memory leak. When testing the souce code, the result is the same as the Example 1.
+When you click a number button, the command() function is executed. The init() function registers an event handler for the Tizen Back key.
+
+In the command() function, the init() function is added by mistake. As a result, every time you click a number button, the init() function is called, creates an anonymous function, and registers it to listen to Tizen Back key events.
+When you test this application with the Stale Object Checker and click a number button many times, the problem is diagnosed as a memory leak. When testing the source code, the result is the same as in the Timer example above.
 
 -//Javascript Snippets
+/* JavaScript snippets */
 var init = function() { 
    document.addEventListener('tizenhwkey', function(e) {
       if (e.keyName == 'back') {
@@ -741,10 +698,8 @@ var init = function() {
 }
 
 function command(num) {
-   init(); // Add the function call for memory leak
-   // ...  
+   init(); /* Add the function call for memory leak */  
 }
-
 
 
 
diff --git a/org.tizen.devtools/html/web_tools/js_editor_w.htm b/org.tizen.devtools/html/web_tools/js_editor_w.htm
index e923c92..5143b3b 100644
--- a/org.tizen.devtools/html/web_tools/js_editor_w.htm
+++ b/org.tizen.devtools/html/web_tools/js_editor_w.htm
@@ -14,7 +14,7 @@
   
  
 
- 
+ 
 	
 		 
 	
@@ -53,7 +53,7 @@
 Viewing Editor Ruler 
   If the JavaScript syntax is incorrect, the errors are displayed in the editor ruler area and in the Problems view. 
   Figure: Problems view 
-     
+     
   
 
 
diff --git a/org.tizen.devtools/html/web_tools/js_log_console_w.htm b/org.tizen.devtools/html/web_tools/js_log_console_w.htm
index ec57021..7480a01 100644
--- a/org.tizen.devtools/html/web_tools/js_log_console_w.htm
+++ b/org.tizen.devtools/html/web_tools/js_log_console_w.htm
@@ -14,7 +14,7 @@
   
  
 
- 
+ 
 	
 
 
@@ -23,7 +23,7 @@
 	  
  
   JavaScript Log Console View 
-  The JavaScript Log Console view provides a functionality to view widget JavaScript logs. The JavaScript Log Console view is automatically opened when widget is launched. 
+  The JavaScript Log Console view provides a functionality to view Web application JavaScript logs. The JavaScript Log Console view is automatically opened when a Web application is launched. 
    
@@ -70,7 +70,7 @@
   The JavaScript log methods are shown in the IDE with colors.
Figure: JavaScript log method colors
 
-
diff --git a/org.tizen.devtools/html/web_tools/live_editing_w.htm b/org.tizen.devtools/html/web_tools/live_editing_w.htm
index 1369ac0..751a894 100644
--- a/org.tizen.devtools/html/web_tools/live_editing_w.htm
+++ b/org.tizen.devtools/html/web_tools/live_editing_w.htm
@@ -14,7 +14,7 @@
  
 
- 
+ 
 
 
 
diff --git a/org.tizen.devtools/html/web_tools/privilege_checker_w.htm b/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
index 3395dc0..a4d2a68 100644
--- a/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
+++ b/org.tizen.devtools/html/web_tools/privilege_checker_w.htm
@@ -14,7 +14,7 @@
   
  
 
- 
+ 
 	
 
 
@@ -23,8 +23,8 @@
 	
 	
   Privilege Checker 
-  The IDE provides the privilege checker tool to identify potential problems in the application code related to privilege usage.
-  You can enable the checks in the project properties  during the build process or code editing. You can also perform the checks manually in the IDE by selecting Project > Check Privilege.
+  The IDE provides the privilege checker tool to identify potential problems in the application code related to privilege usage.
+  You can enable the checks in the project properties  during the build process or code editing. You can also perform the checks manually in the IDE by selecting Project > Check Privilege.
 The Privilege Checker tool is based on the Content Assist Engine for Tizen IDE. It is used for codes that do not operate Content Assist and cannot perform checks. Therefore, the check results can possibly have missing (unsound) values.
 The check results are displayed in the Problems view and vertical ruler. To resolve an alarm, click the annotation on the vertical ruler and select an entry from the proposal list. The required privilege is automatically added into config.xml file (for a quick fix, use the Ctrl+1 keyboard shortcut).
 
 
     
     
   
 
 
  
diff --git a/org.tizen.devtools/html/web_tools/project_wizard_w.htm b/org.tizen.devtools/html/web_tools/project_wizard_w.htm
new file mode 100644
index 0000000..92267b6
--- /dev/null
+++ b/org.tizen.devtools/html/web_tools/project_wizard_w.htm
@@ -0,0 +1,143 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+  Project Wizard  
+  
+
+
+
+
+	
+
+
+	
+		 
+	
+	
+
+  Project Wizard 
+  The Tizen Web Project Wizard is an IDE tool that is used to create a Web application project.
+  The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen Web Project Wizard uses to automatically create basic functionalities for the Web application. The default project files and folders are also created.
+  The following table lists the available project templates. 
+  
 
+    
+    
+     
+      
+      
+      
+     
+     
+      
+      
+      
+     
+     
+      
+      
+      
+    
+     
+      
+      
+      
+     
+    
+  
+     Table: Project templates 
+   Project type Application type Description
Basic Blank Application Tizen blank application template.
jQuery Mobile (mobile only)  
+       
+       Single Page Application 
+       Multi Page Application 
+       Master Detail Application 
+       Navigation Application 
+      Templates based on jQuery Mobile. You can alter the application page header, body, and footer based on the following color themes: 
+       
+       A - Black 
+       B - Blue 
+       C - Grey 
+       D - Light grey 
+       E - Yellow 
+      
 
IME application (wearable only) Web IME Application Web-based IME application template, which lets you create your own IME by only writing HTML, CSS, and JavaScript code.
+	  
+  
+  
+  On the main page of the Tizen Web Project Wizard, you can set basic properties of a project, such as the project name, location, and working sets. 
+  
+  Figure: Project Wizard
+  
+  
+  The options you can set are listed in the following table.
+   
+      
+      
+       
+        
+        
+       
+       
+        
+        
+       
+       
+        
+        
+       
+	   
+        
+        
+      
+	   
+        
+        
+      
+       
+        
+        
+      
+       
+        
+        
+      
+       
+        
+       
+      
+      
+    
+       Table: Project Wizard options 
+     Option Description
Tab You can create an application based on a template or sample application.
Category If the selected category has samples or templates, they are displayed in the list on the left.
Application type Select the application type. It can be previewed in the description view on the right.
Project name Enter the name for the project to be created. The project names are restricted to the following regular expression: [a-zA-Z]{1}[a-zA-Z0-9-]{1,24}.
Use default location If you check this option, the project is created in the $<workspace_location>/$<project_name> directory.
Location Manually select the location of the project. If you check the Use default location checkbox, this option is disabled.
Working sets If you want to include your project as a specific working set, select a working set.
+  
+
+
+
+
+
+
+
+
+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.devtools/html/web_tools/rest_viewer_w.htm b/org.tizen.devtools/html/web_tools/rest_viewer_w.htm
index 6336838..2658585 100644
--- a/org.tizen.devtools/html/web_tools/rest_viewer_w.htm
+++ b/org.tizen.devtools/html/web_tools/rest_viewer_w.htm
@@ -6,339 +6,215 @@
 
 
 
-
-
+
+
 
-
+
 
 REST Viewer
 
 
     
         
-            
-                 
-            
+             
         
         
             
                 Content
                 
-                    Visualize the
-                            WADL document
-                    Management
-                            for WADL component
-                    Authentication
-                    Test and get the
-                            result
-                    Auto-generating
-                            code
+                    Displaying the WADL Document
+                    Managing WADL Components
+                    Authenticating the Application
+                    Testing the APIs
+                    Auto-generating Code
                 
             
         
     
-    
-        
-            
+
+REST Viewer
 
-                REST Viewer
+When creating Web applications with REST APIs, the REST Viewer provides the following feature to ease the development process:
+
+	Displaying the WADL document
+	You can display the WADL components with a structure.
+	
+	Managing WADL components
+	You can create, delete, and modify WADL components.
+	
+	Authenticating the application
+	You can set the API key and OAuth 2.0.
+	
+	Testing the APIs
+	You can test the APIs and check the result.
+	
+	Auto-generating code
+	You can use code snippets to send asynchronous requests.
+	
+
 
-                The REST Viewer in the Tizen SDK IDE provides the following
-                    functions for Web application development with using REST APIs:
-                
-                    Visualize the WADL document
-                        
-                            Show WADL components with structure
-                        
-                    
-                    Management for WADL component
-                        
-                            Create, delete, modify WADL components
-                        
-                    
-                    Authentication
-                        
-                            Setting for API Key and OAuth 2.0
-                        
-                    
-                    Test and get the result
-                        
-                            Ease to test and check the result
-                        
-                    
-                    Auto-generating code
-                        
-                            Support code snippet for sending asynchronous request
-                        
-                    
-                
-                


-                Visualize the WADL document
-                
-                    The things what shown on REST Viewer are the WADL(Web Application
-                        Description Language) documents.
-                
-                
-                    This viewer loads them from specific location (Enable to set the
-                    location at Preferences > Tizen SDK > REST Viewer or [] on toolbar)
-                    and classifies them as 4 typed WADL components (Application,
-                    Service, Path, API). It is possible to not only import/export WADL
-                    components but also handle them.
-                
-                Figure: REST Viewer
-                
-                    
-                
-                


-                Management for WADL
-                    component
-                There are 4 typed WADL components from WADL component:
-                
-                    []
-                        Service (Application): The application element forms the root of a
-                        WADL description.
-                    
-                    []
-                        Base URI (Resources): The resources element acts as a container
-                        for the resources provided by the application.
-                    
-                    []
-                        Path (Resource): A resource element describes a set of resources,
-                        each identified by URI that follows a common pattern.
-                    
-                    []
-                        API (Method): This element describes the input to and output form
-                        an HTTP protocol method that may be applied to a resource.
-                    
-                
+Displaying the WADL Document
+The REST Viewer displays the WADL (Web Application Description Language) documents.
+The viewer loads the documents from a specific location and classifies them as 4-typed WADL components. You can define the document location in the IDE menu by going to Preferences > Tizen SDK > REST Viewer, or by clicking the  icon on the REST Viewer view toolbar.
 
-                This REST Viewer provides way to make new WADL components. It
-                    also possible to import or export WADL file(s) - You can handle
-                    only the selected WADL component if you open the dialog to modify
-                    it. It means that it is impossible to modify its parent or children
-                    component(s).
+Figure: REST Viewer
+
 
-                
-                    
-                        
-                            
-                        
-                        
-                            
-                        
-                    
-                Note
Constraint: Some attributes are required to
-                                make structure for tree viewer even if they are optional on WADL
-                                schema.
-                
-                    []New:
-                        Open dialog to add new WADL component(s).
-                        


-                        Figure: The dialog for WADL component
-                        
-                            
-                        
-                    
-                    


-                    The WADL document has ordered structure.(Service > Base
-                        URI > Path [> Path] > API)
-                    Application (Service)
-                        
-                            Title (required): A short plain text description of the
-                                element being documented.
-                        
-                    
-                    Base URI (Resources)
-                        
-                            Base URI (required): This attribute that provides the
-                                base URI for each child resource identifier.
-                            Alias(optional)
-                        
-                    
-                    Path (Resource)
-                        
-                            Parent Path: It needs if resource has nested path
-                                structure.
-                            Path (required): This provides a relative URI template
-                                for the identifier of the resource.
-                            Content Type (default): Defines the media type for the
-                                query component of the resource URI.
-                        
-                    
-                    API
-                        
-                            Id (required): The identifier for the method.
-                            Method (default): Indicates the HTTP method used.
-                            Description(optional)
-                        
-                    
-                    Common Parameter: Describes the input to the method as a
-                        collection of parameters.
-                        
-                            Name: Parameter name
-                            Value
-                            Style: Indicates the parameter style.
-                                
-                                    Header: Specifies a HTTP header for use in the
-                                        request.
-                                    Query: Specifies a URI query parameter for method.
-                                    File
-                                
-                            
-                            Type: The type of the parameter as an XML qualified
-                                name.
-                            Required: Whether the parameter is required to be
-                                present or not.
-                        
-                    
-                
-                


-                And it is also possible to import (export) from (to) WADL.
-                
-                    []Import
-                        WADL: The REST Viewer imports WADL file and shows WADL models.
-                        
-                            From local WADL file or url.
-                        
-                    
-                    []Export
-                        WADL: This exports selected WADL model(s) on viewer as a .wadl
-                        file.
-                    
-                
-                


-                Authentication
+Managing WADL Components
+The WADL document can contain 4 types of WADL components:
+
+	 Service (Application): The application element forms the root of a WADL description.
+	 Base URI (Resources): The resources element acts as a container for the resources provided by the application.
+	 Path (Resource): The resource element describes a set of resources, each identified by a URI that follows a common pattern.
+	 API (Method): The method element describes the input to and output from an HTTP protocol method that can be applied to a resource.
+
 
-                REST Viewer helps when you test the application with
-                    authentication. (Enable to set the location at Preferences > Tizen
-                    SDK > REST Viewer > Authentication)
-                
-                    API Key
-                        
-                            API key authentication with header or parameter.
-                        
-                    
-                    OAuth 2.0
-                        
-                            OAuth 2.0 authentication information for RESTful API.
-                        
-                    
-                
-                Figure: Authentication
-                
-                    
-                
-                


-                Test and get the result
+With the REST Viewer, you can make new WADL components, and import and export WADL files. You can handle a selected WADL component only if you open a dialog to modify it. You cannot modify the selected component's parent or child components at the same time.
 
-                You can test selected API on REST Viewer and get the result
-                    of it. There are three entry points to do it.
-                
-                    []Run:
-                        This button on the toolbar. And it also shows running history.
-                    
-                    Run from context menu on selection
-                    Save and Run(on Figure: The dialog for WADL component)
-                
+
+	
+		
+			
+		
+		
+			
+		
+	
+Note
Some attributes are required to make a structure for the tree viewer even if they are optional in the WADL schema.
 
-                The api which works with variables needs specific values for test. Each profile has its own user variables(key and value), you can manage profiles and profile's user variables on Preferences page. You can use them with placeholder after user variables are set to test api.(e.g. ${email})
-                Figure: User Variables
-                
-                    
-                
-                


-                You can also select active profile in REST Viewerâs user variable toolbar
-                    menu as below. When you test APIs in REST Viewer, user variables of selected
-                    profile are used.
-                Figure: Profile Selection
-                
-                    
-                
-                


-                The user variables of active profile are shown when you set the values for api.
-                Figure: User Variable Selection
-                
-                    
-                
-                


-                Then you can run it and check the response result on Console View after you set the values. And
-                    it is possible to save response structure.
-                Figure: The response result on Console View
-                
-                    
-                
-                


-                Auto-generating code
-                The REST Viewer helps to send asynchronous request with REST
-                    APIs. There are two ways to generate code to do it.
-                
-                    Content assist
-                        
-                            You can activate content assist with prefix ârest.â.
-                        
-                    
-                    Drag and drop
-                        
-                            1. Select API model on REST Viewer, then drag it and
-                                drop on Web SDK HTML Editor.
-                            2. Select functions at bottom of dialog then you get the
-                                code.
-                        
-                    
-                
-                Figure: Function Selection for REST API
-                
-                    
-                
-                
-                
+To manage the WADL components, in the REST Viewer view toolbar, click:
 
-            
-        
-    
+
+	 to add new WADL components.
 
-    
+	 to import a WADL file and show the WADL models from a local WADL file or URL.
 
-    
-        
-            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.
-        
-    
+	 to export the selected WADL models as a .wadl file.
+	
+	
+When you add a new WADL component, you must define its place in the WADL structure (Service > Base URI > Path [> Path] > API) in the New dialog. 	
+	
+		Figure: Adding a WADL component
+		
+
+		
+	Service
+		Title (required): Short plain text description of the element being documented.
+	
+	Base URI
+		Base URI (required): Base URI for each child resource identifier.
+		Alias (optional)
+	
+	Path
+		Parent Path: Required, if the resource has a nested path structure.
+		Path (required): Relative URI template for the resource identifier.
+		Content Type (default): Media type for the query component of the resource URI.
+	
+	API
+		Id (required): Method identifier.
+		Method (default): Used HTTP method.
+		Description (optional)
+	
+	Common Parameters
+	Describe the input to the method as a collection of parameters.
+		
+			Name: Parameter name.
+			Value
+			Style: Parameter style:
+				
+					Header: Specifies a HTTP header for use in the	request.
+					Query: Specifies a URI query parameter for the method.
+					File
+				
+			
+			Type: Parameter type as an XML-qualified name.
+			Required: Whether the parameter is required to be
+				present.
+		
+	
+
+
+Authenticating the Application
+
+The REST Viewer helps when you test the application with authentication. Enable the authentication in the IDE menu by going to Preferences > Tizen SDK > REST Viewer > Authentication and selecting Use authentication.
+
+In the same location, you can define the authentication details: 
+
+	API Key authentication with a header or parameter.
+	OAuth 2.0 authentication information for a RESTful API.
+
+Figure: Authentication details
+
+
+
+Testing the APIs
+
+You can test the selected API on the REST Viewer and view the results. To run a test, do one of the following:
+
+	Click the  icon on the REST Viewer view toolbar. The view displays the running history.
+	
+	Right-click the selected API and run the test from the context menu.
+	Click Save and Run in the New or Modify dialog when adding or modifying components.
+
+
+The API that works with variables needs specific values for the test. Each profile has its own user variables (key and value). You can manage the profiles and profile's user variables in the Preferences window. After the user variables are set, you can use them with a placeholder to test the API (fow example, ${email}).
+Figure: User variables
+
+
+You can select an active profile in the REST Viewer user variable toolbar menu. When you test the APIs in the REST Viewer, user variables of the selected profile are used.
+Figure: Selecting a profile
+
+The user variables of the active profile are shown when you set the values for an API.
+Figure: Selecting a user variable
+
+
+After setting the variables and running the test, the result is displayed in the Console view. You can save the response structure.
+Figure: Test result
+
+
+
+Auto-generating Code
+You can use the REST Viewer to send asynchronous requests with the REST APIs. To generate code to do this, do one of the following:
+
+	Use the content assist feature.
+	You can activate the content assist with the prefix "rest.".
+	
+	Drag and drop.
+		
+			Select the API model in the REST Viewer, and drag and drop it to the Web SDK HTML Editor.
+			Select the functions at bottom of the dialog to get the code.
+		
+	
+
+Figure: Selecting functions for the REST API
+
+
+
+
+
+
+
+
+
+
+	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.
+
 
-    
+
 
 
 
diff --git a/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm b/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
index 95e4c66..15613fc 100644
--- a/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
+++ b/org.tizen.devtools/html/web_tools/set_ide_preference_w.htm
@@ -15,7 +15,7 @@
 
  
 
- 
+ 
 	
 		
 		 
@@ -46,7 +46,7 @@
 
   Widget ID
   To set a customized prefix for the widget ID, enter the value in the Prefix to the Widget ID field. The default value of this field is http://yourdomain/.
-  The value is automatically used in all widget IDs when you create new widgets in the IDE. You can view the widget ID in the config.xml file of the project.
+  The value is automatically used in all widget IDs when you create a new Web application in the IDE. You can view the widget ID in the config.xml file of the project.
 
   Chrome™ Browser Path
   In the Tizen SDK > Web side menu, go to Chrome.
@@ -138,7 +138,7 @@ ko
   
 
 		 Figure: Live highlight 
-    
+    
  
 
 
diff --git a/org.tizen.devtools/html/web_tools/tools_w.htm b/org.tizen.devtools/html/web_tools/tools_w.htm
index 5f1dbfb..caa7261 100644
--- a/org.tizen.devtools/html/web_tools/tools_w.htm
+++ b/org.tizen.devtools/html/web_tools/tools_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 
 
 
@@ -26,7 +26,7 @@
 	
  Web Tools
 
-The Tizen SDK provides the following set of features and tools for mobile Web application development:
+The Tizen SDK provides the following set of features and tools for Web application development:
 
  
@@ -42,6 +42,7 @@
 
     Application generation management tools
     
+		Project Wizard This tool is used to create an application project.
 		Configuration Editor This tool allows you to configure the application.
 	
 
@@ -52,6 +53,7 @@
 
 	Editor tools
     	
+		REST Viewer This tool allows you to view and edit WADL documents.
 		Content Assist This tool allows you to write quick and efficient code.
 		HTML Editor This tool makes it easy to write or edit HTML.
 		
@@ -69,26 +71,22 @@
 
         Live Editing This tool allows you to apply source changes to the running application immediately (without building, packaging, and relaunching).
 	
-		UI building tools
-    	
-        UI Builder in mobile applications only  This WYSIWYG (What You See Is What You Get) design environment tool is used to create user interfaces.
-	
 
 	Application running and testing tools
     	
-		Command Line Interface in mobile applications only  This tool set allows you to develop Tizen Web applications without the Tizen IDE.
+		Command Line Interface This tool set allows you to develop Tizen Web applications without the Tizen IDE.
 		Web Simulator  This tool allows you to run your Web applications to develop and debug them.
 		
-		Web Unit Test Tool in mobile applications only  This tool provides a set of features for testing the source code.
+		Web Unit Test Tool This tool provides a set of features for testing the source code.
 	
 
 	Analysis and debugging tools
     	
-		Remote Inspector This tool allows you to debug your Web applications.
+		Web Inspector This tool allows you to debug your Web applications.
 		
-		JavaScript Analyzer in mobile applications only This tool makes it easy to find problems in JavaScript code.
+		JavaScript Analyzer This tool makes it easy to find problems in JavaScript code.
 		
-		JavaScript Log Console view Shows JavaScript logs for Web widgets.
+		JavaScript Log Console view Shows JavaScript logs for Web applications.
 	
 	
 	Tips for tool usage
diff --git a/org.tizen.devtools/html/web_tools/uibuilder_w.htm b/org.tizen.devtools/html/web_tools/uibuilder_w.htm
deleted file mode 100644
index 68e1968..0000000
--- a/org.tizen.devtools/html/web_tools/uibuilder_w.htm
+++ /dev/null
@@ -1,1802 +0,0 @@
-
-
-
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    UI Builder
-
-
-
-
-
-    
-        
-    
-    
-        Content
-        
-            Animator
-            
-            Supported Views and Editors
-        
-    
-
-
-
-
-UI Builder
-
-The Tizen Web UI Builder is a graphical user interface builder tool that simplifies the creation of Tizen Web UIs by allowing you to arrange widgets using a drag-and-drop WYSIWYG (What You See Is What You Get) editor. The UI Builder supports a variety of UI widgets, and views and editors.
-
-  

     
-    
-     
-      
-     
-     
-      
-     
-    
-  Note
This tool is supported in mobile applications only.  
-
-The UI Builder is not only a UI layout code generating tool, it also supports an easy-to-use programming model though the UI Builder project.
-
-Figure: UI Builder
-
-
-Animator
-
-The Tizen Animator can apply CSS3 animations to Web applications created by the Tizen Web UI Builder. The Animator can operate seamlessly within a UI Builder project. To access it, simply select the Animator tab in the UI Builder editor Page Designer view.
-
-The Animator shares several views with the UI Builder, such as Outline, Properties, and Pages views. The Animator supports a variety of predefined animations using CSS3 properties, such as opacity, translation, and rotation and also creates its own KeyFrame in the Timeline view or the Animator Editor.
-
-Figure: Animator
-
-
-
-
-Supported Views and Editors
-
-The UI Builder supports the following views and editors:
-                Animator Editor
-
-The Animator Editor is a tab in the Page Designer view in the Tizen Web UI Builder. You can see widgets in the editor and create KeyFrames with play headers in the Timeline view.
-
-To access the editor, select the Animator tab in the Page Designer view. The design area changes to the editor area, which has no palette, and the Timeline view appears.
-
-Figure: Changing to the Animator view
-
-
-Figure: Editor area in animator mode
-
-
-The Animator Editor consists of a toolbar (same as in the Page Designer view) and the editor area, which lets you work with widgets and animations visually. 
-
-After you create a KeyFrame in the Timeline view, you can see the path and path handler that operate the curve path between KeyFrames in the Animator Editor area. The following figure and table illustrate the elements in the editor area that are used to KeyFrame path.
-
-Figure: Animator Editor area
-
-
-
- 
- -  -  - 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
-  Table: Animator editor elements
- 


Icon Element Description
Path Shows the widget moving path, if the animation changes the widget position.
Animator handler Sets position-related properties.
Edge Creates a new curve.
Curve controller Controls the curve angle.
-
-                Configuration Editor  
-
-The configuration editor can be used to configure the settings of the UI Builder project. You can define which devices are available in the Web UI Builder and can be selected from the toolbar in the Page Designer editor. Based on the detail information of the selected devices, the UI Builder creates a feature list to be used in the N-Screen view.
-
-To open the configuration editor, double-click the index.config.xml file in the Project Explorer view. 
-
-  Figure: Configuration editor 
-  
-
-  
-The configuration editor consists of the following parts:
-Device List
-Defines the devices available in the Page Designer editor. You can only use the selected devices in the Page Designer editor.
-Device Info
-Includes detail information of the device selected in the Device List. For example, the device name, orientation, device-pixel-ratio, device-width, device-height, width, and height.
-Device Feature
-Shows the feature list for the N-Screen view:
-
-Common
-Contains all devices.
-Orientation
-Contains either portrait or landscape.
-Pixel-ratio
-Indicates the density of pixels per unit. 
-Resolution
-Indicates the combination of device-width and device-height. 
-
-
-                DataBinding View
-
-
-Data binding is a way to bind data and UI at runtime, so when the data changes, the UI updates automatically.
-
-The DataBinding view helps you to manage the data source and model easily and show the binding information between data model and UI widgets. If the DataBinding view is not visible, open it from Window > Show View > Other > Tizen > DataBinding.
-
-The DataBinding view consists of a data source panel, data model panel, and binding information panel.
-
-Figure: DataBinding view
-
-
-To bind data between your HTML file in the Page Designer editor and the Data Model panel, you can:
-
-
-    Select the data model item in the DataBinding view, and then drag and drop the item to the widget on the Page Designer editor.
-    Use the Set Target dialog to select the HTML element and bindings.
-
-
-Data Source Panel
-
-The data source panel displays the hierarchical structure of all data sources.
-
-Figure: Data source panel
-
-
-The following tables describe the data source panel function buttons and available data source types.
-
-
-   
-   -    -    -   
-   
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-     
-     
-     
-     
-    
-   
-
-     Table: Data source Panel functions
-   


Button Name Description
Set data source Set the selected data source.
Create Create a new data source.
Delete Remove the selected data source.
-
-
-   
-   -    -    -   
-   
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-     
-     
-     
-    
-     
-     
-	 
-    
-     
-     
-     
-    
-   
-
-     Table: Data source icons
-   


Type icon Description
Empty data source
Static data source
Remote call data source
System API call data source (Contact, Calendar, and Call History that use the Tizen Web Device API)
File data source
-
-After you create a new data source by clicking the  button, select the new source, and click the  button, the Set Source window is shown. In the window, you can set data source configurations and show structured data schema:
-
-
-    In the data type section, select the data source type.
-    In the settings section, view and set the properties for a specific data source.
-    In the data model section, view the structured data schema, and create, remove, and move items within the schema.
-
-
-Figure: Set Source window
-
-
-Data Types
-
-Each data type provides different options:
-
-
-
-Static
-
-You can easily make a JSON or XML type data with the static data type. You can fill the text box from the input directly, or open the file.
-
-The data model section displays a manageable data schema.
-
-
-
-
-   
-   -    -    -   
-   
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-     
-     
-     
-    
-     
-     
-     
-    
-     
-     
-     
-    
-   
-
-     Table: Static data source icons
-   


Icon Description
Show the data in the formatted manner.
Show the data in the compacted manner.
Open a file (XML or JSON data file).
-      Open the file and fill in the textbox.
Reload the opened file.
Clear the textbox.
-
-
-   
-   -    -    -   
-   
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-     
-     
-     
-    
-     
-     
-     
-    
-     
-     
-     
-    
-     
-     
-     
-    
-     
-     
-     
-    
-   
-
-     Table: Data model section icons
-   


Icon Description
Expand all fields.
Collapse all fields.
Add a new field.
Remove the selected field.
Remove all fields.
Move the selected field upwards.
Move the selected field downwards.
-
-The same data model section icons are available for all data types.
-
-
-
-Remote Call
-
-You can easily request data from a remote server using the remote call data type.
-
-
-
-
-   
-   -    -    -   
-   
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-   
-
-     Table: Properties of the remote data source
-   


Property Description
URL URL to which the request is sent.
METHOD Type of request, at the moment only GET-requests are supported.
Proxy Protocol of the data.
Source Type Type of data that is received from the server.
Timeout Timeout (in milliseconds) for the request.
Request Parameters Query string for requests.
-
-
-
-Contact
-
-You can easily request data from Tizen address books using the contact data type:
-
-
-    Get an array of contacts by selecting an appropriate value in the AddressBook Type drop-down menu.
-    If you select "Select addressBook ID" in the AddressBook Type drop-down menu, input the ID value in the Addressbook ID field.
-
-
-
-
-
-
-Calendar
-
-You can easily request data from the Tizen calendar using the calendar data type:
-
-
-    Get an array of calendar items by selecting an appropriate value in the Calendar drop-down menu.
-    Define the calendar type (EVENT or TASK), in the Calendar Type field.
-    If you select "Type a Calendar ID" in the Calendar drop-down menu, input the ID value in the Calendar ID field.
-
-
-
-
-
-
-Call History
-
-You can easily request data from the Tizen call history using the call history data type:
-
-
-    Set the service type of the call in the Type drop-down menu.
-    Indicate whether the call was dialed, received, missed, blocked, or rejected in the Direction drop-down menu.
-    Define the sort order in the StartTime Order drop-down menu.
-
-
-
-
-
-
-File System
-
-You can easily request data from a file on runtime using the file data type:
-
-
-    Select the file in the project using the Path field.
-    Define the file content type (JSON or XML) in the Type drop-down menu.
-
-
-
-
-
-
-
-
-Data Model Panel
-
-The data model panel displays the data schema. It is used to bind data to widgets on the Page Designer editor with drag and drop.
-
-To create the data model, first create a data source in the data source panel, and then drag the data source from the data source panel to the data model panel.
-
-Figure: Data model panel
-
-
-The following tables describe the data model panel function buttons and available data model types.
-
-
-   
-   -    -    -   
-   
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-     
-     
-     
-     
-    
-   
-
-     Table: Data model panel function buttons
-   


Button Name Description
Create Item Create a new data model item.
Create Model Create a new data model.
Delete Remove the selected data model or selected data model item.
-
-
-   
-   -    -    -   
-   
-    
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
-    
-   
-
-     Table: Data model types
-   


Type icon Description
There is no data source.
There is a data source.
-
-Binding Information Panel
-
-When the binding is successful, the binding information panel is displayed:
-
-
-    The Data column displays the data model item name.
-    The Widget column displays the page ID and the binding widget ID.
-    The Binding column displays the binding format.
-
-
-Figure: Binding information panel
-
-
-The following table describes the binding information panel function buttons.
-
-
-   
-   -    -    -   
-   
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-     
-     
-     
-     
-    
-   
-
-     Table: Binding information Panel function buttons
-   


Button Name Description
Toggle Show or hide the binding format message on the tooltip of the widget in the Page Designer editor. The message appears when the binding is successful.
Delete Remove the selected binding information.
-
-If a widget is bound, it has the  icon in the Page Designer editor. To see the binding format, move the cursor on the widget.
-
-Figure: Binding information in Page Designer
-
-
-        
-                N-Screen Views
-
-
-The N-Screen views define how to use content in multiple screens and allows you to change content in other screens easily.
-
-If the N-Screen views are not visible, open them from Window > Show View > Other > Tizen > NScreen.
-
-  Figure: N-Screen views and devices 
-  
- 
-The N-Screen views consist of the N-Screen view and Devices.
- 
- N-Screen View
- 
- The N-Screen view consists of CSS Layers and screen features.
- 
-   Figure: N-Screen view 
-  
- 
-CSS Layers
-The CSS layer section of the N-Screen view displays the CSS layers of the page currently selected in the Page Designer view. Enable and disable CSS files in CSS Layers.
-
-When you enable or disable a CSS file, you can see an added or deleted CSS style of the selected page in the Page Designer.
-
-  Figure: CSS Layers 
-  
-  
-The following images show how to enable and disable a CSS file in CSS layers.
-  
-  
-  Figure: Enable "index_page1_common.css" only and show its CSS style in Page Designer 
-   
-
-  Figure: Enable "index_page1_320X533.css" only and show its CSS style in Page Designer 
-  
-   
-  Figure: Enable both and show all CSS styles in Page Designer 
-  
-   
-Screen Features
-
-The screen features consist of the detail information of the selected devices in the configuration editor.
-You can select, enable, and disable predefined screen features.
-
-  Figure: Screen features 
-  
-  
-Screen features consist of the following features.
-
-
-
-
- 
- 
-
-
- 
- 
-
-
- 
- 
-
-
- 
- 
-
-
- 
- 
-
-
-Table: Screen featuresName Description
Common Consists of the default screen only, and cannot be disabled. 
- When a CSS style is added to the Common screen, it is applied to all devices.
-
Orientation Consists of portrait and landscape screens, and can be enabled or disabled.
-When a CSS style is added to the portrait screen, it is applied to the portrait view of the screen only.
-
Pixel Ratio Consists of various screens, and can be enabled or disabled.
-When a CSS style is added to any screen, it is applied only to the device with an equal screen pixel ratio (density of pixels per unit).
-
Resolution Consists of various screens, and can be enabled or disabled.
-When a CSS style is added to any screen, it is applied only to the device with an equal screen size.
-
-
-To enable a screen:
-
- Right-click the desired screen size and select Enable.
-Define the content of the new style sheet (such as index_page1_320x320.css) in the Project Explorer view.
-
-
-  Figure: Enabling a screen 
-  
-
-  Devices
-  
-The Devices menu consists of a selected device list in the configuration editor.
-When you select a screen in the screen features, Devices shows a supported device list. If you selected a device in the Page Designer view, it is shown with a screen where all CSS styles are applied. The shown screen is the same size as a real device screen.
-  
- Figure: Device page of the configuration editor 
-   
-  Figure: Devices 
-  
-
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-   
-  
-   
-   
-   
-  
-   
-   
-   
-  
-   
-   
-     
-  
-   
-   
-    
-  
-Table: Devices informationName Description
W 320x320 [320x320] x1.0 (1:1) Orientation: Portrait
-Pixel ratio: 1.0
-Resolution: 320x320
-
W 312x496 [312x496] x1.0 (10:16) Orientation: Portrait
-Pixel ratio: 1.0
-Resolution: 312X496
-
W 360x480 [360x480] x1.0 (3:4) Orientation: Portrait
-Pixel ratio: 1.0
-Resolution: 360x480
-
M 480x800 [320x533] x1.5 (3:5) Orientation: Portrait
-Pixel ratio: 1.5
-Resolution: 320x533
-
M 800x480 [533X320] x1.5 (5:3) Orientation: Landscape
-Pixel ratio: 1.5
-Resolution: 533x360
-
M 540x960 [360x640] x1.5 (9:16) Orientation: Portrait
-Pixel ratio: 1.5
-Resolution: 360x640
-
M 960X540 [640X360] x1.5 (16:9) Orientation: Landscape
-Pixel ratio: 1.5
-Resolution: 640x360
-
M 720x1280 [360x640] x2.0 (9:16) Orientation: Portrait
-Pixel ratio: 2.0
-Resolution: 360x640
-
M 1280X720 [640x360] x2.0 (16:9) Orientation: Landscape
-Pixel ratio: 2.0
-Resolution: 640x360
-
M 1080x1920 [360x640] x2.0 (9:16) Orientation: Portrait
-Pixel ratio: 2.0
-Resolution: 360x640
-
M 1920x1080 [640x360] x2.0 (16:9) Orientation: Landscape
-Pixel ratio: 2.0
-Resolution: 640x360
-
M 800x1280 [800x1280] x1.0 (10:16) Orientation: Portrait
-Pixel ratio: 1.0
-Resolution: 800x1280
-
M 1280x800 [1280x800] x1.0 (16:10) Orientation: Landscape
-Pixel ratio: 1.0
-Resolution: 1280x800
-
M 1600x2560 [800x1280] x2.0 (10:16) Orientation: Portrait
-Pixel ratio: 2.0
-Resolution: 800x1280
-
M 2560x1600 [1280x800] x2.0 (16:10)) Orientation: Landscape
-Pixel ratio: 2.0
-Resolution: 1280x800
-
-
-To select a device:
-
- Click the Common screen in the N-Screen view.
- Open the Devices drop-down menu.
- Select the desired device.
-  
- Change the text in the Page Designer toolbar.
-You can view the change in the Page Designer view.
-  
- 
-
-                Outline View
-
-The Outline view displays the hierarchical structure of the page currently open in the Page Designer view. If the Outline view is not visible, open it from Window > Show View > Other > General > Outline.
-
-Figure: Outline view
-
-
-You can manage widgets in the Outline view:
-
-
-    Create a widget by dragging it from the Palette to the Outline view.
-    Move a widget by dragging it to a new position.
-    Change the widget ID in the context menu or by pressing the F2 key.
-    Manage selected widgets by cutting, copying, pasting, and deleting them.
-
-
-
-                Pages View
-               
-
-The Pages view displays a thumbnail image of all the pages in the currently selected project. If the Pages view is not visible, open it from Window > Show View > Other > Tizen > Pages.
-
-Figure: Pages view
-
-
-You can re-order pages by dragging them to the selected position in the Pages view.
-You can create and delete page templates and pages in the Pages view. Most actions are provided through the context menu:
-
-To add a basic page:
-Go to Common > Add Basic Page.
-To add a new page through a page template:
-
-Right-click the view and select New Page.
-Select a group.
-Select a page template.
-5 page templates are provided by default.
-
-Insert a page ID.
-Click Finish.
-
-
-To delete a selected page:
-Right-click the page and select Delete.
-
-To create a new page template:
-
-Right-click the view and select Create Template.
-Select a group.
-Insert a page template name.
-Click Finish.
-
-
-To import a page template:
-
-Right-click the view and select Import Template.
-Select a page template.
-Select a group.
-Insert a page template name.
-Click Finish.
-
-
-To export a page template:
-
-Right-click the page and select Export Template.
-Select a group.
-Select a page template.
-Select the export location.
-Insert the exported template name.
-
-
-
-         
-                Page Designer Editor
-
-
-The Page Designer editor is a WYSIWYG editor for the UI Builder project.
-
-Figure: Page Designer
-
-
-The Page Designer editor consists of the following parts:
-
-Palette
-
-The palette contains all the TAU widgets and some useful HTML widgets, which you can select and add to the design area.
-
-Toolbar
-
-The toolbar supports the following functions:
-
-
-Select the page you want to edit using the page combo.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Page button Description
Move to the previous page.
Move to the next page.
-
-
-Select the resolution of the design area using the  drop-down menu.
-Zoom within the design area.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Zoom button Description
Zoom out.
Zoom in.
Maximize the design area on the screen.
Change the design area size to a predefined percentage value.
-
-
-Design area
-You can work with widgets visually so that you can see what your application looks like as you build it.
-
-
-Palette
-
-The Palette contains all the TAU widgets and some useful HTML widgets. You can select and add a widget to your application screen by dragging it from the palette to the design area.
-
-When you hover on a widget, a description of the widget is displayed.
-
-Supported Widgets
-The following table defines the TAU and HTML widget support in the UI Builder.
-
-
-
-  
-  
-  
-  
-
-
-  
-
-        
-        
-        
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Table: Components supported by the UI Builder
-        Group 
-        Component 
-        Description 
-        Support
Buttons Controlgroup Used to group a set of buttons. Yes
Button Shows a control that you can use to generate an action event when pressed and released.
Toolbars Footer Sets the default bar at the bottom of the page. Yes
Header Sets the default bar at the top of the page.
Search Filter Bar Used to search for page content. This widget can be placed in the header.
Tabbar Supports the grouped button style in the header.
Tabbar Item Used only in the tabbar widget.
Image Standard HTML widget. Not yet
Button Shows a control that you can use to generate an action event when pressed and released. Yes
Header Button Used only in the header widget.
Multiline Text Used in the header widget.
Content Audio Shows a player control that you can use to view and handle multimedia content. Not yet
Gallery Shows images in a gallery.
Map Shows a map on the screen.
Progress Bar Shows a control that indicates the progress percentage of an on-going operation. Yes
Progress Shows that an operation is in progress. Not yet
Token Text Area Changes a text item to a button. Yes
Video Shows a player control that you can use to view and handle multimedia content. Not yet
Virtual Grid Used to display a list of unlimited data elements on the screen for better performance.
-This widget displays the data in the grid format by reusing the existing grid control space.
-
Collapsible set Used to create a set of collapsibles. Not yet
Collapsible Used to create a collapsible block of content.
List Color Bar Used only in the list item widget. Not yet
List Used to display, for example, navigation data, results, and data entries. Yes
List Divider Used as a list separator for grouping lists. This widget can be used only in the list widget.
List Item Used only in the list widget.
List Action Item Used only in the list widget.
Button Shows a control that you can use to generate an action event when pressed and released.
Check Box Item Used only in the check boxes and list item widget.
Flip Toggle Switch Shows a 2-state switch on the list item widget. Not yet
Maintext Icon1 Used only in the list item widget. Yes
Maintext Icon2 Used in the list item widget.
Subtext Icon Used only in the list item subtext1 widget.
Subtext1 Used in the list item widget.
Subtext2 Used in the multiline list item.
Thumbnail Used in the list item widget.
Progress Bar Shows a control that indicates the progress percentage of an on-going operation.
Radio Button Item Used only in the radio button and list item widgets.
Dynamic List Extendable List Used to display a list of unlimited data elements on the screen for better performance.
-The list is extended if you click the button at the bottom of the list to load more data elements.
- Not yet
Virtual List Used to display a list of unlimited data elements on the screen for better performance.
-This widget provides easy access to databases to retrieve and display data.
-
Form Elements Form Control Standard HTML widget. Yes
Label
Legend
Submit Button
Text Area
Text Input
Check Boxes Shows a list of options where 1 or more can be selected.
Check Box Item Used only in the check boxes and list item widget.
Date Time Picker Enables users to select a date and a time. Not yet
Radio Buttons Used to display a list of options of which only 1 can be selected. Yes
Radio Button Item Used only in the radio button and list item widget.
Slider Used to change values by dragging a handle.
Select Menu Used to select a value in the menu. Not yet
Select Menu Item Group Used only in the select menu widget.
Select Menu Item Used only in the select menu and select menu item group widget.
Flip Toggle Switch Shows a 2-state switch on the screen. Yes
HTML Canvas Standard HTML widget. Yes
Div Control
Form Control
Heading
Image
Label
Link
Submit Button
Text
Text Area
Text Input
-
-Snippets
-
-To use snippets:
-
-
-
-To create a snippet for a widget in the Page Designer view:
-    
-    Right-click a widget and select Create Snippet.
-    Select an image file.
-    Insert a snippet name.
-    Click Finish.
-    
-
-
-To rename a snippet in the Snippet palette:
-    
-    Click the Snippet palette.
-    Right-click a snippet and select Rename Snippet. 
-    
-
-
-To import a snippet into the Snippet palette:
-    
-    Click the Snippet palette.
-    Right-click and select Import Snippet.
-    Select the import location.
-    Insert a snippet name.
-    Click Finish.
-    
-
-
-To export a snippet from the Snippet palette:
-    
-    Click the Snippet palette.
-    Right-click and select Export Snippet.
-    Select a snippet.
-    Select the export location.
-    Insert a snippet name.
-    Click Finish.
-    
-
-
-To delete a snippet in the Snippet palette:
-    
-    Click the Snippet palette.
-    Right-click a snippet and select Delete Snippet.
-    
-
-
-
-
-                Properties View
-
-
-The Properties view displays the properties of the widget selected in the Page Designer view. If the Properties view is not visible, open it from Window > Show View > Other > General > Properties.
-The Properties helps you to edit widget and CSS properties, and events.
-
-  Figure: Properties view
-  
-
-The Properties View consists of Attributes, Style, and Event tabs:
-
-
-  Attributes
-  In the Attributes tab, you can edit widget attributes. Attributes are categorized into Common and Widget specification. In the Common category, you can edit common widget properties, and in the Widget specification category, you can edit widget-specific properties. The Widget specification category can be divided into categories in accordance with the widget attributes.
-   
-    Common
-     The Common category only includes the ID attribute, which is the default widget identifier in the HTML and JavaScript.
-    Widget specification
-    
-    
-  
-
-  Style
-  In the Style tab, you can edit the CSS properties of the selected widget. These properties include, for example, position, size, text, background, and border. If you select a widget in the Page Designer view, the Style tab shows an ID selector of a selected widget. The ID selector is the default CSS selector. You can create or remove the CSS selector of a selected widget.
-  
-   You can edit the CSS properties, such as the left, top, width, and height styles. The Page Designer view reflects the applied style.
-     
-
-   CSS selector
-   To create a CSS selector, click the  button, and the CSS Selector dialog opens. The dialog shows the live DOM hierarchy and class of the selected widget, and you can select the selector you want.
-     
-    To remove a CSS selector, click the  button. If you remove the default CSS selector, the CSS selector itself is not removed, only the CSS style.
-     
-   
-   
-   
-
-  Action
-  In the Action tab, you can create custom actions and create and bind predefined widget actions with JavaScript functions. Under the applicable event section (such as Tap), select the action you want from the Action drop-down menu, and define the additional action details.
-
-     
-
-  The following actions are available:
-
-  
-   Run Java Script Function: Create an event handler and bind it with a JavaScript function defined in the Function field. If you click the  button next to the Function field, the JavaScript editor opens. When the JavaScript function is focused, you can start writing code.
-   Go to Page: Select the page to move to in the Page field (Next Page, Previous Page, or any of the pages that are already created). You can also select a transition effect.
-
-   Open URL: When an event occurs, move to the defined URL.
-   Start Animation Group: When an event occurs, start the selected animation group.
-   Pause Animation Group: When an event occurs, pause the selected animation group.
-   Go to Time in Animation Group: When an event occurs, move the selected animation group to the animation time defined in the Time field.
-
   
-
-         
-                Resources View
-
-The Resources view displays the resources in the selected project. If the Resources view is not visible, open it from Window > Show View > Other > Tizen > Resources.
-
-Figure: Resources view
-
-
-The Resources view provides the following features:
-
-
-Resource management
-You can copy, paste, delete, and rename resources.
-Resource navigation
-You can move files to child and parent folders.
-Resource filter
-You can filter the view to show resources of a particular name or extension.
-Resource import
-You can import files or folders.
-Easy editing
-You can edit the resource property of the widgets using drag and drop.
-
-
-         
-                Timeline View
-  
-
-The Timeline view is part of the Animator feature. You can add, delete, and edit animations about HTML widgets on the Animator Editor. In addition, you can preview the animations while making them. In the Timeline view, you can create KeyFrames for the animations. If the Timeline view is not visible, open it from Window > Show View > Other > Tizen > Timeline.
-
-The Timeline view consists of a toolbar, outline, and timeline components.
-
-  Figure: Timeline view
-  
-
-
-
-Toolbar Component
-
-You can use the toolbar to add, edit, and preview animations, and use filter-related tools.
-
-  Figure: Timeline toolbar
-  
-
-   
-   
-   -    -    -   
-   
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-   
-  
-     Table: Toolbar functions
-   


Function Name Description
Backward Move time back towards the beginning of the animation group.
Play Play the animation group.
Forward Move time forward towards the end of the animation group.
Repeat Repeat the animation group.
Time Edit Box Show the current time. You can change the time.
Ease Adjust the playback speed of the animation.
Predefined KeyFrame Add a widget to predefined animations.
Filter Show only animated widgets.
Zoom In/Out Zoom in and out in the timeline ruler.
-
-Outline Component
-
-You can use the outline to add and edit animation groups and widget HTML and CSS selector lists.
-
-  Figure: Timeline outline
-  
-
-The following tables describe the outline functions for animation groups and HTML and CSS selector lists.
-   
-   
-   -    -    -   
-   
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-       
-  
-     Table: Timeline animation group functions
-   


Function Name Description
Animation Group Name Name of the current animation group.
Animation group drop-down menu Add, delete, and edit animation groups.
-
-   
-   
-   -    -    -   
-   
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-       
-  
-     Table: Timeline HTML and CSS list functions
-   


Function Name Description
HTML Widget and CSS Selector List Shows a list of widgets and selectors on the Animator Editor view.
Un/Lock Prevent or allow the editing of widgets.
In/Visible Hide or show the widget on the Animator Editor view.
Add KeyFrame Add the widget to the KeyFrame.
-
-
-Timeline Component
-
-
-You can use the timeline to edit KeyFrames and KeyFrame units.
-
-   Figure: Timeline
-  
-
-   
-   
-   -    -    -   
-   
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-    
-     
-     
-     
-    
-       
-  
-     Table: Timeline KeyFrame and unit functions
-   


Function Name Description
Time ruler Shows the time in microseconds.
Time bar Shows the current time.
Animation state State of the HTML widget animation, shows the play, start, or end time.
KeyFrame Minimum unit for animation.
KeyFrame Unit Bundle 2 or more KeyFrames.
-
-
-Timeline View Operations
-
-The following operations are possible in the Timeline view:
-
-Add an animation group:
-
-Open the animation group drop-down menu.
-Select New animation group.
-In the New animation group window, define the new animation group name and attributes, and click OK.
-  
-The new animation group is now shown in the outline.
-
-
-
-Delete an animation group:
-
-Open the animation group drop-down menu.
-Select Delete animation group.
-If there is only 1 animation group, it cannot be deleted. If there are 2 or more animation groups, select the ones you want to delete and click OK.
-
-
-   
-Add a predefined KeyFrame unit:
-
-Use the toolbar:
- 
-Drag the timeline ruler to the point you want.
-  
-  
-
-Click  on the toolbar and select emphasis > flash.
-  
-
- The flash KeyFrame unit is now visible on the timeline.
- 
-
-Use the context menu:
-
-Drag the timeline ruler to the point you want.
-Right-click the desired line on the timeline and select Add PredefinedKeyFrame > emphasis > flash.
-    The flash KeyFrame unit is now visible on the timeline.
-
-
-
-
-
-Add a KeyFrame or a KeyFrame unit:
-
-Drag the timeline ruler to the point you want.
-  
-From the selector list in the outline, select the desired selector and click the  button.
-  
-The KeyFrame is now visible on the timeline.
-  
-Drag the timeline ruler to a new point.
-Move the widget in the Animator Editor.
-Or perform the move by entering "100" to the top property field in the Properties view.
-The KeyFrame unit is now visible on the timeline.
-
-
-
-Delete a KeyFrame or a KeyFrame unit:
-
-Click the timeline ruler, or enter the desired time to Time Edit Box.
-Right-click the KeyFrame or KeyFrame unit you want to delete, and select Delete.
-
-
-
-
-Preview an animation:
-
-Move the timeline ruler to the desired time and click the  button on the toolbar.
-To play an animation group repeatedly, click the  button.
-To stop the preview, click the  button.
-
-
-
-Copy, cut and paste KeyFrames or KeyFrame units:
-
-After adding it, click the desired KeyFrame or KeyFrame unit.
-  
-
-Right-click the KeyFrame or KeyFrame Unit you want to copy or cut, and select Copy or Cut.
-  
-Move the timeline ruler to the wanted time, right-click it and select Paste.
-
-
-
-Filter animations:
-Click the   button on the toolbar to see only animated HTML widgets in the outline animation group.
-
-Ease animations:
-
-Click the KeyFrame.
-  
-Click the  button and select linear.
-
-The applied linear KeyFrame is now visible in the preview.
-
-Create a custom animation:
-Add the KeyFrame unit for which you want to create a custom animation.
-Right-click the KeyFrame unit, and select Create Custom Animation.
-
- 
-Select the icon, and define the category and custom animation name.
-
- 
-Click Finish.
-Add the custom animation like a predefined KeyFrame unit.
-
- 
-Delete a custom animation:
-Right-click the timeline and select Delete Custom Animation.
-
- 
-Select the custom animations that you want to delete.
-Click Finish and confirm the deletion by clicking OK.
-
-You can check that the selected custom animations have been removed from the predefined list.
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-    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.devtools/html/web_tools/remote_inspector_w.htm b/org.tizen.devtools/html/web_tools/web_inspector_w.htm
similarity index 81%
rename from org.tizen.devtools/html/web_tools/remote_inspector_w.htm
rename to org.tizen.devtools/html/web_tools/web_inspector_w.htm
index dc238f7..d8ef9e4 100644
--- a/org.tizen.devtools/html/web_tools/remote_inspector_w.htm
+++ b/org.tizen.devtools/html/web_tools/web_inspector_w.htm
@@ -10,11 +10,11 @@
 	
 	
 	
-  Remote Inspector 
+  Web Inspector 
   
  
 
- 
+ 
 	
 		 
 	
@@ -32,14 +32,14 @@
 		
 		Related Info
 		
-			Running and Debugging Applications 
+			Running and Debugging Applications

	<content>	<content>
		<tizen:application> (in mobile or wearable)
	<tizen:content> (in mobile or wearable)
Represents the root element of a configuration document. Expected children: - <name>, <description>, <author>, <license>, <icon>, <content>, <feature>, <preference>, <access>, <tizen:account>, <tizen:app-control>, <tizen:application>, <tizen:content>, <tizen:privilege>, <tizen:setting>, and <tizen:profile> Attributes: + <name>, <description>, <author>, <license>, <icon>, <content>, <feature>, <preference>, <access>, <tizen:account>, <tizen:app-control>, <tizen:application>, <tizen:content>, <tizen:privilege>, <tizen:setting>, and <tizen:profile> Attributes: xml:lang dir id @@ -289,9 +290,9 @@	<name> element
Represents the widget name used for example, in the application menu. Expected children: +	Represents the Web application name used for example, in the application menu. Expected children: <span> and <text node> Attributes: - xml:lang + xml:lang dir short
<description> element
Represents text describing the purpose of the widget. Expected children: +	Represents text describing the purpose of the Web application. Expected children: <span> and <text node> Attributes: - xml:lang + xml:lang dir
<author> element
Represents the person that created the widget. Expected children: +	Represents the person that created the Web application. Expected children: <span> and <text node> Attributes: - xml:lang + xml:lang dir href email

<content> element
Represents the boot-strapping mechanism used to point to the main file of the widget. Attributes: - xml:lang +	Represents the boot-strapping mechanism used to point to the main file of the Web application. Attributes: + xml:lang dir encoding src @@ -347,8 +348,8 @@	<icon> element
Represents the widget icon. Attributes: - xml:lang +	Represents the Web application icon. Attributes: + xml:lang dir src width @@ -362,9 +363,9 @@	<license> element
Represents the license under which the widget is distributed. Expected children: +	Represents the license under which the Web application is distributed. Expected children: <span> and <text node> Attributes: - xml:lang + xml:lang dir href
<preference> element
Used to declare preferences as key-value pairs for the widget for use at runtime. Attributes: - +	Used to declare preferences as key-value pairs for the Web application for use at runtime. Attributes: + name The maximum length may be limited to 80 bytes. In that case, leftover bytes are ignored. value The maximum length may be limited to 8192 bytes. In that case, leftover bytes are ignored. readonly @@ -392,7 +393,7 @@	<access> element
Used to control network access from within a widget and to request access to certain network resources from the user agent. Attributes: origin +	Used to control network access from within a Web application and to request access to certain network resources from the user agent. Attributes: origin subdomains
Represents the generic container used mainly for internationalization. Expected children: <span> and <text node> Attributes: - xml:lang + xml:lang dir
Used to declare parameters to be used with a feature in mobile and wearable applications. Attributes: - xml:lang + xml:lang dir name value	Used to register account provider information. Occurrences: - + 0 or more Expected children: - + icon Mandatory. Since the icons are used in the device under Settings > Accounts, place them in a shared directory. Attributes: - Account - File path of the account provider icon. The icon size is 72 x 72 pixels. + Account - File path of the account provider icon. The icon size is 72 x 72 pixels. AccountSmall - File path of the account provider small icon. The icon size is 45 x 45 pixels. display-name Mandatory; display name of the account provider capability Optional; capability of the account provider. Capabilities are defined in the http://<VENDOR_INFORMATION>/accounts/capability/<NAME> IRI format. Attributes: - + multiple-account-support Mandatory; indicates whether multiple accounts are supported (available values: true, false) Example: <tizen:account multiple-account-support="false"> @@ -485,11 +486,11 @@
Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see Application Controls. Occurrences: - + 0 or more Expected children: - + src Mandatory; page handling the requests operation Mandatory; string that defines the action to be performed uri and mime Optional; additional parameters used for resolving application control requests @@ -512,11 +513,11 @@
Used to uniquely identify a Tizen application. Occurrences: - + 1 Attributes: - + id Mandatory; Tizen application ID, which is a combination of the Tizen package ID and project name. The application ID is unique in the device. The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes. package Mandatory; Tizen package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store. required_version Mandatory; Tizen API version required for running the Web application @@ -526,6 +527,8 @@

Note
The ambient_support option is only used for watch applications, and ignored in all non-watch applications.

Used to define the supported input language of the current IME type application. Occurrences: - + 1 or more Example: <tizen:languages> @@ -1053,20 +1070,21 @@	<tizen:category /> element
Used to define the Tizen wearable application type to be watch clock. +	Used to define the categories to which the service application belongs. Occurrences: - - 0 or more - If omitted, the widget defaults to the watch widget type. + + 0 or more Attributes: - + name Mandatory; string Example: <tizen:category name="http://tizen.org/category/wearable_clock" />

Constraint	Note
- - The CSS Preview is based on the Google Chrome™ browser. - - The CSS Preview may show differ from the actual product. It supports to see the overall outline. - - Some selectors and elements do not work on CSS Preview.	The following constraints apply to the CSS preview: + The CSS preview is based on the Google Chrome™ browser. + The CSS preview can differ from the actual product. It allows you to see the overall outline. + Some selectors and elements do not work on the CSS preview.

You can debug Web applications using the JavaScript Debugger tool. The JavaScript Debugger is based on Webkit Web Inspector, and has been modified to support remote debugging.

You can debug Web applications using the JavaScript Debugger tool. The JavaScript Debugger is based on Webkit Web Inspector, and has been modified to support remote debugging.

The JavaScript Debugger supports the following panels:

Elements Panel
Console Panel

Figure: JavaScript Debugger panels

JavaScript Debugger panels

When debugging with the Emulator, the Emulator communicates with the Google Chrome™ browser through the HTTP protocol.

When the JavaScript Debugger is started, the Network panel is off. To enable the Network panel and start monitoring the resource loading status, press the F5 key. This reloads the current page and displays the load time on the Network panel.

The Elements panel of the JavaScript Debugger allows you to see the Web page components (the DOM tree, CSS style, and Document Object Model).

Figure: Elements panel

Elements panel

The Resources panel of the JavaScript Debugger allows you to inspect resources. You can interact with frames containing resources, such as HTML, JavaScript, CSS, images, and fonts. You can also inspect HTML5 databases, local storage, cookies, and application cache.

Figure: Resources panel

Resources panel

The Network panel of the JavaScript Debugger allows you to inspect resources downloaded over the network. You can also inspect the HTTP header, response, cookies, and preview.

Figure: Network panel

Network panel

The Sources panel of the JavaScript Debugger allows you to inspect the JavaScript source page. You can debug your JavaScript code. This panel supports watch expressions, callstack, scope variables, and break point operation. In addition, it supports basic debugging operations: continue, step over, step into, and step out.

Figure: Sources panel

Sources panel

The Timeline panel of the JavaScript Debugger allows you to perform advanced timing and speed analysis. You can see how long the browser takes to handle DOM events, and rendering and painting windows.

Figure: Timeline panel

Timeline panel

The Profiles panel of the JavaScript Debugger allows you to inspect the JavaScript performance analyses. You can inspect CPU profiles or CSS Select profiles.

Figure: Profiles panel

Profiles panel

The Console panel of the JavaScript Debugger allows you to inspect the JavaScript console operation. You can interact with your page programmatically. Any errors or warnings on your page are shown in the console.

Figure: Console panel

Console panel

diff --git a/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm b/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm index 8c8c838..d690f20 100644 --- a/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm +++ b/org.tizen.devtools/html/web_tools/web_simulator_features_w.htm @@ -15,7 +15,7 @@ -

@@ -35,7 +35,7 @@

The Web Simulator has several features for developing Web applications.

The Web Simulator provides the following panel operations:

Expand/Collapse
Each panel can be opened or closed by clicking the small arrow on the left side of the panel bar.
Reorder
Each panel can be moved and reordered by dragging the items on the drag area on the right side of the panel bar.
Show/Hide
Each panel can be displayed or hidden by clicking the panel-setting button on the right side of the application address bar.

You can also set the zoom level of your application to view specific areas of the application. Zooming is a visual aid and does not trigger application notifications.

Figure: Orientation and Zooming panel (mobile app on the left, wearable on the right)

Orientation and Zooming panel

The System Summary panel displays generic information and settings about the application, system, device, and platform.

Figure: System Summary panel (mobile app on the left, wearable on the right)

System Summary panel

The Geolocation panel contains location-related settings. You can set the local time zone to test whether your application reacts properly when the target device is located in different geographical areas.

Figure: Geolocation panel

Geolocation panel

The panel also provides an input area to configure geographical data being sent from the device. Additionally, a map is displayed and updated in accordance to the changing of data.

To simulate a custom, multi-point route:

The Application Configuration panel displays a graphical representation of the config.xml file. You can use it to ensure the validity of your application configuration.

For more information about the configuration details, see W3C/HTML5 Specifications.

Figure: Application Configuration panel

Application Configuration panel

The Sensors panel provides slide bars to configure the ambient, accelerometer, and magnetic field sensors.

To change the accelerometer value, either drag the simulator image, or enter a degree value along each axis.

The following buttons can be used to simulate the accelerometer sensor:

FaceDown simulates placing the device with the screen facing down.
Shake simulates shaking the device along the X axis.
ResetAll simulates returning the device to its default position.

Figure: Accelerometer sensor (mobile app on the left, wearable on the right)

Accelerometer sensor

To set the magnetic field, enter the X, Y, and Z axis values.

Figure: Accelerometer and gyro sensors

Accelerometer and gyro sensors

Sensor without WebGL

If the computer does not fully support WebGL, the simulated device in the Sensors panel looks like in the following figure.

Figure: Sensor without WebGL

Sensor without WebGL

The Packages and Applications panel provides a simulated packages and applications management center on a device. It lists available and installed packages and applications on a device:

On the Packages tab, the available packages list provides INSTALL and UPDATE operations. The operations generate events, such as INSTALLED and UPDATED, and call the required callback functions.
On the Applications tab, the installed packages list shows the installed packages and applications on the device. You can simulate the UNINSTALL operation, which generates an UNINSTALLED event and calls the required callback function.

You can use the Packages and Applications panel to verify created operations and operation details.

Figure: Packages and Applications panel

Packages and Applications panel

The following sample code demonstrates how to receive the INSTALLED, UPDATED, and UNINSTALLED events for changes in the installed packages list. If you select Sample Package from the available packages list and click Install, the "The package "Sample Package" is installed" message is displayed in the console, and for each application in the package, the oninstalled event is generated. You can subscribe to these application events by registering the tizen.application.addAppInfoEventListener interface.

var packageEventCallback =
@@ -167,11 +167,11 @@ tizen.application.launchAppControl(appControl, null, function()
 });

Figure: Providing application callback data

Providing application callback data

The Web Simulator does not have a home screen. Therefore, when the application.exit() method is called, you cannot navigate to another application or to the home screen. In this situation, a message is displayed stating that the application tried to exit and can be launched again.

Figure: Launch an application again

Launch an application again

Calls

The Calls tab provides controls for simulating incoming calls made to the application. The calls can be tracked by call history-related methods using the Tizen Call History API.

Figure: Calls tab

Calls tab

Click Call to display the calling screen. Click Answer to simulate a received call, and Ignore to simulate a rejected call.

Figure: Calling screen

Calling screen

Messages

The Messages tab provides controls for simulating SMS, MMS, and email message exchange between the panel and a target application. To send a message from the panel to the application:

The application receives messages using the Tizen Messaging API.

The Message Thread section shows the message history of the current session.

Figure: Messages tab

Messages tab

Push Service

The Push tab provides controls for delivering push notifications to your application. The applications table (on the Packages and Applications panel) lists registered applications for receiving push notifications and connectivity status. If an application is connected, the push service sends the push notification data directly to the application. If an application is not connected, the push service posts a UI notification on the Notification panel.

For the application to receive push messages, it has to register itself with the tizen.push.registerService() method. If the registration is successful, a red pause button is shown at the Application section under Status. During this status, notification messages pushed by the service server are posted on the Notification panel.

Figure: Registered for the push service

Registered for the push service

After the registration, the application must connect to the push service with the tizen.push.connectService() method. When the application is connected, a callback provided by the application is called whenever a notification message arrives.

Figure: Connected to the push service

Connected to the push service

To push a message from the panel to the application:

@@ -214,7 +214,7 @@ tizen.application.launchAppControl(appControl, null, function()

The application receives push notifications using the Tizen Push API.

Figure: Push tab

Push tab

The Network Management panel is used to manage network capabilities, such as Wi-Fi, cellular network (2G, 3G, and 4G), NFC, Bluetooth, and bearer selection.

Figure: Network Management panel

Network Management panel

You can also set additional parameters for the NFC and Bluetooth functionalities, such as NFC tag and target type, Bluetooth adapter information, and the simulated devices.

Figure: NFC parameters

NFC parameters

Figure: Bluetooth parameters

Bluetooth parameters

The Bearer Selection section provides network bearer selection management by listing supported network devices and their current availability status. You can request and release specific network connections from this section.

Figure: Network bearer selection

Network bearer selection

Your application can manage network devices and network status using the Tizen NFC, Bluetooth, and Network Bearer Selection APIs.

The Power Manager panel provides controls for managing the state of the battery and power resources.

Figure: Power Manager panel

Power Manager panel

Figure: Power Manager panel

Power Manager panel

The BATTERY section simulates the device battery level. Your application can retrieve the current battery status using the Tizen System Information API.

Figure: Download panel

Download panel

The Notification panel provides a notification center administrating system notifications. As the Simulator has no real desktop UI components, such as status bar or notification tray, the panel serves as the final rendering place of all the notifications. You can easily verify that the notification details you created with the Tizen Notification API are correct.

Figure: Notification panel with empty notification

Notification panel with empty notification

The following sample code demonstrates how to create a status notification. When it is posted with the post() method, the details of the notification are displayed on the panel, as shown in the figure below.

 notification = new tizen.StatusNotification("PROGRESS", "Notification Sample", 
@@ -282,7 +282,7 @@ notification = new tizen.StatusNotification("PROGRESS", "Notifica

Figure: Notification panel with a notification

Notification panel with a notification

@@ -33,7 +33,7 @@

The Tizen Web Simulator is a light-weight tool that provides many settings and features to develop Web applications. You can use the simulator features to debug your applications.

Figure: Tizen Web Simulator

Tizen Web Simulator

The Tizen Web Simulator:

Supports running and debugging modern HTML5 Web applications.

The Tizen Web Simulator is based on the Ripple-UI Framework and is licensed under Apache Software License v.2.0.

+ + + + + + + + + +

Note
The Web Simulator does not support a wearable circular UI.

+ +

The Web Simulator has several settings for developing Web applications.

The application navigation bar is used to load an application, view the browsing history, and modify the Web Simulator configuration and visibility settings.

The navigation bar has the following options:

Address bar
When the Web Simulator is launched from the Tizen IDE, the file path of your application main file is displayed in the address bar. You can edit this field for changing the file or project to run.
Reload button
Reloads the current application.
Browsing history
Click the history button to view the previously launched applications.
Configuration button
Opens the Web Simulator configuration window.
Panel visibility button
Opens the panel visibility window.
Information button
Opens the Web Simulator information window.
Address bar
When the Web Simulator is launched from the Tizen IDE, the file path of your application main file is displayed in the address bar. You can edit this field for changing the file or project to run.
+
Reload button
Reloads the current application.
+
Browsing history
Click the history button to view the previously launched applications.
+
Configuration button
Opens the Web Simulator configuration window.
+
Panel visibility button
Opens the panel visibility window.
+
Information button
Opens the Web Simulator information window.
+

You can modify the following configuration settings in the Web Simulator configuration window:

Configuration management
Save your configuration settings to the local storage and restore the settings at a later time.
Configuration management
Save your configuration settings to the local storage and restore the settings at a later time.
+
Device settings
Set the device API and device resolution to simulate the device resolution of the target device on the DEVICE tab.
diff --git a/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm b/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm index 202c81b..fe4556d 100644 --- a/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm +++ b/org.tizen.devtools/html/web_tools/web_unit_test_tool_w.htm @@ -14,17 +14,17 @@ -
+
-
+
Content

-
Generating Test Stubs
-
Editing a Test
-
Running Tests
+
Generating Test Stubs
+
Editing a Test
+
Running Tests
@@ -32,17 +32,6 @@
Web Unit Testing Tool

The Web unit testing tool provides a set of features for testing the source code. The tool uses the QUnit test framework to write and run tests.
-
- - - - - - - - -
Note
This tool is supported in mobile applications only.
-
To unit test your application:
- Generate test stubs

Figure: Generating a test stub

Generating a test stub

The test stubs are generated in the webUnitTest folder.

Figure: Test stub location

Test stub location

The Web Unit Test Result view shows the test results in a tree format. It shows the passed tests with a green icon and failed tests with a red icon. You can use the Show failed only button to only display the failed tests.

Figure: Test result

Test result

To repeat the test, select a checkbox and click the Run checked button.

Figure: Repeating a test

Repeating a test

+ + @@ -29,13 +32,12 @@ - - + diff --git a/org.tizen.gettingstarted/META-INF/MANIFEST.MF b/org.tizen.gettingstarted/META-INF/MANIFEST.MF index 2113dcd..f7c2773 100644 --- a/org.tizen.gettingstarted/META-INF/MANIFEST.MF +++ b/org.tizen.gettingstarted/META-INF/MANIFEST.MF @@ -2,6 +2,6 @@ Manifest-Version: 1.0 Bundle-ManifestVersion: 1 Bundle-Name: Getting Started with Tizen Bundle-SymbolicName: org.tizen.gettingstarted;singleton=true -Bundle-Version: 2.3.1 +Bundle-Version: 2.4.0 Bundle-Vendor: The Linux Foundation diff --git a/org.tizen.gettingstarted/about.html b/org.tizen.gettingstarted/about.html index a4c64b7..814330e 100644 --- a/org.tizen.gettingstarted/about.html +++ b/org.tizen.gettingstarted/about.html @@ -10,7 +10,7 @@

Tizen 2.3.0

Tizen 2.4.0

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.

diff --git a/org.tizen.gettingstarted/html/cover_page.htm b/org.tizen.gettingstarted/html/cover_page.htm index f6ec5d7..5448b2e 100644 --- a/org.tizen.gettingstarted/html/cover_page.htm +++ b/org.tizen.gettingstarted/html/cover_page.htm @@ -16,12 +16,12 @@ -

Before using Tizen development tools and documentation, make sure you are familiar with the license details.

Security and API Privileges

- -

- - -

Show All
Hide All

- -

- Hide -

- -

To effectively protect the mobile device system and user private data, the Tizen security architecture is based on privileges and application signing of the Linux basic security model, which includes process isolation and mandatory access control. Since Tizen, as an open mobile platform, provides a wide range of features and experiences for users with a variety of applications, the users must be able to grant privileges for security-sensitive operations.

- -

Tizen provides API-level access control for security-sensitive operations which, if not used correctly, can harm user privacy and system stability. Therefore, applications that use such sensitive APIs must declare the required privileges in the config.xml file.

- -

If an application invokes a privileged API, the Tizen system checks whether the privilege is present in the config.xml file. If the privilege is not present in the file, the system prohibits the application execution.

The Tizen IDE also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see Privilege Checker.

- -

The following tables list the API privileges, which you must to declare when using security-sensitive API modules.

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

Table: Mobile Web Device API privileges
Privilege	Level	Display name	Description
http://tizen.org/privilege/account.read	public	Reading accounts	The application can read accounts.
http://tizen.org/privilege/account.write	public	Managing accounts	The application can create, edit, and delete accounts.
http://tizen.org/privilege/alarm	public	Setting alarms	The application can set alarms and wake up the device at scheduled times.
http://tizen.org/privilege/application.info	public	Retrieving application information	The application can retrieve information related to other applications.
http://tizen.org/privilege/application.launch	public	Opening applications	The application can open other applications using the application ID or application control.
http://tizen.org/privilege/appmanager.certificate	partner	Getting application certificates	The application can retrieve specified application certificates.
http://tizen.org/privilege/appmanager.kill	partner	Closing applications	The application can close other applications.
http://tizen.org/privilege/bluetooth.admin	public	Managing Bluetooth general settings	The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name.
http://tizen.org/privilege/bluetooth.gap	public	Using Bluetooth GAP	The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices.
http://tizen.org/privilege/bluetooth.health	public	Using Bluetooth HDP	The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information.
http://tizen.org/privilege/bluetooth.spp	public	Using Bluetooth SPP	The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data.
http://tizen.org/privilege/bluetoothmanager	platform	Managing Bluetooth system settings	The application can change Bluetooth system settings related to privacy and security, such as the visibility mode.
http://tizen.org/privilege/bookmark.read	platform	Reading bookmarks	The application can read bookmarks.
http://tizen.org/privilege/bookmark.write	platform	Managing bookmarks	The application can create, edit, and delete bookmarks.
http://tizen.org/privilege/calendar.read	public	Reading calendar	The application can read events and tasks.
http://tizen.org/privilege/calendar.write	public	Managing calendar	The application can create, update, and delete events and tasks.
http://tizen.org/privilege/call	public	Making phone calls	The application can make phone calls to numbers when they are tapped without further confirmation.
http://tizen.org/privilege/callhistory.read	public	Reading call logs	The application can read call log items.
http://tizen.org/privilege/callhistory.write	public	Managing call logs	The application can create, update, and delete call log items.
http://tizen.org/privilege/contact.read	public	Reading contacts	The application can read your profile, contacts, and contact history. Contact history can include social network activity.
http://tizen.org/privilege/contact.write	public	Managing contacts	The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.
http://tizen.org/privilege/content.read	public	Reading contents	The application can read media content information.
http://tizen.org/privilege/content.write	public	Managing contents	The application can create, update, and delete media content information.
http://tizen.org/privilege/datacontrol.consumer	public	Accessing exported data	The application can read data exported by data control providers.
http://tizen.org/privilege/datasync	public	Syncing device data	The application can synchronize device data, such as contacts and calendar events, using the OMA DS 1.2 protocol.
http://tizen.org/privilege/download	public	Downloading via HTTP	The application can manage HTTP downloads.
http://tizen.org/privilege/filesystem.read	public	Reading file systems	The application can read file systems.
http://tizen.org/privilege/filesystem.write	public	Writing to file systems	The application can write to file systems.
http://tizen.org/privilege/healthinfo	public	Reading health related information	The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.
http://tizen.org/privilege/internet	public	Accessing Internet	The application can access the Internet.This can result in additional charges depending on the user's payment plan.
http://tizen.org/privilege/location	public	Using user location	The application can read the user's location information.
http://tizen.org/privilege/messaging.read	public	Accessing messages	The application can retrieve messages from message boxes or receive messages.
http://tizen.org/privilege/messaging.write	public	Writing messages	The application can write, send, sync, and remove text messages, multimedia messages, and emails.
http://tizen.org/privilege/networkbearerselection	partner	Selecting network connection	The application can request and release a specific network connection.
http://tizen.org/privilege/nfc.admin	public	Managing NFC general settings	The application can change NFC settings, such as turning NFC on or off.
http://tizen.org/privilege/nfc.cardemulation	public	Using NFC card emulation mode	The application can access smart card details, such as credit card details, and allow users to make payments via NFC.
http://tizen.org/privilege/nfc.common	public	Using NFC common features	The application can use NFC common features.
http://tizen.org/privilege/nfc.p2p	public	Pushing NFC messages	The application can push NFC messages to other devices.
http://tizen.org/privilege/nfc.tag	public	Reading/writing to NFC tags	The application can read and write NFC tag information.
http://tizen.org/privilege/notification	public	Providing notifications	The application can show and hide its own notifications and badges.
http://tizen.org/privilege/package.info	public	Receiving package information	The application can retrieve information about installed packages.
http://tizen.org/privilege/packagemanager.install	platform	Managing packages	The application can install or uninstall application packages.
http://tizen.org/privilege/power	public	Managing power	The application can control power-related settings, such as dimming the screen.
http://tizen.org/privilege/push	public	Receiving push notifications	The application can receive notifications from the Internet.
http://tizen.org/privilege/secureelement	public	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/setting	public	Accessing user settings	The application can change and read user settings.
http://tizen.org/privilege/system	public	Reading system information	The application can read system information.
http://tizen.org/privilege/systemmanager	partner	Reading secure system information	The application can read secure system information.
http://tizen.org/privilege/volume.set	public	Adjusting volume	The application can adjust the volume for different features, such as notification alerts, ringtones, and media.
http://tizen.org/privilege/websetting	public	Managing web application settings	The application can change its Web application settings, including deleting cookies.

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

Table: Mobile Web W3C/HTML5 API privileges
Privilege	Level	Description
http://tizen.org/privilege/internet	public	The application can access the Internet using the WebSocket, XMLHttpRequest Level 2, Server-Sent Events, HTML5 Application caches, and Cross-Origin Resource Sharing APIs.
http://tizen.org/privilege/mediacapture	public	The application can manipulate streams from cameras and microphones using the getUserMedia API. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. - In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.
http://tizen.org/privilege/unlimitedstorage	public	The application can use the storage with unlimited size with the File API: Directories and System, File API: Writer, Indexed Database, and Web SQL Database APIs. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used. - In the remote domain, pop-up user prompt is used.
http://tizen.org/privilege/notification	public	The application can display simple notifications using the Web Notifications API. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used. - In the remote domain, pop-up user prompt is used.
http://tizen.org/privilege/location	public	The application can access geographic locations using the Geolocation API. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. - In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.

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

Table: Mobile Web Supplementary API privileges
Privilege	Level	Description
http://tizen.org/privilege/fullscreen	public	The application can display in the full-screen mode using the FullScreen API - Mozilla API. - Privilege behavior: - If this privilege is defined, permission is granted without user interaction. Otherwise, permission is granted by user interaction.

Table: Wearable Web Device API privileges
Privilege	Level	Display name	Description
http://tizen.org/privilege/alarm	public	Setting alarms	The application can set alarms and wake up the device at scheduled times.
http://tizen.org/privilege/application.info	public	Retrieving application information	The application can retrieve information related to other applications.
http://tizen.org/privilege/application.launch	public	Opening applications	The application can open other applications using the application ID or application control.
http://tizen.org/privilege/appmanager.certificate	partner	Getting application certificates	The application can retrieve specified application certificates.
http://tizen.org/privilege/appmanager.kill	partner	Closing applications	The application can close other applications.
http://tizen.org/privilege/call	public	Making phone calls	The application can make phone calls to numbers when they are tapped without further confirmation.
http://tizen.org/privilege/content.read	public	Reading contents	The application can read media content information.
http://tizen.org/privilege/content.write	public	Managing contents	The application can create, update, and delete media content information.
http://tizen.org/privilege/download	public	Downloading via HTTP	The application can manage HTTP downloads.
http://tizen.org/privilege/filesystem.read	public	Reading file systems	The application can read file systems.
http://tizen.org/privilege/filesystem.write	public	Writing to file systems	The application can write to file systems.
http://tizen.org/privilege/healthinfo	public	Reading health related information	The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.
http://tizen.org/privilege/location	public	Using user location	The application can read the user's location information.
http://tizen.org/privilege/nfc.admin	public	Managing NFC general settings	The application can change NFC settings, such as turning NFC on or off.
http://tizen.org/privilege/nfc.cardemulation	public	Using NFC card emulation mode	The application can access smart card details, such as credit card details, and allow users to make payments via NFC.
http://tizen.org/privilege/nfc.common	public	Using NFC common features	The application can use NFC common features.
http://tizen.org/privilege/nfc.p2p	public	Pushing NFC messages	The application can push NFC messages to other devices.
http://tizen.org/privilege/nfc.tag	public	Reading/writing to NFC tags	The application can read and write NFC tag information.
http://tizen.org/privilege/notification	public	Providing notifications	The application can show and hide its own notifications and badges.
http://tizen.org/privilege/package.info	public	Receiving package information	The application can retrieve information about installed packages.
http://tizen.org/privilege/packagemanager.install	platform	Managing packages	The application can install or uninstall application packages.
http://tizen.org/privilege/power	public	Managing power	The application can control power-related settings, such as dimming the screen.
http://tizen.org/privilege/push	public	Receiving push notifications	The application can receive notifications from the Internet.
http://tizen.org/privilege/secureelement	public	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/setting	public	Accessing user settings	The application can change and read user settings.
http://tizen.org/privilege/system	public	Reading system information	The application can read system information.
http://tizen.org/privilege/systemmanager	partner	Reading secure system information	The application can read secure system information.
http://tizen.org/privilege/volume.set	public	Adjusting volume	The application can adjust the volume for different features, such as notification alerts, ringtones, and media.

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

Table: Wearable Web W3C/HTML5 API privileges
Privilege	Level	Description
http://tizen.org/privilege/internet	public	The application can access the Internet using the WebSocket, XMLHttpRequest Level 1, and Cross-Origin Resource Sharing APIs.
http://tizen.org/privilege/mediacapture	public	The application can manipulate streams from cameras and microphones using the getUserMedia API. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. - In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.
http://tizen.org/privilege/unlimitedstorage	public	The application can use the storage with unlimited size with the Indexed Database API. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used. - In the remote domain, pop-up user prompt is used.
http://tizen.org/privilege/location	public	The application can access geographic locations using the Geolocation API. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. - In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.

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

Table: Wearable Web Supplementary API privileges
Privilege	Level	Description
http://tizen.org/privilege/camera	public	The application can capture video and image on a target device using the Camera API (Tizen Extension) (Video Recording and Image Capture) API. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. - In the remote domain, execution is blocked.
http://tizen.org/privilege/audiorecorder	public	The application can record an audio stream on a target device using the Camera API (Tizen Extension) (Audio Recording) API. - Privilege behavior: - In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. - In the remote domain, execution is blocked.

- -

- Hide -

- -

If an application invokes a privileged API, the Tizen system checks whether the privilege is present in the manifest.xml file. If the privilege is not present in the file, the system prohibits the application execution.

The Tizen IDE also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see API and Privilege Checker.

- -

The following table lists the API privileges, which you must to declare when using security-sensitive API modules.

Table: API privileges
Privilege	Display name	Description
http://tizen.org/privilege/account.read	Reading accounts	The application can read accounts.
http://tizen.org/privilege/account.write	Managing accounts	The application can create, edit, and delete accounts.
http://tizen.org/privilege/alarm.get	Retrieving alarms	The application can read information about the saved alarms.
http://tizen.org/privilege/alarm.set	Setting alarms	The application can set alarms and wake the device up at scheduled times.
http://tizen.org/privilege/appmanager.launch	Launching application	The application can open other applications.
http://tizen.org/privilege/bluetooth	Using unrestricted Bluetooth services	The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.
http://tizen.org/privilege/calendar.read	Reading calendar	The application can read events and tasks.
http://tizen.org/privilege/calendar.write	Managing calendar	The application can create, update, and delete events and tasks.
http://tizen.org/privilege/call	Making phone calls	The application can make phone calls to numbers when they are tapped without further confirmation.
http://tizen.org/privilege/callhistory.read	Reading call logs	The application can read call log items.
http://tizen.org/privilege/callhistory.write	Managing call logs	The application can create, update, and delete call log items.
http://tizen.org/privilege/camera	Using camera	The application can take and preview pictures.
http://tizen.org/privilege/contact.read	Reading contacts	The application can read your profile, contacts, and contact history. Contact history can include social network activity.
http://tizen.org/privilege/contact.write	Managing contacts	The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. The contact history can include social network activity.
http://tizen.org/privilege/content.write	Managing content	This application can change media information. This information can be used by other applications.
http://tizen.org/privilege/datasharing	Sharing data between applications	The application can share data with other applications.
http://tizen.org/privilege/display	Managing display settings	The application can manage display settings, such as the brightness. This can increase battery consumption.
http://tizen.org/privilege/download	Downloading through HTTP	The application can manage HTTP downloads. This can result in additional charges depending on the user's payment plan.
http://tizen.org/privilege/email	Managing email accounts, mailboxes, and emails	The application can manage your email accounts, including your folders and emails.
http://tizen.org/privilege/externalstorage	Accessing external storage	The application can read and write files that are saved to external storage, such as SD cards.
http://tizen.org/privilege/externalstorage.appdata	Accessing application data in external storage	The application can read and write its own files in external storage, such as SD cards.
http://tizen.org/privilege/haptic	Managing vibration feedback	The application can control vibration feedback.
http://tizen.org/privilege/internet	Accessing Internet	The application can access the Internet. This can result in additional charges depending on your payment plan.
http://tizen.org/privilege/keymanager	Using secure repository	The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.
http://tizen.org/privilege/led	Managing LEDs	The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.
http://tizen.org/privilege/location	Using user location	The application can read your location information.
http://tizen.org/privilege/mediastorage	Accessing media folders	The application can read and write files in media folders.
http://tizen.org/privilege/message.read	Reading text and multimedia messages and related information	The application can read text and multimedia messages, and any information related to them.
http://tizen.org/privilege/message.write	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/network.get	Reading network information	The application can retrieve network information such as the status of each network, its type, and detailed network profile information.
http://tizen.org/privilege/network.profile	Managing network profiles	The application can add, remove, and edit network profiles.
http://tizen.org/privilege/network.set	Managing network connections	The application can turn Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks.
http://tizen.org/privilege/nfc	Using basic NFC services	The application can read and write NFC tag information, and send NFC messages to other devices.
http://tizen.org/privilege/nfc.cardemulation	Using NFC card emulation mode	The application can access smart card details, such as credit card details, and allow users to make payments via NFC.
http://tizen.org/privilege/notification	Providing notifications	The application can show and hide its own notifications and badges.
http://tizen.org/privilege/packagemanager.info	Retrieving detailed package information	The application can retrieve detailed application package information.
http://tizen.org/privilege/power	Managing power	The application can control power-related settings, such as dimming the screen.
http://tizen.org/privilege/push	Receiving push notifications	The application can receive notifications from the Internet.
http://tizen.org/privilege/recorder	Recording video and audio	The application can record video and audio.
http://tizen.org/privilege/shortcut	Managing shortcuts	The application can create and delete shortcuts.
http://tizen.org/privilege/systemsettings	Managing unrestricted system settings	The application can read and write unrestricted system settings.
http://tizen.org/privilege/telephony	Accessing telephony information	The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.
http://tizen.org/privilege/volume.set	Adjusting volume	The application can adjust the volume for different features, such as notification alerts, ringtones, and media.
http://tizen.org/privilege/wifidirect	Managing Wi-Fi Direct information	The application can enable and disable Wi-Fi Direct, manage Wi-Fi Direct connections, and change Wi-Fi Direct settings.
http://tizen.org/privilege/window.priority.set	Displaying windows on top of other applications and screen	The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This may prevent you from interacting with other applications or screens until the window for the application is closed.

- -

- -

Tizen application privileges are loosely bound to APIs, so most of the privileges can be identified by the APIs that the application calls. However, there are some privileges that are not coupled with the Tizen APIs. To allow easy identification, those privileges are mapped to corresponding system resources - same as other privileges.

- -

The following table lists the non-API bound privileges.

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

Table: Non-API bound privileges
Privilege	Display name	Description
http://tizen.org/privilege/internet	Internet	Most of the mobile devices use a cellular network for IP communication. However, the cellular network can cause data costs and an application that sends data through the internet can be crucial for user privacy. Due to the importance of the functionality, a privilege for controlling application internet access has been added. - The new privilege is coupled with IP addresses of the destination and source of the IP packets. If your socket is connecting to or listening for any IP address except 127.0.0.1, this privilege is required to communicate properly. If your application does not have this privilege, the connection is blocked in the kernel layer and returns an error in the connect() function as the permission is denied. If you are listening to a socket, you never receive any packets from the outside without errors on the socket functions. - If you are using the listen() and connect() functions between the local loopback interface (127.0.0.1), you cannot connect to a random application (due to sandboxing) no matter how you add this privilege. However, you can connect between multiple processes of the same application binary.
http://tizen.org/privilege/mediastorage	Media storage	When you connect the device to a computer (Windows or Mac) through USB, you can access a dedicated media storage area shown as massive media storage. This region of the storage is called media storage and is usually used for multimedia files, such as photos, videos, and music files. Since this storage area is used for user private data, access to it must be protected with a privilege. - If your application does not have this privilege, no file operations into the media storage area (/opt/usr/media/) succeed and you receive a permission denied error. If you have this privilege, you can read and write directories and files, create new files, and delete files in the storage area.
http://tizen.org/privilege/externalstorage	External storage	Similar to the media storage, many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage (usually /opt/storage/sdcard) must be protected with a privilege. - If your application does not have this privilege, all file operations fail with a permission denied error. If you have this privilege, you have full access to the external storage.

- -

- - - -

Tizen APIs

- -

Show All
Hide All

- -

- Hide -

- -

Using the Tizen Web API modules, you can develop rich Web applications and build great application experiences with well-known Web programming languages: HTML, CSS, and JavaScript. Just like every major browser in the market, the Tizen Web API modules support the latest HTML5 capabilities, such as animation, offline, audio, and video. By utilizing the standard HTML5 capabilities, your Web applications are ready to run across various devices and platforms with minimal customization. In addition to the JavaScript-based Tizen Device API, you can also enable advanced device access from your mobile Web applications, such as Bluetooth and NFC.

- -

The Tizen platform supports hybrid applications (1 mobile Web application and 1 or more mobile native applications). A hybrid application package is very useful to mobile Web applications that need background processing or monitoring. With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using a single hybrid package. For more information on developing hybrid Web applications with Tizen mobile devices, see Packaging Hybrid Applications.

- -

Tizen provides a wide range of Web API modules that allow you to take full advantage of various Tizen features.

The following table lists the features provided by the Mobile Web Device API Reference.

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

- Table: Device API features provided for mobile applications -
Feature	Purpose	Documentation
Tizen	This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API. - You can use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.	- - Guides: Tizen - Tutorials: Tizen - API Reference: Tizen -
Application	These APIs contain classes and interfaces that enable you to manage alarm, application, and package features. - You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.	- - Guides: Application - Tutorials: Application - API Reference: Application -
Communication	These APIs contain classes and interfaces that enable you to manage Bluetooth, messaging, NFC (Near Field Communication), push, and secure element features. - You can use transfer data over a Bluetooth connection, send and receive messages, share contacts, photos, and videos using NFC, receive push notifications from a push server, and access secure elements, such as SIM card and secure SD card, in a device.	- - Guides: Communication - Tutorials: Communication - API Reference: Communication -
Content	These APIs contain classes and interfaces that enable you to manage content and download features. - You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.	- - Guides: Content - Tutorials: Content - API Reference: Content -
Input/Output	These APIs contain classes and interfaces that enable you to manage file system and message port features. - You can access specific parts of the device file system, archive files, and send and receive messages through message ports.	- - Guides: Input/Output - Tutorials: Input/Output - API Reference: Input/Output -
Multimedia	These APIs contain classes and interfaces that enable you to manage multimedia-related features. - You can change and monitor playback volume level, and react to dedicated multimedia key presses.	- - Guides: Multimedia - Tutorials: Multimedia - API Reference: Multimedia -
Social	These APIs contain classes and interfaces that enable you to manage bookmark, calendar, call history, contact, and data synchronization features. - You can manage the Tizen Web browser bookmark list, calendar events and tasks, call history, and address books and contacts on a device, and you can synchronize device data, such as contacts and calendar events, with the OMA DS server.	- - Guides: Social - Tutorials: Social - API Reference: Social -
System	These APIs contain classes and interfaces that enable you to manage power, system information and setting, time, and Web setting features. - You can access the state of the device power resource, device system information, and device wallpaper settings, and you can use locale-specific calendar features by retrieving date and time information. You can manage time features, and set Web view properties, such as setting Web view user agents and deleting Web view cookies.	- - Guides: System - Tutorials: System - API Reference: System -
User Interface	These APIs contain classes and interfaces that enable you to manage badge and notification features. - You can manage and monitor badge numbers, and create and manage notifications about application events.	- - Guides: User Interface - Tutorials: User Interface - API Reference: User Interface -
Web UI Framework	These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features. - You can create and manage various kinds of UI widgets.	- - Guides: Web UI Framework (UIFW) - Tutorials: Web UI Framework (UIFW) - API Reference: Web UI Framework -

- -

The following table lists the features provided by the Wearable Web Device API Reference.

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

- Table: Device API features provided for wearable applications -
Feature	Purpose	Documentation
Tizen	This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API. - You can use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.	- - Guides: Tizen - Tutorials: Tizen - API Reference: Tizen -
Application	These APIs contain classes and interfaces that enable you to manage alarm, application, and package features. - You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.	- - Guides: Application - Tutorials: Application - API Reference: Application -
Content	These APIs contain classes and interfaces that enable you to manage content and download features. - You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.	- - Guides: Content - Tutorials: Content - API Reference: Content -
Input/Output	These APIs contain classes and interfaces that enable you to manage file system and message port features. - You can access specific parts of the device file system, and send and receive messages through message ports.	- - Guides: Input/Output - Tutorials: Input/Output - API Reference: Input/Output -
Multimedia	These APIs contain classes and interfaces that enable you to manage multimedia-related features. - You can change and monitor playback volume level, and react to dedicated multimedia key presses.	- - Guides: Multimedia - Tutorials: Multimedia - API Reference: Multimedia -
System	These APIs contain classes and interfaces that enable you to manage power, system information and setting, and time features. - You can access the state of the device power resource, device system information, and device wallpaper settings, and you can use locale-specific calendar features by retrieving date and time information. You can also manage time features.	- - Guides: System - Tutorials: System - API Reference: System -
User Interface	These APIs contain classes and interfaces that enable you to manage badge features. - You can manage and monitor badge numbers.	- - Guides: User Interface - Tutorials: User Interface - API Reference: User Interface -
Web UI Framework	These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features. - You can create and manage various kinds of UI widgets.	- - Guides: Web UI Framework (UIFW) - Tutorials: Web UI Framework (UIFW) - API Reference: Web UI Framework -

- -

The following table lists the features provided by the Mobile Web W3C/HTML5 and Supplementaries API Reference.

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

- Table: W3C/HTML5 and some supplementary API features provided for mobile applications -
Feature	Purpose	Documentation
DOM, Forms and Styles	These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible and multi-column layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tre, and store the information of the page that the user has viewed.	- - Guides: DOM, Forms and Styles - Tutorials: DOM, Forms and Styles - API Reference: DOM, Forms and Styles -
Device	These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, manage screen orientation, implement and control various types of touch events, and implement different vibration patterns on a Tizen device.	- - Guides: Device - Tutorials: Device - API Reference: Device -
Graphics	These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context, and create and modify SVG elements in your application.	- - Guides: Graphics - Tutorials: Graphics - API Reference: Graphics -
Media	These APIs enable you to access a local device to generate a multimedia stream, access the media capture capabilities based on their type, control multimedia playback and check supported media formats, and play audio content.	- - Guides: Media - Tutorials: Media - API Reference: Media -
Communication	These APIs enable you to send and receive data between Web sites and through a message channel, exchange push data with the server, connect to the socket server to send and receive data, and use cross-origin resource sharing (CORS) to request and send data of various content types.	- - Guides: Communication - Tutorials: Communication - API Reference: Communication -
Storage	These APIs enable you to retrieve file content and information, slice data objects, manage sandboxed file systems, activate project resource caching and manage the cached resources, create an object store and save data in it, create databases and access them using SQL statements, and use session storage and local storage.	- - Guides: Storage - Tutorials: Storage - API Reference: Storage -
Security	These APIs enable you to allow or block specific HTML elements on a Web page, and make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.	- - Guides: Security - Tutorials: Security - API Reference: Security -
UI	These APIs enable you to copy content and paste it in an editable area, create and manage draggable elements, and implement drag events.	- - Guides: UI - Tutorials: UI - API Reference: UI -
Performance and Optimization	These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.	- - Guides: Performance and Optimization - Tutorials: Performance and Optimization - API Reference: Performance and Optimization -
Location	These APIs enable you to retrieve and update position information.	- - Guides: Location - Tutorials: Location - API Reference: Location -
Supplementary	These APIs enable you to manage some supplementary features, such as displaying an element on full screen, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.	- - Guides: Supplementary Features - Tutorials: Supplementary Features - API Reference: Supplementary -

- - -

The following table lists the features provided by the Wearable Web W3C/HTML5 and Supplementaries API Reference.

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

- Table: W3C/HTML5 and some supplementary API features provided for wearable applications -
Feature	Purpose	Documentation
DOM, Forms and Styles	These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.	- - Guides: DOM, Forms and Styles - Tutorials: DOM, Forms and Styles - API Reference: DOM, Forms and Styles -
Device	These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, implement and control various types of touch events, and implement different vibration patterns on a Tizen wearable device.	- - Guides: Device - Tutorials: Device - API Reference: Device -
Graphics	These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context.	- - Guides: Graphics - Tutorials: Graphics - API Reference: Graphics -
Media	These APIs enable you to access a local device to generate a multimedia stream, control multimedia playback and check supported media formats, and play audio content.	- - Guides: Media - Tutorials: Media - API Reference: Media -
Communication	These APIs enable you to send and receive data between Web sites and through a message channel, and connect to the socket server to send and receive data.	- - Guides: Communication - Tutorials: Communication - API Reference: Communication -
Storage	These APIs enable you to retrieve file content and information, create an object store and save data in it, and use session storage and local storage.	- - Guides: Storage - Tutorials: Storage - API Reference: Storage -
Security	These APIs enable you to allow or block specific HTML elements on a Web page.	- - Guides: Security - Tutorials: Security - API Reference: Security -
Performance and Optimization	These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.	- - Guides: Performance and Optimization - Tutorials: Performance and Optimization - API Reference: Performance and Optimization -
Location	These APIs enable you to retrieve and update position information.	- - Guides: Location - Tutorials: Location - API Reference: Location -
Supplementary	These APIs enable you to manage some supplementary features, such as managing the device camera, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.	- - Guides: Supplementary Features - Tutorials: Supplementary Features - API Reference: Supplementary -

- -

- Hide -

- -

You can develop native applications using the native API modules. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging and embedded Web browsing functionality.

- -

The Tizen platform also provides a special kind of native application model, which consists of 1 UI native application and 1 or more native service applications.

- -

The following figure illustrates the native API layout. The native API specification consists of multiple API modules that represent the versatility and wide variety of features that you can implement in your native application. Each API module represents a set of logically similar submodule APIs which can be grouped into the same category. This structure was designed to make it easier for you to narrow down and find the specific methods that you require to implement a feature in your native application.

- -

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

- -

Figure: Native API layout

Native API layout

- -

The following table describes each API module and the functionality of all the submodule APIs within that module. The table also acts as a reference source for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.

Table: Mobile native API modules
API module	Description	API submodule	Functionality
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: - - Guides: Application Framework - Tutorials: Application Framework -	Application	Manages the application's main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications. -
		Service Application	Handles Tizen service application (non-UI application) state changes and system events. It is also used to start and exit the main event loop of service applications.
		Application Manager	Gets information, such as the application ID and path to the shared data directory, of the current application and other installed or running applications.
		Badge	Creates and removes badges on the application's home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.
		Bundle	A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.
		Data Control	Exchanges data between applications by allowing an application to query the public database of another application that has opted to be a data provider.
		Message Port	Sends and receives small messages between applications without interference from other applications and processes. Each message is a bundle.
		Notification	Creates, inserts, and updates notifications so that applications can relay information to users. Visuals, sounds, or vibrations can be used as notifications.
		Package Manager	Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely.
		Shortcut	Adds application shortcuts to the device home screen, which is the main landing screen of the device. -
Base	The Base API contains submodule APIs for internationalization support and contains various open source libraries. - Documentation: - - Guides: Base - Tutorials: Base -	C++ Standard Library	Standard C++ library.
		EGlibc	Standard C library.
		Glib	Provides low-level libraries and advanced data structures, such as linked lists and hash tables, for use in application development.
		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. - Documentation: - - Guides: Content - Tutorials: Content	Download	Creates and manages one or more download requests. Content is downloaded from servers through an HTTP connection.
		MIME Type	Maps MIME types to file extensions and vice versa. For example, the .jpeg file extension is mapped to the image/jpeg MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.
		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. - Documentation: - - Guides: Context - Tutorials: Context	Activity Recognition	Detects user activities, such as walking, running, and being in a moving vehicle with a device.
Context		Gesture Recognition	Detects user gestures on devices, such as tilt, snap, and double-tap.
Location	The Location API module allows the geographical position of a device to be determined for use with location-based services. - Documentation: - - Guides: Location - Tutorials: Location	Location Manager	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.
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.
		Messages	Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.
		Push	Allows receiving of push notifications from a push server.
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	Audio I/O	Manages the system audio devices by granting access to the hardware layer of the sound card. This API must be used for tasks that require raw audio data buffers in PCM format.
		Camera	Accesses the camera preview to display photo previews, focuses images, and captures images.
		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.
		Media Codec	Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.
		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.
		OpenAL	Efficiently renders multichannel 3D audio.
		Player	Provides functions for media playback and can be used to control media playback attributes.
		Radio	Supports radio usage. This submodule API can be used for tasks, such as starting and stopping the radio and scanning for radio channels.
		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.
		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.
		Tone Player	Plays and stops tones.
		Video Util	Transcodes or converts media files from one encoding to another. This API supports certain video codecs, audio codecs, and file formats.
		WAV Player	Plays and stops Waveform Audio File (WAV) format files.
Network	The Network API module contains submodule APIs, which can be used for data communication. It is responsible for managing connections, maintaining IP addresses, and connecting to the system through Bluetooth, Hypertext Transfer Protocol (HTTP), Near Field Communication (NFC), Sockets, and Wi-Fi. It also provides methods for retrieving information about a specific host from the Internet Domain Name System (DNS). - Documentation: - - Guides: Network - Tutorials: Network -	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™.
Security	The Security API module contains submodule APIs which provide basic cryptographic functions, various utility functions through the OpenSSL open source library, and a secure password-protected repository for keys, certificates, and sensitive data. - Documentation: - - Guides: Security - Tutorials: Security	Key Manager	Provides functions to store keys, certificates, and sensitive data related to users and their password-protected applications in a secure repository. It also provides cryptographic operations to prevent key value names from being revealed to clients.
		OpenSSL	An open source library that provides basic cryptographic functions and various utility functions.
		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: - - Guides: Social - Tutorials: Social	Account Manager	An account is a collection of information representing the user of a specific account provider. This API submodule creates and manages accounts, retrieves account information, and receives account change notifications.
		Calendar	Manages calendars, including events and tasks. It also stores and queries calendar information.
		Contacts	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.
		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.
		Runtime information	Obtains runtime information of a mobile device. For example, this submodule API can obtain information about the device's GPS.
		Sensor	Starts and stops sensors and receives sensor data.
		Storage	Obtains storage information, such as root directory, storage type (internal or external), storage status, and total available space size.
		System Information	Obtains information about the device, such as the platform and API version, device model, supported device features, and screen dimensions.
		System Settings	Manages system settings, such as the lock screen settings.
		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. - Documentation: - - Guides: Telephony - Tutorials: Telephony	Telephony Information	Obtains call, network, and SIM information.
UI	The UI API module contains submodule APIs and open source libraries for 2D and 3D graphics and text. - Documentation: - - Guides: Graphics and UI - Tutorials: Graphics and UI	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.
		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.
		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.
		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. - Documentation: - - Guides: UIX - Tutorials: UIX	STT	This API submodule provides functions to recognize speech.
UIX		TTS	This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.
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: - - Guides: Web - Tutorials: Web	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.

- -

- - - -

Related Info

The Tizen native application model handles application life-cycle and system events. Tizen native application life-cycle is handled by the Application API. It provides functions to manage the main event loop, the application state change events, and basic system events.

The Tizen native application model handles application life-cycle and system events. Tizen native application life-cycle is handled by the Application API (in mobile and wearable applications). It provides functions to manage the main event loop, the application state change events, and basic system events.

Tizen supports both UI applications (which have a graphical user interface) and service applications (which have no graphical user interface). The UI and service applications can be packaged together, if necessary; however, a combined application package must contain only 1 UI application, while it can have several service applications.

Applications in the same package follow the same installation life-cycle, which is handled by the application package manager. Each application in the package follows its own application life-cycle. Each application (UI application or service application) in an application package can be identified by its own ID.

The following figure shows the UI and service application life-cycle.

Figure: UI and service application life-cycle

UI and service application life-cycle

A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile devices. +

A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices. These devices have constraints, such as relatively small screen sizes and lack of system resources compared to a larger system.

For example, for power management reasons, well-designed applications reduce resource usage when they detect that their display window is covered by another application window. State change events make the detection possible.

@@ -62,7 +62,7 @@ These devices have constraints, such as relatively small screen sizes and lack o

A new application is launched based on a request from your application.
The user requests to go to Home screen.
The user requests to go to the home screen.
A system event (such as an incoming phone call) occurs and causes a resident application with a higher priority to become active and temporarily hide your application.
An alarm is triggered for another application, which becomes the top-most window and hides your application.

@@ -82,12 +82,12 @@ These devices have constraints, such as relatively small screen sizes and lack o

Since the service application has no UI, sit also has no pause state.

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

+ For more information about application state transitions, see Managing Application States and Transitions.

An application can be launched by the user from the Launcher or by another application. Either way, the Application Framework starts the application by creating a new process and calling the application entry point. Like in a conventional Linux application, the application main function is the entry point. For more information about launching native applications, see Launching Applications.

@@ -110,7 +110,7 @@ These devices have constraints, such as relatively small screen sizes and lack o

The following figure shows how to use the package and application ID.

Figure: Package ID and application ID

Package ID and application ID

@@ -138,7 +138,7 @@ uid(root, app) is applied to directories and files.

The installed packages have a user ID, a group ID, permissions, and a smack label.

Figure: Permissions

Permissions

The following table shows the details of files and directories.

@@ -252,7 +252,7 @@ uid(root, app) is applied to directories and files.

Figure: Signature

Signature

@@ -260,7 +260,7 @@ uid(root, app) is applied to directories and files.

The following figure describes how the application installer works.

Figure: Installer

Installer

The installer applies smack according to the privileges that are specified in the tizen-manifest.xml file.

An application can only access the resources that are allowed by the privileges. The privileges are used in Tizen Store to show the permissions and receive user consent.

@@ -272,16 +272,16 @@ uid(root, app) is applied to directories and files.

You can use shell commands to install, uninstall, update, and launch applications.

Figure: IDE interactions

IDE interactions

- - + +

diff --git a/org.tizen.gettingstarted/html/process/app_dev_process.htm b/org.tizen.gettingstarted/html/native/cover_page_n.htm similarity index 54% rename from org.tizen.gettingstarted/html/process/app_dev_process.htm rename to org.tizen.gettingstarted/html/native/cover_page_n.htm index e3905e1..d7e0a1c 100644 --- a/org.tizen.gettingstarted/html/process/app_dev_process.htm +++ b/org.tizen.gettingstarted/html/native/cover_page_n.htm @@ -11,18 +11,46 @@ - Application Development Process + Introduction to Native Applications - + -

+ + +

+ +

+ + +

The introduction to native applications documentation provides overall information you need to become familiar with native-specific Tizen programming and application model:

+ +

Creating Your First Tizen Application +
Demonstrates how you can create a simple HelloWorld application - thus helping you to get more familiar with the Tizen application development process and using the Tizen SDK.
Application Development Process +
Teaches you how to create a Tizen application from the initial application planning stage to the end stages where you are ready to run and package your application.
Tizen Application Model +
Provides an introduction to the Tizen application life-cycle and package contents.
Understanding Tizen Programming +
Introduces the Tizen platform, its architecture, and some useful programming concepts you need to take into account when designing Tizen applications.
+

Click the application type you want:

- +

+ +

diff --git a/org.tizen.gettingstarted/html/details/app_filtering.htm b/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm similarity index 55% rename from org.tizen.gettingstarted/html/details/app_filtering.htm rename to org.tizen.gettingstarted/html/native/details/app_filtering_n.htm index a596b35..9e77836 100644 --- a/org.tizen.gettingstarted/html/details/app_filtering.htm +++ b/org.tizen.gettingstarted/html/native/details/app_filtering_n.htm @@ -3,78 +3,60 @@ - - - - - - - + + + + + + + Application Filtering -

- - - -

Show All
Hide All

- -

- Hide -

The Tizen platform provides a wide range of features across a variety of hardware and software components. Among the features, there are some that can be selectively supported by the Tizen device manufacturer. For application stores to correctly select your application for installation on an appropriate device, the feature and profile information must be correctly declared in your application.

Some features can be selectively supported by the Tizen device manufacturer. To prevent problems when the user is trying to run your application on a device that does not support all the features your application is using, do one of the following:

When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround. -
For example, if an application wants to use location information, it can check the device capability by using the getCapability() method of the SystemInfo interface (in mobile and wearable applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.
+
For example, if an application wants to use location information, it can check the device capability by using the system_info_get_*() method of the System Information API (in mobile and wearable applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.
Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user's device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.

If the config.xml file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.

If the tizen-manifest.xml file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.

Figure: Feature-based filtering

Feature-based filtering

When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the "AND" operation. For example, if there are http://tizen.org/feature/network.nfc and http://tizen.org/feature/network.bluetooth features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.

The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the "OR" operation. For example, if the http://tizen.org/feature/screen.size.normal.480.800 and http://tizen.org/feature/screen.size.normal.720.1280 features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.

If you do not specify a proper screen size in the config.xml file, your application can be rejected from the Tizen store.

The following tables list the available screen size features.

If you do not specify a proper screen size in the tizen-manifest.xml file, your application can be rejected from the Tizen store.

The following table lists the available screen size features.

Table: Available screen size features for mobile applications
Feature key

Table: Available screen size features for wearable applications
Feature key	Description
http://tizen.org/feature/screen.size.normal	Specify this key, if the application supports all possible current and future resolutions on the normal screen size. - You cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both http://tizen.org/feature/screen.size.normal and http://tizen.org/feature/screen.size.normal.320.480 keys, only the http://tizen.org/feature/screen.size.normal.320.480 key is applied. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. -
http://tizen.org/feature/screen.size.normal.320.320	Specify this key, if the application supports the 320 x 320 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. -
http://tizen.org/feature/screen.size.normal.360.480	Specify this key, if the application supports the 360 x 480 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.all	Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size. - You cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both http://tizen.org/feature/screen.size.all and http://tizen.org/feature/screen.size.normal.320.480 keys, only the http://tizen.org/feature/screen.size.normal.320.480 key is applied. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.

The feature keys have a hierarchy. For example, consider the http://tizen.org/feature/location, http://tizen.org/feature/location.gps, and http://tizen.org/feature/location.wps features:

If the feature list includes the http://tizen.org/feature/location.gps feature, only a device which has the http://tizen.org/feature/location.gps feature can show the application on the Tizen Store application list.
If the feature list includes the http://tizen.org/feature/location feature, a device which has the http://tizen.org/feature/location.gps, http://tizen.org/feature/location.wps, or http://tizen.org/feature/location feature can show the application on the Tizen Store application list.
This means that the Tizen Store considers the http://tizen.org/feature/location feature as the http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps feature. (If the feature list includes the http://tizen.org/feature/location.gps and http://tizen.org/feature/location.wps features together, only a device which supports both those features can show the application.)

To enable filtering for your Web application, add the feature list for the application config.xml file:

To enable filtering for your native application, add the feature list for the application tizen-manifest.xml file:

To open the widget configuration editor in the IDE, double-click the config.xml file in the Project Explorer view.
In the Feature tab, click Add.
Select a feature from the list.
Click Save.
To open the manifest editor in the IDE, double-click the tizen-manifest.xml file in the Project Explorer view.
In the Features tab, click Add and set the mandatory features for the application package.
The manifest file (tizen-manifest.xml) is updated automatically.
+
Upload and publish the application package on the Tizen Store.
If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.

After setting the feature information with the widget configuration editor, you can see the added code in the Source tab.

The following example shows the setting in the config.xml file code:

-<tizen:feature name="http://tizen.org/feature/network.nfc"/>
-

The following tables show the available requirements for Tizen Web application package.

The following tables show the available requirements for an application package. If you want to check which features are necessary for using a specific API, see the related feature in the native API Reference.

+ Table: Available mobile native requirements +
Feature key	Description	Feature key	Description
http://tizen.org/feature/datasync	Specify this key, if the application requires the DataSync feature.	http://tizen.org/feature/camera	Specify this key, if the application requires any kind of a camera.
http://tizen.org/feature/fmradio	Specify this key, if the application requires an FM radio.
http://tizen.org/feature/humanactivitymonitor	Specify this key, if the application requires any of the Human Activity Monitor features.	http://tizen.org/feature/camera.back	Specify this key, if the application requires a back-facing camera.
http://tizen.org/feature/location.batch	Specify this key, if the application requires the location tracking with a position batch information feature for using the Human Activity Monitor (GPS Type) API.
http://tizen.org/feature/camera.back.flash	Specify this key, if the application requires a back-facing camera with a flash.
http://tizen.org/feature/network.bluetooth	Specify this key, if the application requires the Bluetooth feature.
http://tizen.org/feature/camera.front	Specify this key, if the application requires a front-facing camera.
http://tizen.org/feature/network.bluetooth.audio.media	Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).
http://tizen.org/feature/camera.front.flash	Specify this key, if the application requires a front-facing camera with a flash.
http://tizen.org/feature/network.bluetooth.health	Specify this key, if the application requires the Bluetooth Health feature (HDP).	http://tizen.org/feature/fmradio	Specify this key, if the application requires an FM radio.
http://tizen.org/feature/graphics.acceleration	Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.
http://tizen.org/feature/input.keyboard	Specify this key, if the application requires a built-in physical keyboard.
http://tizen.org/feature/input.keyboard.layout	Specify this key with a specific keyboard layout (string type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.
http://tizen.org/feature/led	Specify this key, if the application requires a LED.
http://tizen.org/feature/location	Specify this key, if the application requires any location positioning features.
http://tizen.org/feature/location.gps	Specify this key, if the application requires the Global Positioning System (GPS) feature.
http://tizen.org/feature/network.nfc	Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.	http://tizen.org/feature/location.wps	Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.
http://tizen.org/feature/network.nfc.card_emulation	Specify this key, if the application requires the NFC card emulation feature.	http://tizen.org/feature/microphone	Specify this key, if the application requires a microphone.
http://tizen.org/feature/network.push	Specify this key, if the application requires the network-based push service.
http://tizen.org/feature/multimedia.transcoder	Specify this key, if the application requires the multimedia transcoder feature.
http://tizen.org/feature/network.secure_element	Specify this key, if the application requires the secure element feature.
http://tizen.org/feature/multi_point_touch.pinch_zoom	Specify this key, if the application requires a pinch-zoom gesture feature.
http://tizen.org/feature/multi_point_touch.point_count	Specify this key with a specific number (int type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.
http://tizen.org/feature/network.telephony	Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.	http://tizen.org/feature/network.bluetooth	Specify this key, if the application requires the Bluetooth feature.
http://tizen.org/feature/network.telephony.mms	Specify this key, if the application requires the MMS feature.	http://tizen.org/feature/network.bluetooth.audio.call	Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).
http://tizen.org/feature/network.wifi	Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.	http://tizen.org/feature/network.bluetooth.audio.media	Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).
http://tizen.org/feature/network.bluetooth.health	Specify this key, if the application requires the Bluetooth Health feature (HDP).
http://tizen.org/feature/sensor.barometer	Specify this key, if the application requires a barometer sensor for using the Sensor (Pressure Type) API.	http://tizen.org/feature/network.bluetooth.hid	Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).
http://tizen.org/feature/sensor.heart_rate_monitor	Specify this key, if the application requires a heart rate monitor sensor for using the Human Activity Monitor (HRM Type) API.	http://tizen.org/feature/network.bluetooth.le	Specify this key, if the application requires the Bluetooth LE feature.
http://tizen.org/feature/network.bluetooth.opp	Specify this key, if the application requires the Bluetooth Object Push feature (OPP).
http://tizen.org/feature/sensor.magnetometer	Specify this key, if the application requires a magnetic sensor for using the Sensor (MAGNETIC Type) API.	http://tizen.org/feature/network.nfc	Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.
http://tizen.org/feature/sensor.pedometer	Specify this key, if the application requires a pedometer sensor for using the Human Activity Monitor (PEDOMETER Type) API.	http://tizen.org/feature/network.nfc.card_emulation	Specify this key, if the application requires the NFC card emulation feature.
http://tizen.org/feature/sensor.proximity	Specify this key, if the application requires a proximity sensor for using the Sensor (PROXIMITY Type) API.	http://tizen.org/feature/network.nfc.card_emulation.hce	Specify this key, if the application requires the NFC host-based card emulation feature.
http://tizen.org/feature/network.nfc.reserved_push	Specify this key, if the application requires the NFC reserved push feature.
http://tizen.org/feature/sensor.ultraviolet	Specify this key, if the application requires a ultraviolet sensor for using the Sensor (ULTRAVIOLET Type) API.	http://tizen.org/feature/network.push	Specify this key, if the application requires the network-based push service.
http://tizen.org/feature/sensor.wrist_up	Specify this key, if the application requires a wrist up sensor for using the Human Activity Monitor (WRIST_UP Type) API.	http://tizen.org/feature/network.secure_element	Specify this key, if the application requires the secure element feature.

Table: Available requirements for mobile Web W3C/HTML5 APIs
Feature key	Description	http://tizen.org/feature/network.secure_element.ese	Specify this key, if the application requires the ESE secure element feature.
http://tizen.org/feature/camera	Specify this key, if the application requires any kind of a camera for using the getUserMedia or HTML Media Capture API.	http://tizen.org/feature/network.secure_element.uicc	Specify this key, if the application requires the UICC secure element feature.
http://tizen.org/feature/location.gps	Specify this key, if the application requires the Global Positioning System (GPS) feature for using the GeoLocation API.	http://tizen.org/feature/network.telephony	Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.
http://tizen.org/feature/microphone	Specify this key, if the application requires a microphone for using the getUserMedia or HTML Media Capture API.	http://tizen.org/feature/network.telephony.mms	Specify this key, if the application requires the MMS feature.
http://tizen.org/feature/network.internet	Specify this key, if the application requires Internet access for using the HTML5 Application caches, WebSocket API, XMLHttpRequest Level 2, Server-Sent Events, or Cross-Origin Resource Sharing API.
http://tizen.org/feature/sensor.accelerometer	Specify this key, if the application requires an acceleration sensor for using the DeviceOrientation Event Specification API.	http://tizen.org/feature/network.tethering	Specify this key, if the application requires any kind of tethering feature.
http://tizen.org/feature/network.tethering.bluetooth	Specify this key, if the application requires the tethering over Bluetooth feature.
http://tizen.org/feature/network.tethering.usb	Specify this key, if the application requires the tethering over USB connection feature.
http://tizen.org/feature/network.tethering.wifi	Specify this key, if the application requires the tethering over Wi-Fi feature.
http://tizen.org/feature/network.wifi	Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.
http://tizen.org/feature/sensor.gyroscope	Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.	http://tizen.org/feature/network.wifi.direct	Specify this key, if the application requires the Wi-Fi Direct™ feature.
http://tizen.org/feature/sensor.magnetometer	Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification or Screen Orientation API.	http://tizen.org/feature/network.wifi.direct.display	Specify this key, if the application requires the Wi-Fi Direct™ display feature.
http://tizen.org/feature/speech.synthesis	Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the Web Speech API.	http://tizen.org/feature/network.wifi.direct.service_discovery	Specify this key, if the application requires the Wi-Fi Direct™ service discovery feature.

Table: Available requirements for wearable Web W3C/HTML5 APIs
Feature key	Description	http://tizen.org/feature/screen.size.all	Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
http://tizen.org/feature/screen.size.normal	Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
http://tizen.org/feature/screen.size.normal.240.400	Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
http://tizen.org/feature/screen.size.normal.320.320	Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
http://tizen.org/feature/camera	Specify this key, if the application requires any kind of a camera for using the getUserMedia API.	http://tizen.org/feature/screen.size.normal.320.480	Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
http://tizen.org/feature/location.gps	Specify this key, if the application requires the Global Positioning System (GPS) feature for using the GeoLocation API.	http://tizen.org/feature/screen.size.normal.360.480	Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
http://tizen.org/feature/microphone	Specify this key, if the application requires a microphone for using the getUserMedia API.	http://tizen.org/feature/screen.size.normal.480.800	Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
http://tizen.org/feature/network.internet	Specify this key, if the application requires Internet access for using the WebSocket API, XMLHttpRequest Level 1, or Cross-Origin Resource Sharing API.	http://tizen.org/feature/screen.size.normal.540.960	Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
http://tizen.org/feature/screen.size.normal.600.1024	Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
http://tizen.org/feature/screen.size.normal.720.1280	Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
http://tizen.org/feature/screen.size.normal.1080.1920	Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
http://tizen.org/feature/sensor.accelerometer	Specify this key, if the application requires an acceleration sensor.
http://tizen.org/feature/sensor.accelerometer.wakeup	Specify this key, if the application requires the acceleration sensor wake-up feature.
http://tizen.org/feature/sensor.activity_recognition	Specify this key, if the application requires an activity recognition sensor.
http://tizen.org/feature/sensor.accelerometer	Specify this key, if the application requires an acceleration sensor for using the DeviceOrientation Event Specification API.
http://tizen.org/feature/sensor.barometer	Specify this key, if the application requires a barometer sensor.
http://tizen.org/feature/sensor.barometer.wakeup	Specify this key, if the application requires the barometer sensor wake-up feature.
http://tizen.org/feature/sensor.gesture_recognition	Specify this key, if the application requires a gesture recognition sensor.
http://tizen.org/feature/sensor.gravity	Specify this key, if the application requires a gravity sensor.
http://tizen.org/feature/sensor.gyroscope	Specify this key, if the application requires a gyro sensor.
http://tizen.org/feature/sensor.gyroscope	Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.	http://tizen.org/feature/sensor.gyroscope.wakeup	Specify this key, if the application requires the gyro sensor wake-up feature.
http://tizen.org/feature/sensor.magnetometer	Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification API.	http://tizen.org/feature/sensor.heart_rate_monitor	Specify this key, if the application requires a heart rate monitor sensor.
http://tizen.org/feature/sensor.humidity	Specify this key, if the application requires a humidity sensor.
http://tizen.org/feature/sensor.linear_acceleration	Specify this key, if the application requires a linear acceleration sensor.
http://tizen.org/feature/sensor.magnetometer	Specify this key, if the application requires a magnetic sensor.
http://tizen.org/feature/speech.synthesis	Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the Web Speech API.	http://tizen.org/feature/sensor.magnetometer.wakeup	Specify this key, if the application requires the magnetic sensor wake-up feature.

Table: Available requirements for wearable Web Supplementary APIs
Feature key	Description	http://tizen.org/feature/sensor.pedometer	Specify this key, if the application requires a pedometer sensor.
http://tizen.org/feature/sensor.photometer	Specify this key, if the application requires a photometer sensor.
http://tizen.org/feature/media.audio_recording	Specify this key, if the application requires the audio recording functionality of the device for using the Camera API (Tizen Extension) (Audio Recording) API.
http://tizen.org/feature/sensor.photometer.wakeup	Specify this key, if the application requires the photometer sensor wake-up feature.
http://tizen.org/feature/media.image_capture	Specify this key, if the application requires the image capture functionality of the device for using the Camera API (Tizen Extension) (Image Recording) API.
http://tizen.org/feature/sensor.proximity	Specify this key, if the application requires a proximity sensor.
http://tizen.org/feature/media.video_recording	Specify this key, if the application requires the video recording functionality of the device for using the Camera API (Tizen Extension) (Video Recording) API.

A Tizen profile describes the requirements for a category of Tizen devices that have a common application execution environment. Applications are created for a single specific target profile, such as mobile, wearable, or TV, and can run on devices compliant to that profile.

Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the profile name element in the config.xml file.

The following table lists the Tizen profiles and related profile name attributes.

Table: Tizen profiles and profile name attributes
http://tizen.org/feature/sensor.proximity.wakeup	Specify this key, if the application requires the proximity sensor wake-up feature.
http://tizen.org/feature/sensor.rotation_vector	Specify this key, if the application requires a rotation vector sensor.
http://tizen.org/feature/sensor.temperature	Specify this key, if the application requires a temperature sensor.
http://tizen.org/feature/sensor.tiltmeter	Specify this key, if the application requires a tilt sensor.
http://tizen.org/feature/sensor.tiltmeter.wakeup	Specify this key, if the application requires the tilt sensor wake-up feature.
http://tizen.org/feature/sensor.ultraviolet	Specify this key, if the application requires a ultraviolet sensor.
http://tizen.org/feature/sensor.wrist_up	Specify this key, if the application requires a wrist up sensor.
http://tizen.org/feature/sip.voip	Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.
http://tizen.org/feature/speech.recognition	Specify this key, if the application requires the speech recognition (STT) feature.
http://tizen.org/feature/speech.synthesis	Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.
http://tizen.org/feature/usb.accessory	Specify this key, if the application requires the USB client (or accessory) feature.
Tizen profile	Profile name attribute	http://tizen.org/feature/usb.host	Specify this key, if the application requires the USB host feature.
Mobile	mobile	http://tizen.org/feature/vision.face_recognition	Specify this key, if the application requires the face recognition feature.
Wearable	wearable	http://tizen.org/feature/vision.image_recognition	Specify this key, if the application requires the image recognition feature.
TV	TV	http://tizen.org/feature/vision.qrcode_generation	Specify this key, if the application requires the QR code generation feature.

In a Web application, the profile name element can be added to the config.xml file as follows:

-<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" ... >
-<tizen:profile name="mobile"/>
-<!--OR-->
-<tizen:profile name="wearable"/>
-

The Tizen Store compares the device profile and the profile name element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.

Applications are created for a single specific target profile and can only run on devices compliant to that profile. However, it is easily possible to develop a Web application on one profile and make it work on another profile if you use Web APIs that are common to both the profiles. You just modify the <tizen:profile> tag to switch profiles. You may also have to make other changes, like adapting your application to different screen sizes and input events. It is recommended that you test this modified application to ensure it performs as desired.

- Hide -

- -

When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround. -
For example, if an application wants to use location information, it can check the device capability by using the system_info_get_*() method of the System Information API. If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.
-
Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user's device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place. -
Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.

- -

Figure: Feature-based filtering

Feature-based filtering

- -

If you do not specify a proper screen size in the tizen-manifest.xml file, your application can be rejected from the Tizen store.

The following table lists the available screen size features.

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

Table: Available screen size features
Feature key	Description
http://tizen.org/feature/screen.size.normal	Specify this key, if the application supports all possible current and future resolutions on the normal screen size. - You cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both http://tizen.org/feature/screen.size.normal and http://tizen.org/feature/screen.size.normal.320.480 keys, only the http://tizen.org/feature/screen.size.normal.320.480 key is applied. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. -
http://tizen.org/feature/screen.size.normal.240.400	Specify this key, if the application supports the 240 x 400 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. -
http://tizen.org/feature/screen.size.normal.320.320	Specify this key, if the application supports the 320 x 320 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. -
http://tizen.org/feature/screen.size.normal.320.480	Specify this key, if the application supports the 320 x 480 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.360.480	Specify this key, if the application supports the 360 x 480 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.480.800	Specify this key, if the application supports the 480 x 800 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.540.960	Specify this key, if the application supports the 540 x 960 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.600.1024	Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.720.1280	Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.1080.1920	Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size. - You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.all	Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size. - You cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both http://tizen.org/feature/screen.size.all and http://tizen.org/feature/screen.size.normal.320.480 keys, only the http://tizen.org/feature/screen.size.normal.320.480 key is applied. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.

- - -

- -

The feature keys have a hierarchy. For example, consider the http://tizen.org/feature/location, http://tizen.org/feature/location.gps, and http://tizen.org/feature/location.wps features:

If the feature list includes the http://tizen.org/feature/location.gps feature, only a device which has the http://tizen.org/feature/location.gps feature can show the application on the Tizen Store application list.
If the feature list includes the http://tizen.org/feature/location feature, a device which has the http://tizen.org/feature/location.gps, http://tizen.org/feature/location.wps, or http://tizen.org/feature/location feature can show the application on the Tizen Store application list. -
This means that the Tizen Store considers the http://tizen.org/feature/location feature as the http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps feature. (If the feature list includes the http://tizen.org/feature/location.gps and http://tizen.org/feature/location.wps features together, only a device which supports both those features can show the application.)

+ +http://tizen.org/feature/vision.qrcode_recognition + Specify this key, if the application requires the QR code recognition feature. + + + -

- -

To enable filtering for your mobile native application, add the feature list for the application tizen-manifest.xml file:

To open the manifest editor in the IDE, double-click the tizen-manifest.xml file in the Project Explorer view.
In the Features tab, click Add and set the mandatory features for the application package.
The manifest file (tizen-manifest.xml) is updated automatically.
-
Upload and publish the application package on the Tizen Store.
If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.

The following table shows the available requirements for an application package. If you want to check which features are necessary for using a specific API, see the related feature in the native API Reference.

- +

@@ -686,6 +613,10 @@ + + + + @@ -710,42 +641,46 @@ - - - - + + + + - - - - - - - - + + + + + + + + + + + + @@ -754,6 +689,10 @@ + + + + @@ -766,14 +705,14 @@ - - - - + + + + @@ -877,6 +816,18 @@ + + + + + + + + + + + + @@ -918,10 +869,6 @@ - - - - @@ -930,6 +877,10 @@ + + + + @@ -938,6 +889,14 @@ + + + + + + + + @@ -946,6 +905,18 @@ + + + + + + + + + + + + @@ -954,6 +925,10 @@ + + + + @@ -970,6 +945,14 @@ + + + + + + + + @@ -986,46 +969,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -1064,8 +1007,7 @@

- Table: Available requirements + Table: Available wearable native requirements
Specify this key with a specific keyboard layout (string type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.
http://tizen.org/feature/input.rotating_bezel	Specify this key, if the application requires rotating bezel input.
http://tizen.org/feature/led	Specify this key, if the application requires a LED.
Specify this key, if the application requires the multimedia transcoder feature.
http://tizen.org/feature/multi_point_touch.point_count	Specify this key with a specific number (int type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.
http://tizen.org/feature/multi_point_touch.pinch_zoom	Specify this key, if the application requires a pinch-zoom gesture feature.
http://tizen.org/feature/multi_point_touch.point_count	Specify this key with a specific number (int type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.
http://tizen.org/feature/network.bluetooth	Specify this key, if the application requires the Bluetooth feature.
http://tizen.org/feature/network.bluetooth.le	Specify this key, if the application requires the Bluetooth LE feature.
http://tizen.org/feature/network.bluetooth.health	Specify this key, if the application requires the Bluetooth Health feature (HDP).
http://tizen.org/feature/network.bluetooth.audio.call	Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).
http://tizen.org/feature/network.bluetooth.audio.media	Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).
http://tizen.org/feature/network.bluetooth.health	Specify this key, if the application requires the Bluetooth Health feature (HDP).
http://tizen.org/feature/network.bluetooth.hid	Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).
http://tizen.org/feature/network.bluetooth.le	Specify this key, if the application requires the Bluetooth LE feature.
http://tizen.org/feature/network.bluetooth.opp	Specify this key, if the application requires the Bluetooth Object Push feature (OPP).
http://tizen.org/feature/network.internet	Specify this key, if the application requires Internet access.
http://tizen.org/feature/network.nfc	Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.
Specify this key, if the application requires the NFC card emulation feature.
http://tizen.org/feature/network.nfc.card_emulation.hce	Specify this key, if the application requires the NFC host-based card emulation feature.
http://tizen.org/feature/network.nfc.reserved_push	Specify this key, if the application requires the NFC reserved push feature.
Specify this key, if the application requires the secure element feature.
http://tizen.org/feature/network.secure_element.uicc	Specify this key, if the application requires the UICC secure element feature.
http://tizen.org/feature/network.secure_element.ese	Specify this key, if the application requires the ESE secure element feature.
http://tizen.org/feature/network.secure_element.uicc	Specify this key, if the application requires the UICC secure element feature.
http://tizen.org/feature/network.telephony	Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.
http://tizen.org/feature/screen.auto_rotation	Specify this key, if the application requires the automatic screen rotation feature.
http://tizen.org/feature/screen.shape.circle	Specify this key, if the application requires a circle-shaped screen.
http://tizen.org/feature/screen.shape.rectangle	Specify this key, if the application requires a rectangle-shaped screen.
http://tizen.org/feature/screen.size.all	Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
http://tizen.org/feature/screen.size.normal	Specify this key, if the application supports all possible current and future resolutions on the normal screen size.	Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
http://tizen.org/feature/screen.size.all	Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
http://tizen.org/feature/sensor.accelerometer	Specify this key, if the application requires an acceleration sensor.
Specify this key, if the application requires the acceleration sensor wake-up feature.
http://tizen.org/feature/sensor.activity_recognition	Specify this key, if the application requires an activity recognition sensor.
http://tizen.org/feature/sensor.barometer	Specify this key, if the application requires a barometer sensor.
Specify this key, if the application requires the barometer sensor wake-up feature.
http://tizen.org/feature/sensor.gesture_recognition	Specify this key, if the application requires a gesture recognition sensor.
http://tizen.org/feature/sensor.gravity	Specify this key, if the application requires a gravity sensor.
http://tizen.org/feature/sensor.gyroscope	Specify this key, if the application requires a gyro sensor.
Specify this key, if the application requires the gyro sensor wake-up feature.
http://tizen.org/feature/sensor.heart_rate_monitor	Specify this key, if the application requires a heart rate monitor sensor.
http://tizen.org/feature/sensor.humidity	Specify this key, if the application requires a humidity sensor.
http://tizen.org/feature/sensor.linear_acceleration	Specify this key, if the application requires a linear acceleration sensor.
http://tizen.org/feature/sensor.magnetometer	Specify this key, if the application requires a magnetic sensor.
Specify this key, if the application requires the magnetic sensor wake-up feature.
http://tizen.org/feature/sensor.pedometer	Specify this key, if the application requires a pedometer sensor.
http://tizen.org/feature/sensor.photometer	Specify this key, if the application requires a photometer sensor.
Specify this key, if the application requires the proximity sensor wake-up feature.
http://tizen.org/feature/sensor.rotation_vector	Specify this key, if the application requires a rotation vector sensor.
http://tizen.org/feature/sensor.temperature	Specify this key, if the application requires a temperature sensor.
http://tizen.org/feature/sensor.tiltmeter	Specify this key, if the application requires a tilt sensor.
Specify this key, if the application requires a wrist up sensor.
http://tizen.org/feature/sensor.pedometer	Specify this key, if the application requires a pedometer sensor.
http://tizen.org/feature/sensor.heart_rate_monitor	Specify this key, if the application requires a heart rate monitor sensor.
http://tizen.org/feature/sensor.temperature	Specify this key, if the application requires a temperature sensor.
http://tizen.org/feature/sensor.humidity	Specify this key, if the application requires a humidity sensor.
http://tizen.org/feature/sensor.linear_acceleration	Specify this key, if the application requires a linear acceleration sensor.
http://tizen.org/feature/sensor.rotation_vector	Specify this key, if the application requires a rotation vector sensor.
http://tizen.org/feature/sensor.gesture_recognition	Specify this key, if the application requires a gesture recognition sensor.
http://tizen.org/feature/sensor.activity_recognition	Specify this key, if the application requires an activity recognition sensor.
http://tizen.org/feature/sensor.gravitiy	Specify this key, if the application requires a gravity sensor.
http://tizen.org/feature/shell.appwidget	Specify this key, if the application requires the AppWidget (Dynamic Box) feature.
http://tizen.org/feature/sip.voip	Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.

- -

@@ -1092,25 +1034,19 @@ -

In a native application, the mobile profile name element can be added to the tizen-manifest.xml file as follows:

In a native application, the profile name element can be added to the tizen-manifest.xml file as follows:

-<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.0" ... >
+<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1" ... >
 <profile name="mobile"/>

- - - + +

diff --git a/org.tizen.gettingstarted/html/details/details.htm b/org.tizen.gettingstarted/html/native/details/details_n.htm similarity index 72% rename from org.tizen.gettingstarted/html/details/details.htm rename to org.tizen.gettingstarted/html/native/details/details_n.htm index c0b9ad0..b6853f8 100644 --- a/org.tizen.gettingstarted/html/details/details.htm +++ b/org.tizen.gettingstarted/html/native/details/details_n.htm @@ -3,22 +3,22 @@ - - - - - - - + + + + + + + Understanding Tizen Programming -

+ @@ -37,29 +37,21 @@

When designing Tizen Web applications, you need to take into account the following programming concepts:

Tizen native applications can utilize a greater range of device features and can provide better performance than other applications. This is because native applications use a wide range of device APIs and are particularly lightweight. However, creating native applications can initially be complex if you are not familiar with the native API layout, application architecture, and life-cycle. In addition, you must become familiar with the Enlightenment Foundation Libraries (EFL) that are required to make scalable and fast graphics.

When designing Tizen native applications, you need to take into account the following programming concepts:

Tizen APIs
Security and API Privileges
Application Filtering
Key Event Handling
File System Directory Hierarchy
Error Handling
Tizen APIs
Security and API Privileges
Application Filtering
Event Handling (in mobile applications only)
File System Directory Hierarchy
Error Handling

Tizen is a user-interactive and service-oriented open-source project that allows you to create feature-rich applications for multiple device categories, such as smartphones, tablets and wearable devices (for example, smartwatches), using various APIs. The Tizen platform allows you to create a wide range of applications for Tizen devices, customized with the common Tizen architecture as its basis. Tizen also provides Web sites with tools for creating, distributing, and managing mobile applications efficiently.

The Tizen platform supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you are creating a Web or native application.

@@ -71,8 +63,8 @@

Tizen is a standards-based platform that provides Web and native APIs for developing applications for multiple device categories. Tizen is currently targeted for smart phones, tablet devices (mobile profile), and wearable devices (wearable profile), though planned to cover more device categories in the future. The following figure illustrates the Tizen architecture.

Figure: Tizen architecture

Tizen architecture

The Tizen architecture consists of the following subsystems:

@@ -89,7 +81,7 @@ src="../images/what_is_tizen_architecture.png" />

Note - Only a selected set of APIs in the native framework are native APIs. This means that native applications must use the listed native APIs in the API Reference which are managed by API maintainers in the Tizen project. + Only a selected set of APIs in the native framework are native APIs. This means that native applications must use the listed native APIs in the API Reference which are managed by API maintainers in the Tizen project. @@ -100,11 +92,11 @@ src="../images/what_is_tizen_architecture.png" />

- - + +

diff --git a/org.tizen.gettingstarted/html/details/error_handling.htm b/org.tizen.gettingstarted/html/native/details/error_handling_n.htm similarity index 78% rename from org.tizen.gettingstarted/html/details/error_handling.htm rename to org.tizen.gettingstarted/html/native/details/error_handling_n.htm index 496fefe..96144b6 100644 --- a/org.tizen.gettingstarted/html/details/error_handling.htm +++ b/org.tizen.gettingstarted/html/native/details/error_handling_n.htm @@ -3,23 +3,23 @@ - - - - - - - + + + + + + + Error Handling -

@@ -27,7 +27,7 @@

How to query error codes for a certain API function is determined by how the function returns error codes. In this sense, there are two kinds of native APIs in Tizen:

APIs directly returning error codes

All API functions which return error codes have the following section in their description:

@@ -71,7 +71,7 @@ char* errMsg;
 location_manager_h location_handle;
 int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);
 
-if(LOCATIONS_ERROR_NONE != result)
+if (LOCATIONS_ERROR_NONE != result)
 {
    errMsg = get_error_message(ret);
    dlog_print(DLOG_INFO, "MyTag", "%s", errMsg);
@@ -84,11 +84,11 @@ if(LOCATIONS_ERROR_NONE != result)
 Every error code in the Tizen native API is represented as an integer value.   
    
 
-
-
+
+

diff --git a/org.tizen.gettingstarted/html/details/key_events.htm b/org.tizen.gettingstarted/html/native/details/event_handling_n.htm similarity index 58% rename from org.tizen.gettingstarted/html/details/key_events.htm rename to org.tizen.gettingstarted/html/native/details/event_handling_n.htm index b242ade..b6be886 100644 --- a/org.tizen.gettingstarted/html/details/key_events.htm +++ b/org.tizen.gettingstarted/html/native/details/event_handling_n.htm @@ -3,45 +3,56 @@ - - - - - - - - - Key Event Handling + + + + + + + + + Event Handling -

The Tizen platform supports hardware keys for user interactions. All Tizen devices provide the Menu and Back hardware keys. You can use the Efl Extension Event API to handle key events.

To provide a full user experience for your application users, you must handle hardware key presses in your application. Follow the hardware key guidelines to ensure predictable and reliable navigation in your application:

The Tizen platform supports event handling for user interactions. To provide a full user experience for your application users, you must handle various events in your application.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

+ +

All Tizen mobile native devices provide the Menu and Back hardware keys, and you can use the Efl Extension Event API to handle the key events. Follow the hardware key guidelines below to ensure predictable and reliable navigation in your application.

All Tizen devices provide a Menu key, which is used to present users a context-dependent set of options. Pressing the Menu key shows a hierarchical option menu. The following figure illustrates the Menu key position and the option menu.

Figure: Menu key

Menu key

@@ -61,7 +72,7 @@ Note - More details on using EFL-Extension for Menu key and Back key events, see the Efl Extension guide. + More details on using EFL-Extension for Menu key and Back key events, see the Efl Extension guide. @@ -69,13 +80,13 @@

Tizen also supports handling Media Key events such as play,stop,pause events from media devices (such as Bluetooth remote controller and earjack).

To handle the Media Key events, use the Media key API.

- - + +

diff --git a/org.tizen.gettingstarted/html/details/io_overview.htm b/org.tizen.gettingstarted/html/native/details/io_overview_n.htm similarity index 87% rename from org.tizen.gettingstarted/html/details/io_overview.htm rename to org.tizen.gettingstarted/html/native/details/io_overview_n.htm index 6439b2d..9e4a2ab 100644 --- a/org.tizen.gettingstarted/html/details/io_overview.htm +++ b/org.tizen.gettingstarted/html/native/details/io_overview_n.htm @@ -3,25 +3,25 @@ - - - - - - - + + + + + + + File System Directory Hierarchy -

@@ -43,7 +43,7 @@

The following table shows the application directory hierarchy:

- + @@ -106,7 +106,7 @@

Every application can access a storage area where media files are stored. This is the media directory. In native applications, to obtain the media directory path, call the storage_get_directory() of Storage module. The following table lists the sub-directories of the media directory.

Table: Application Package Directory Hierarchy
Name

- + @@ -159,7 +159,7 @@

Every application can also access the external storage, such as MMC. This is the external storage directory. In native applications, to obtain the external storage directory path, call the storage_get_directory() method of the Storage module. The following table lists the sub-directories of the external storage directory.

Table: Media Directory Hierarchy
Name

- + @@ -205,11 +205,11 @@

Table: Media Directory Hierarchy
Name

- - + +

diff --git a/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm b/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm new file mode 100644 index 0000000..0797919 --- /dev/null +++ b/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm @@ -0,0 +1,711 @@ + + + + + + + + + + + + + + Security and API Privileges + + + + + + + +

+ +

+ +

To effectively protect the device system and user private data, the Tizen security architecture is based on privileges and application signing of the Linux basic security model, which includes process isolation and mandatory access control. Since Tizen, as an open mobile platform, provides a wide range of features and experiences for users with a variety of applications, the users must be able to grant privileges for security-sensitive operations.

+ +

The Tizen IDE also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see API and Privilege Checker.

+ +

The following tables list the API privileges, which you must to declare when using security-sensitive API modules.

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

Table: Mobile native API privileges
Privilege	Display name	Description
http://tizen.org/privilege/account.read	Reading accounts	The application can read accounts.
http://tizen.org/privilege/account.write	Managing accounts	The application can create, edit, and delete accounts.
http://tizen.org/privilege/alarm.get	Retrieving alarms	The application can read information about the saved alarms.
http://tizen.org/privilege/alarm.set	Setting alarms	The application can set alarms and wake the device up at scheduled times.
http://tizen.org/privilege/appmanager.kill	Closing applications	The application can close other applications..
http://tizen.org/privilege/appmanager.launch	Launching application	The application can open other applications.
http://tizen.org/privilege/bluetooth	Using unrestricted Bluetooth services	The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.
http://tizen.org/privilege/bluetooth.admin	Changing Bluetooth settings	The application can change Bluetooth settings, such as turning Bluetooth on or off, set the device name, and enable or disable the AV remote control.
http://tizen.org/privilege/bookmark.admin	Accessing Internet bookmarks	The application can retrieve, create, edit, and delete Internet bookmarks.
http://tizen.org/privilege/calendar.read	Reading calendar	The application can read events and tasks.
http://tizen.org/privilege/calendar.write	Managing calendar	The application can create, update, and delete events and tasks.
http://tizen.org/privilege/call	Making phone calls	The application can make phone calls to numbers when they are tapped without further confirmation.
http://tizen.org/privilege/callhistory.read	Reading call logs	The application can read call log items.
http://tizen.org/privilege/callhistory.write	Managing call logs	The application can create, update, and delete call log items.
http://tizen.org/privilege/camera	Using camera	The application can take and preview pictures.
http://tizen.org/privilege/contact.read	Reading contacts	The application can read your profile, contacts, and contact history. Contact history can include social network activity.
http://tizen.org/privilege/contact.write	Managing contacts	The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. The contact history can include social network activity.
http://tizen.org/privilege/content.write	Managing content	The application can change media information. This information can be used by other applications.
http://tizen.org/privilege/datasharing	Sharing data between applications	The application can share data with other applications.
http://tizen.org/privilege/display	Managing display settings	The application can manage display settings, such as the brightness. This can increase battery consumption.
http://tizen.org/privilege/download	Downloading through HTTP	The application can manage HTTP downloads. This can result in additional charges depending on the user's payment plan.
http://tizen.org/privilege/email	Managing email accounts, mailboxes, and emails	The application can manage your email accounts, including your folders and emails.
http://tizen.org/privilege/email.admin	Managing email configurations	The application can manage the email application settings.
http://tizen.org/privilege/externalstorage	Accessing external storage	The application can read and write files that are saved to external storage, such as SD cards.
http://tizen.org/privilege/externalstorage.appdata	Accessing application data in external storage	The application can read and write its own files in external storage, such as SD cards.
http://tizen.org/privilege/haptic	Managing vibration feedback	The application can control vibration feedback.
http://tizen.org/privilege/healthinfo	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/internet	Accessing Internet	The application can access the Internet. This can result in additional charges depending on your payment plan.
http://tizen.org/privilege/keymanager	Using secure repository	The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.
http://tizen.org/privilege/keymanager.admin	Locking/unlocking secure repository	The application can lock and unlock a password-protected storage, and manage password changes for it.
http://tizen.org/privilege/led	Managing LEDs	The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.
http://tizen.org/privilege/location	Using user location	The application can read your location information.
http://tizen.org/privilege/location.enable	Managing location settings	The application can control your location service settings.
http://tizen.org/privilege/mediastorage	Accessing media folders	The application can read and write files in media folders.
http://tizen.org/privilege/message.read	Reading text and multimedia messages and related information	The application can read text and multimedia messages, and any information related to them.
http://tizen.org/privilege/message.write	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/network.get	Reading network information	The application can retrieve network information such as the status of each network, its type, and detailed network profile information.
http://tizen.org/privilege/network.profile	Managing network profiles	The application can add, remove, and edit network profiles.
http://tizen.org/privilege/network.set	Managing network connections	The application can turn Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks.
http://tizen.org/privilege/nfc	Using basic NFC services	The application can read and write NFC tag information, and send NFC messages to other devices.
http://tizen.org/privilege/nfc.admin	Managing NFC general settings	The application can change NFC settings, such as turning NFC on or off.
http://tizen.org/privilege/nfc.cardemulation	Using NFC card emulation mode	The application can access smart card details, such as credit card details, and allow users to make payments via NFC.
http://tizen.org/privilege/notification	Providing notifications	The application can show and hide its own notifications and badges.
http://tizen.org/privilege/packagemanager.admin	Installing/and uninstalling application packages and clearing caches	The application can install and uninstall application packages, and clear application caches.
http://tizen.org/privilege/packagemanager.info	Retrieving detailed package information	The application can retrieve detailed application package information.
http://tizen.org/privilege/power	Managing power	The application can control power-related settings, such as dimming the screen.
http://tizen.org/privilege/push	Receiving push notifications	The application can receive notifications from the Internet.
http://tizen.org/privilege/recorder	Recording video and audio	The application can record video and audio.
http://tizen.org/privilege/screenshot	Capturing device screen	The application can capture screenshots.
http://tizen.org/privilege/secureelement	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/shortcut	Managing shortcuts	The application can create and delete shortcuts.
http://tizen.org/privilege/systemsettings	Managing unrestricted system settings	The application can read and write unrestricted system settings.
http://tizen.org/privilege/systemsettings.admin	Managing all system settings	The application can read and write all system settings.
http://tizen.org/privilege/telephony	Accessing telephony information	The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.
http://tizen.org/privilege/telephony.admin	Managing telephony settings	The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.
http://tizen.org/privilege/tethering.admin	Accessing tethering services	The application can enable and disable tethering services.
http://tizen.org/privilege/volume.set	Adjusting volume	The application can adjust the volume for different features, such as notification alerts, ringtones, and media.
http://tizen.org/privilege/web-history.admin	Managing Internet history	The application can manage your Internet history.
http://tizen.org/privilege/wifidirect	Managing Wi-Fi Direct information	The application can enable and disable Wi-Fi Direct, manage Wi-Fi Direct connections, and change Wi-Fi Direct settings.
http://tizen.org/privilege/window.priority.set	Displaying windows on top of other applications and screen	The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This may prevent you from interacting with other applications or screens until the window for the application is closed.

Table: Wearable native API privileges
Privilege	Display name	Description
http://tizen.org/privilege/account.read	Reading accounts	The application can read accounts.
http://tizen.org/privilege/account.write	Managing accounts	The application can create, edit, and delete accounts.
http://tizen.org/privilege/alarm.get	Retrieving alarms	The application can read information about the saved alarms.
http://tizen.org/privilege/alarm.set	Setting alarms	The application can set alarms and wake the device up at scheduled times.
http://tizen.org/privilege/appmanager.kill	Closing applications	The application can close other applications.
http://tizen.org/privilege/appmanager.launch	Launching application	The application can open other applications.
http://tizen.org/privilege/bluetooth	Using unrestricted Bluetooth services	The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.
http://tizen.org/privilege/bluetooth.admin	Changing Bluetooth settings	The application can change Bluetooth settings, such as turning Bluetooth on or off, set the device name, and enable or disable the AV remote control.
http://tizen.org/privilege/bookmark.admin	Accessing Internet bookmarks	The application can retrieve, create, edit, and delete Internet bookmarks.
http://tizen.org/privilege/calendar.read	Reading calendar	The application can read events and tasks.
http://tizen.org/privilege/calendar.write	Managing calendar	The application can create, update, and delete events and tasks.
http://tizen.org/privilege/call	Making phone calls	The application can make phone calls to numbers when they are tapped without further confirmation.
http://tizen.org/privilege/callhistory.read	Reading call logs	The application can read call log items.
http://tizen.org/privilege/callhistory.write	Managing call logs	The application can create, update, and delete call log items.
http://tizen.org/privilege/camera	Using camera	The application can take and preview pictures.
http://tizen.org/privilege/contact.read	Reading contacts	The application can read your profile, contacts, and contact history. Contact history can include social network activity.
http://tizen.org/privilege/contact.write	Managing contacts	The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. The contact history can include social network activity.
http://tizen.org/privilege/content.write	Managing content	The application can change media information. This information can be used by other applications.
http://tizen.org/privilege/datasharing	Sharing data between applications	The application can share data with other applications.
http://tizen.org/privilege/display	Managing display settings	The application can manage display settings, such as the brightness. This can increase battery consumption.
http://tizen.org/privilege/download	Downloading through HTTP	The application can manage HTTP downloads. This can result in additional charges depending on the user's payment plan.
http://tizen.org/privilege/externalstorage	Accessing external storage	The application can read and write files that are saved to external storage, such as SD cards.
http://tizen.org/privilege/externalstorage.appdata	Accessing application data in external storage	The application can read and write its own files in external storage, such as SD cards.
http://tizen.org/privilege/haptic	Managing vibration feedback	The application can control vibration feedback.
http://tizen.org/privilege/healthinfo	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/internet	Accessing Internet	The application can access the Internet. This can result in additional charges depending on your payment plan.
http://tizen.org/privilege/keymanager	Using secure repository	The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.
http://tizen.org/privilege/keymanager.admin	Locking/unlocking secure repository	The application can lock and unlock a password-protected storage, and manage password changes for it.
http://tizen.org/privilege/led	Managing LEDs	The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.
http://tizen.org/privilege/location	Using user location	The application can read your location information.
http://tizen.org/privilege/location.enable	Managing location settings	The application can control your location service settings.
http://tizen.org/privilege/mediastorage	Accessing media folders	The application can read and write files in media folders.
http://tizen.org/privilege/message.read	Reading text and multimedia messages and related information	The application can read text and multimedia messages, and any information related to them.
http://tizen.org/privilege/message.write	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/network.get	Reading network information	The application can retrieve network information such as the status of each network, its type, and detailed network profile information.
http://tizen.org/privilege/network.profile	Managing network profiles	The application can add, remove, and edit network profiles.
http://tizen.org/privilege/network.set	Managing network connections	The application can turn Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks.
http://tizen.org/privilege/nfc	Using basic NFC services	The application can read and write NFC tag information, and send NFC messages to other devices.
http://tizen.org/privilege/nfc.admin	Managing NFC general settings	The application can change NFC settings, such as turning NFC on or off.
http://tizen.org/privilege/nfc.cardemulation	Using NFC card emulation mode	The application can access smart card details, such as credit card details, and allow users to make payments via NFC.
http://tizen.org/privilege/notification	Providing notifications	The application can show and hide its own notifications and badges.
http://tizen.org/privilege/packagemanager.admin	Installing/uninstalling application packages and clearing caches +	The application can install and uninstall application packages, and clear application caches.
http://tizen.org/privilege/packagemanager.info	Retrieving detailed package information	The application can retrieve detailed application package information.
http://tizen.org/privilege/power	Managing power	The application can control power-related settings, such as dimming the screen.
http://tizen.org/privilege/push	Receiving push notifications	The application can receive notifications from the Internet.
http://tizen.org/privilege/recorder	Recording video and audio	The application can record video and audio.
http://tizen.org/privilege/screenshot	Capturing device screen	The application can capture screenshots.
http://tizen.org/privilege/secureelement	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/shortcut	Managing shortcuts	The application can create and delete shortcuts.
http://tizen.org/privilege/systemsettings	Managing unrestricted system settings	The application can read and write unrestricted system settings.
http://tizen.org/privilege/systemsettings.admin	Managing all system settings	The application can read and write all system settings. +
http://tizen.org/privilege/telephony	Accessing telephony information	The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.
http://tizen.org/privilege/telephony.admin	Managing telephony settings	The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.
http://tizen.org/privilege/tethering.admin	Accessing tethering services	The application can enable and disable tethering services.
http://tizen.org/privilege/volume.set	Adjusting volume	The application can adjust the volume for different features, such as notification alerts, ringtones, and media.
http://tizen.org/privilege/web-history.admin	Managing Internet history	The application can manage your Internet history.
http://tizen.org/privilege/window.priority.set	Displaying windows on top of other applications and screen	The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This may prevent you from interacting with other applications or screens until the window for the application is closed.

+ +

+ +

The following table lists the non-API bound privileges.

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

Table: Non-API bound privileges
Privilege	Display name	Description
http://tizen.org/privilege/internet	Internet	Most of the mobile and wearable devices use a cellular network for IP communication. However, the cellular network can cause data costs and an application that sends data through the Internet can be crucial for user privacy. Due to the importance of the functionality, a privilege for controlling application Internet access has been added. + The new privilege is coupled with IP addresses of the destination and source of the IP packets. If your socket is connecting to or listening for any IP address except 127.0.0.1, this privilege is required to communicate properly. If your application does not have this privilege, the connection is blocked in the kernel layer and returns an error in the connect() function as the permission is denied. If you are listening to a socket, you never receive any packets from the outside without errors on the socket functions. + If you are using the listen() and connect() functions between the local loopback interface (127.0.0.1), you cannot connect to a random application (due to sandboxing) no matter how you add this privilege. However, you can connect between multiple processes of the same application binary.
http://tizen.org/privilege/mediastorage	Media storage	When you connect the device to a computer (Windows or Mac) through USB, you can access a dedicated media storage area shown as massive media storage. This region of the storage is called media storage and is usually used for multimedia files, such as photos, videos, and music files. Since this storage area is used for user private data, access to it must be protected with a privilege. + If your application does not have this privilege, no file operations into the media storage area (/opt/usr/media/) succeed and you receive a permission denied error. If you have this privilege, you can read and write directories and files, create new files, and delete files in the storage area.
http://tizen.org/privilege/externalstorage	External storage	Similar to the media storage, many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage (usually /opt/storage/sdcard) must be protected with a privilege. + If your application does not have this privilege, all file operations fail with a permission denied error. If you have this privilege, you have full access to the external storage.

+ + + +

+ +

+ + + + + + + + diff --git a/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm b/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm new file mode 100644 index 0000000..1dd7299 --- /dev/null +++ b/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm @@ -0,0 +1,883 @@ + + + + + + + + + + + + + + Tizen APIs + + + + + + +

+ +

+ +

The Tizen platform also provides a special kind of native application model, which consists of 1 UI native application and 1 or more native service applications.

+ +

The native API specification consists of multiple API modules that represent the versatility and wide variety of features that you can implement in your native application. Each API module represents a set of logically similar submodule APIs which can be grouped into the same category. This structure was designed to make it easier for you to narrow down and find the specific methods that you require to implement a feature in your native application.

+ +

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.

+ +

Figure: Mobile native API layout

Mobile native API layout

Table: Mobile native API modules
API module	Description	API submodule	Functionality
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: + + Guides: Application Framework + Tutorials: Application Framework +	Application	Manages the application's main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications. +
		Service Application	Handles Tizen service application (non-UI application) state changes and system events. It is also used to start and exit the main event loop of service applications.
		Application Manager	Gets information, such as the application ID and path to the shared data directory, of the current application and other installed or running applications.
		Badge	Creates and removes badges on the application's home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.
		Bundle	A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.
		Data Control	Exchanges data between applications by allowing an application to query the public database of another application that has opted to be a data provider.
		Message Port	Sends and receives small messages between applications without interference from other applications and processes. Each message is a bundle.
		Notification	Creates, inserts, and updates notifications so that applications can relay information to users. Visuals, sounds, or vibrations can be used as notifications.
		Package Manager	Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely.
		Shortcut	Adds application shortcuts to the device home screen, which is the main landing screen of the device. +
		Widget	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. + Documentation: + + Guides: Base + Tutorials: Base +	C++ Standard Library	Standard C++ library.
		EGlibc	Standard C library.
		Glib	Provides low-level libraries and advanced data structures, such as linked lists and hash tables, for use in application development.
		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. + Documentation: + + Guides: Content + Tutorials: Content	Download	Creates and manages one or more download requests. Content is downloaded from servers through an HTTP connection.
		MIME Type	Maps MIME types to file extensions and vice versa. For example, the .jpeg file extension is mapped to the image/jpeg MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.
		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. + Documentation: + + Guides: Context + Tutorials: Context	Activity Recognition	Detects user activities, such as walking, running, and being in a moving vehicle with a device.
Context		Gesture Recognition	Detects user gestures on devices, such as tilt, snap, and double-tap.
Location	The Location API module allows the geographical position of a device to be determined for use with location-based services. + Documentation: + + Guides: Location + Tutorials: Location	Location Manager	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.
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.
		Messages	Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.
		Push	Allows receiving of push notifications from a push server.
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	Audio I/O	Manages the system audio devices by granting access to the hardware layer of the sound card. This API must be used for tasks that require raw audio data buffers in PCM format.
		Camera	Accesses the camera preview to display photo previews, focuses images, and captures images.
		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.
		Media Codec	Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.
		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.
		OpenAL	Efficiently renders multichannel 3D audio.
		Player	Provides functions for media playback and can be used to control media playback attributes.
		Radio	Supports radio usage. This submodule API can be used for tasks, such as starting and stopping the radio and scanning for radio channels.
		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.
		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.
		Tone Player	Plays and stops tones.
		Video Util	Transcodes or converts media files from one encoding to another. This API supports certain video codecs, audio codecs, and file formats.
		WAV Player	Plays and stops Waveform Audio File (WAV) format files.
Network	The Network API module contains submodule APIs, which can be used for data communication. It is responsible for managing connections, maintaining IP addresses, and connecting to the system through Bluetooth, Hypertext Transfer Protocol (HTTP), Near Field Communication (NFC), Sockets, and Wi-Fi. It also provides methods for retrieving information about a specific host from the Internet Domain Name System (DNS). + Documentation: + + Guides: Network + Tutorials: Network +	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	Provides application communication to the SE applet methods.
Security	The Security API module contains submodule APIs which provide basic cryptographic functions, various utility functions through the OpenSSL open source library, and a secure password-protected repository for keys, certificates, and sensitive data. + Documentation: + + Guides: Security + Tutorials: Security	Key Manager	Provides functions to store keys, certificates, and sensitive data related to users and their password-protected applications in a secure repository. It also provides cryptographic operations to prevent key value names from being revealed to clients.
		OpenSSL	An open source library that provides basic cryptographic functions and various utility functions.
		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: + + Guides: Social + Tutorials: Social	Account Manager	An account is a collection of information representing the user of a specific account provider. This API submodule creates and manages accounts, retrieves account information, and receives account change notifications.
		Calendar	Manages calendars, including events and tasks. It also stores and queries calendar information.
		Contacts	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.
		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.
		Runtime information	Obtains runtime information of a mobile device. For example, this submodule API can obtain information about the device's GPS.
		Sensor	Starts and stops sensors and receives sensor data.
		Storage	Obtains storage information, such as root directory, storage type (internal or external), storage status, and total available space size.
		System Information	Obtains information about the device, such as the platform and API version, device model, supported device features, and screen dimensions.
		System Settings	Manages system settings, such as the lock screen settings.
		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. + 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. + Documentation: + + 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.
		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.
		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.
		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. + Documentation: + + Guides: UIX + Tutorials: UIX	STT	This API submodule provides functions to recognize speech.
UIX		TTS	This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.
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: + + Guides: Web + Tutorials: Web	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.

+ + + + + + + + + + +

Note
The wearable native profile is available since Tizen 2.3.1.

+ +

Figure: Wearable native API layout

Wearable native API layout

Table: Wearable native API modules
API module	Description	API submodule	Functionality
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: + + Guides: Application Framework + Tutorials: Application Framework +	Application	Manages the application's main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications. +
		Service Application	Handles Tizen service application (non-UI application) state changes and system events. It is also used to start and exit the main event loop of service applications.
		Application Manager	Gets information, such as the application ID and path to the shared data directory, of the current application and other installed or running applications.
		Badge	Creates and removes badges on the application's home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.
		Bundle	A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.
		Data Control	Exchanges data between applications by allowing an application to query the public database of another application that has opted to be a data provider.
		Message Port	Sends and receives small messages between applications without interference from other applications and processes. Each message is a bundle.
		Notification	Creates, inserts, and updates notifications so that applications can relay information to users. Visuals, sounds, or vibrations can be used as notifications.
		Package Manager	Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely.
		Watch Application	Handles Tizen watch application state changes and system events. It is also used to start and exit the main event loop of watch applications. +
		Widget	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. + Documentation: + + Guides: Base + Tutorials: Base +	C Standard Library	Standard C library.
		EGlibc	Standard C library.
		Glib	Provides low-level libraries and advanced data structures, such as linked lists and hash tables, for use in application development.
		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. + Documentation: + + Guides: Content + Tutorials: Content	MIME Type	Maps MIME types to file extensions and vice versa. For example, the .jpeg file extension is mapped to the image/jpeg MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.
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.
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 + Tutorials: Context	Activity Recognition	Detects user activities, such as walking, running, and being in a moving vehicle with a device.
Context		Gesture Recognition	Detects user gestures on devices, such as tilt, snap, and double-tap.
Location	The Location API module allows the geographical position of a device to be determined for use with location-based services. + Documentation: + + Guides: Location + Tutorials: Location	Location Manager	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.
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 + +	Messages	Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.
Messaging		Push	Allows receiving of push notifications from a push server.
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	Audio I/O	Manages the system audio devices by granting access to the hardware layer of the sound card. This API must be used for tasks that require raw audio data buffers in PCM format.
		Camera	Accesses the camera preview to display photo previews, focuses images, and captures images.
		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.
		Media Codec	Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.
		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.
		OpenAL	Efficiently renders multichannel 3D audio.
		Player	Provides functions for media playback and can be used to control media playback attributes.
		Radio	Supports radio usage. This submodule API can be used for tasks, such as starting and stopping the radio and scanning for radio channels.
		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.
		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.
		Tone Player	Plays and stops tones.
		WAV Player	Plays and stops Waveform Audio File (WAV) format files.
Network	The Network API module contains submodule APIs, which can be used for data communication. It is responsible for managing connections, maintaining IP addresses, and connecting to the system through Bluetooth, Hypertext Transfer Protocol (HTTP), Near Field Communication (NFC), Sockets, and Wi-Fi. It also provides methods for retrieving information about a specific host from the Internet Domain Name System (DNS). + Documentation: + + Guides: Network + Tutorials: Network +	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.
		Smartcard	Provides application communication to the SE applet methods.
Security	The Security API module contains submodule APIs which provide basic cryptographic functions, various utility functions through the OpenSSL open source library, and a secure password-protected repository for keys, certificates, and sensitive data. + Documentation: + + Guides: Security + Tutorials: Security	Key Manager	Provides functions to store keys, certificates, and sensitive data related to users and their password-protected applications in a secure repository. It also provides cryptographic operations to prevent key value names from being revealed to clients.
		OpenSSL	An open source library that provides basic cryptographic functions and various utility functions.
		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. + 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.
		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.
		Runtime information	Obtains runtime information of a wearable device. For example, this submodule API can obtain information about the device's GPS.
		Sensor	Starts and stops sensors and receives sensor data.
		Storage	Obtains storage information, such as root directory, storage type (internal or external), storage status, and total available space size.
		System Information	Obtains information about the device, such as the platform and API version, device model, supported device features, and screen dimensions.
		System Settings	Manages system settings, such as the lock screen settings.
		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. + 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. + Documentation: + + 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.
		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.
		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.
		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. + Documentation: + + Guides: UIX + Tutorials: UIX	STT	This API submodule provides functions to recognize speech.
UIX		TTS	This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.
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: + + Guides: Web + Tutorials: Web	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.

+ + + +

+ +

+ + + + + + + + diff --git a/org.tizen.gettingstarted/html/first_app/first_app.htm b/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm similarity index 53% rename from org.tizen.gettingstarted/html/first_app/first_app.htm rename to org.tizen.gettingstarted/html/native/first_app/first_app_n.htm index 19563d8..69e2209 100644 --- a/org.tizen.gettingstarted/html/first_app/first_app.htm +++ b/org.tizen.gettingstarted/html/native/first_app/first_app_n.htm @@ -3,179 +3,48 @@ - - - - - - - + + + + + + + Creating Your First Tizen Application - + -

- -

Content

Creating Your First Mobile Web App
Creating Your First Wearable Web App
Creating Your First Mobile Native App

- -

The following sections teach you how to create simple applications for various Tizen application types.

- -

Before you get started with developing Tizen applications, you must download and install the Tizen SDK (software development kit). For more information about the installation process, see the Tizen developer site.

- - - -

Show All
Hide All

- -

-
-
Creating Your First Mobile Web App
- Hide -
-
- -
This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen Web application development process as well as using the Tizen SDK and installing the created application on the Emulator or target device.
-
When you are developing a more complex application, you can take advantage of the tools included in the SDK to ease the tasks of creating functionality and designing the application UI.
-
To Create a HelloWorld Application
-
1. Creating the HelloWorld Project -
  1. Launch the Tizen IDE.
  2. Create the application project in the IDE.
    During the project creation, use the basic Tizen project template: in the New Tizen Web Project window, select Template > Tizen > Basic > Basic Application.
  3. Define helloworld as the name of your project and click Finish.
  The new helloworld project is shown in the Project Explorer view of the IDE, with default content in the config.xml file as well as in several project folders, including:
  -
  - css folder: CSS files directory
  - js folder: JavaScript files directory
  - config.xml file: Application configuration file
  - icon.png file: Icon file
  - index.html file: Default HTML file
2. Configuring the Application and Creating the Application Code
  The Web project source files already contain the basic application functionality.
  
  The automatically-included code creates an application with the title "Application Name". To change the title to HelloWorld, take the following steps (illustrated in the following figure):
  -
  1. Open index.html (1).
  2. Select the title (2).
  3. Locate the title in the code and change "Application Name" into "HelloWorld" (3).
  Figure: HelloWorld project
  
  You also have various options to set the application configuration using the config.xml file and design the application UI.
3. Building and Packaging the Application
  After you have finished implementing your application, you must build it.
  
  After building, the Tizen IDE automatically packages the project by creating a .wgt file.
4. Running and Debugging the Application on the Emulator
  You can run the HelloWorld application on the Emulator, Simulator, or real target device.
  The following figure shows the widget running in the Emulator.
  
  Figure: Running the project
  
  On a real target device, you can use the Remote Inspector tool to debug the application.
-
-
- -
-
Creating Your First Wearable Web App
- Hide -
-
- -
This tutorial demonstrates how you can create a simple HelloWorld application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web application development process and use the Tizen SDK, installing the created application on the Emulator or a target device.
-
When developing a more complex application, you can take advantage of the tools included in the SDK to make creating functionality and designing the application UI easier.
- -
To Create a HelloWorld Application
-
1. Creating the HelloWorld Project -
  1. Launch the Tizen IDE.
  2. Create the application project in the IDE.
    To use the Wearable UI project template, in the New Tizen Wearable Web Project window, select Template > Wearable UI > Basic Application.
  3. Define HelloWorld as the name of your project and click Finish.
  -
  Figure: Creating the HelloWorld project
  
  - -
  The new HelloWorld project is shown in the Project Explorer view of the IDE, with default content in the config.xml file as well as in several project folders, including:
  -
  - css folder: CSS file directory
  - js folder: JavaScript file directory
  - lib folder: Tizen wearable UI framework directory -
    - lib/tau/themes/black/tau.min.css: Release version of the Tizen wearable UI theme
    - lib/tau/js/tau.min.js: Release version of the Tizen wearable UI library
    - lib/tau/themes/black/tau.css: Debug version of the Tizen wearable UI theme
    - lib/tau/js/tau.js: Debug version of the Tizen wearable UI library
    -
  - config.xml: Application configuration file
  - icon.png: Icon file
  - index.html: Default HTML file
2. Configuring the Application and Creating the Application Code -
  The Web project source files already contain the basic application functionality.
  -
  1. Open the index.html file (1).
  2. Set the viewport meta tag (2).
  3. Add the tau.min.css file (3). -
    If you created your application project using the Wearable UI template, the link already exists in the index.html file.
  4. Add a link to the tau.min.js file in the script element (4). -
    If you created your application project using the Wearable UI template, the link already exists in the index.html file.
  - -
  Figure: index.html file
  
  - - -
  You have various options to set the application configuration using the config.xml file and code the application features.
3. Creating a Layout using the Wearable UI Theme
  In the Wearable UI, each scene is named a page. When you include the ui-page class attribute in a <div> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.
  -
  For more information about the Tizen wearable UI layout and widgets, see Tizen Wearable Web UI Framework Reference.
4. Building and Packaging the Application -
  When you have finished implementing your application, you must build it.
  
  After building, the Tizen IDE automatically packages the project by creating a .wgt package file.
5. Running and Debugging the Application on the Emulator
  You can run the HelloWorld application on the Emulator or a real target device.
  The following figure shows the widget running in the Emulator.
  - -
  Figure: Running the project
  
  - -
  On a real target device, you can use the Remote Inspector tool to debug the application.
-
-
-
-
Creating Your First Mobile Native App
- Hide -
-
+
Before you get started with developing Tizen applications, you must download and install the Tizen SDK (software development kit). For more information about the installation process, see the Tizen developer site.

This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen native application development process as well as using the Tizen SDK and installing the created application on the Emulator or target device.
-
When you are developing a more complex application, you can take advantage of the tools included in the SDK to ease the tasks of creating functionality and designing the application UI.
-
To Create a HelloWorld Application
+
When you are developing a more complex application, you can take advantage of the tools included in the SDK to ease the tasks of creating functionality and designing the application UI.
+
To Create a HelloWorld Application
1. Creating the HelloWorld Project -
-

- - - - + +

diff --git a/org.tizen.gettingstarted/html/process/app_dev_process_n.htm b/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm similarity index 84% rename from org.tizen.gettingstarted/html/process/app_dev_process_n.htm rename to org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm index 94a6c87..00c62d9 100644 --- a/org.tizen.gettingstarted/html/process/app_dev_process_n.htm +++ b/org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm @@ -3,22 +3,22 @@ - - - - - - - + + + + + + + Native Application Development Process -

Content

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

The following figure illustrates the process of developing a Tizen native application. Tizen provides the tools required to manage your application's life-cycle from product conception, through development and release, to end-of-life application retirement.

Figure: Native application development process

Native application development process

To develop an application with Tizen:

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

The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen native Project Wizard uses to automatically create basic functionalities that the native application implements to be able to execute. The default project files and folders are also created.

The following project templates are available:

UI Application @@ -79,14 +79,14 @@ Note - You can also design the application UI using the controls defined in UI guide. + You can also design the application UI using the controls defined in UI guide.
Coding applications -
Code your application in the IDE using the namespaces defined in the Native API Reference.

Code your application in the IDE using the namespaces defined in the Native API Reference.

If needed, update the privileges of the application.

Once you have finished implementing your application, you are ready to build your application.

@@ -122,7 +122,7 @@

You can package your application using the Tizen IDE. If you want to register your application in the Tizen store, register the author certificate before packaging your application.

If you have made changes to the application after testing it, rebuild the application.
Create a form-based or tab-based UI application.
Create a service application.
Package a multi-project application using Tizen IDE: -

diff --git a/org.tizen.gettingstarted/html/process/building_app_n.htm b/org.tizen.gettingstarted/html/native/process/building_app_n.htm similarity index 90% rename from org.tizen.gettingstarted/html/process/building_app_n.htm rename to org.tizen.gettingstarted/html/native/process/building_app_n.htm index d97de51..e8f7ea7 100644 --- a/org.tizen.gettingstarted/html/process/building_app_n.htm +++ b/org.tizen.gettingstarted/html/native/process/building_app_n.htm @@ -3,22 +3,22 @@ - - - - - - - + + + + + + + Building Applications -

@@ -71,7 +71,7 @@

To create an application project build:

Select the build configuration:
-

diff --git a/org.tizen.gettingstarted/html/process/debugging_app_n.htm b/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm similarity index 86% rename from org.tizen.gettingstarted/html/process/debugging_app_n.htm rename to org.tizen.gettingstarted/html/native/process/debugging_app_n.htm index 9a73e55..2612a2b 100644 --- a/org.tizen.gettingstarted/html/process/debugging_app_n.htm +++ b/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm @@ -3,22 +3,22 @@ - - - - - - - + + + + + + + Debugging Applications -

@@ -38,7 +38,7 @@

Debugging your application enables you to understand its flow of control. With the Tizen IDE, you can use various application debugging methods. However, remember that the best way to debug an application is to not make bugs in the first place, so learn how to prevent bugs by using logs.

The debugging environment uses GDB (GNU Debugger) for debugging with the Emulator and a target device. GDB can debug both locally and remotely. To ease the debugging process, you can set break points and watch points, step in, step out, and step over break points, and watch variables to track the changes in their values in the Debug view.

The debugging environment uses GDB (GNU Debugger) for debugging with the Emulator and a target device. GDB can debug both locally and remotely. To ease the debugging process, you can set break points, step in, step out, and step over break points, and watch variables to track the changes in their values in the Debug view.

Debugging native applications with Tizen IDE is same as with Eclipse CDT. For more information, see Debugging in Eclipse.

The Debug view provides debug control buttons that help you to track source code easily.

@@ -55,32 +55,32 @@ Description - Resume

F8 Resumes a suspended thread. - Step Into

F5 Steps into the highlighted statement.

Executes the current line, and if the line contains a method, steps into the method.

F6 Steps over the highlighted statement.

Executes the current line, and if the line contains a method, executes the method without entering it.

F7 Step out of the current method. - Suspend

- Suspends the selected thread. -

Ctrl + F2 Terminates the selected debug target. @@ -109,12 +109,12 @@

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

Remote debugging

A cross remote debugging environment is used to support the armel architecture of the Tizen devices. This means that the "cross gdb" and "gdb server" are used instead of native gdb and gdb server. Tizen also supports native (i386) remote debugging for the i386 emulator.

The Eclipse CDT based IDE supports the UI and control of the debugging process. The following figure shows the control flow of the remote debugging process.

Figure: Remote debugging control flow

Remote debugging control flow

@@ -329,44 +329,43 @@ collections

A break point suspends the execution of a program at the location where the break point is set.

To set or unset a break point, right-click in the marker bar area on the left side of the editor, and select Toggle Breakpoint.

- +

You can view and manage the existing break points in the Breakpoints view:

To remove a break point, right-click it and select Remove.
When you remove a break point, the corresponding icon is removed from the marker bar are in the editor too.
To enable or disable a break point, toggle the check box of the break point, or right-click the break point and select Enable or Disable.
This allows you to temporarily disable a break point without losing the information it contains.

You can set break point properties for actions that are executed along with the break point code.

To edit the properties:

Right-click in the marker bar area and select Breakpoint Properties.
To define actions, select Actions in the left side menu.
Click New and select an action type. The available action types are: -
- Sound Action
  You can make sound when the break point stops.
- Log Action
  You can see log messages in the Console view.
- Resume Action
  The program execution continues after a specified time.
- External Tool Action
  You can make your own action.
To define common properties where the break point stops, select Common in the left side menu.
For example, you can specify a condition using an expression. The break point stops the execution only if the condition is matched. The Ignore count field defines the count where the break point stops.

- -

A watch point suspends the execution of a program at the location where the expression is read or written.

To add a watch point:

In the Variables, Outline, or Expressions view, right-click a variable, and select Add Watchpoint (C/C++).
Define the details and click OK.

Figure: Watch point details

Watch point details

The added watch points are displayed in the Breakpoints view.

To execute watch points, set the read/write access of the expression you want to watch. When running the application, the program breaks when the address of the expression is valid.

- - + +

You can set break point properties for actions that are executed along with the break point code.

To edit the properties:

Right-click in the marker bar area and select Breakpoint Properties.
To define actions, select Actions in the left side menu.
Click New and select an action type. The available action types are: +
- Sound Action
  You can make a sound when the break point stops.
- Log Action
  You can see log messages in the Console view.
- Resume Action
  The program execution continues after a specified time.
- External Tool Action
  You can make your own action.
+ Click Attach after setting the action attributes.
To define common properties where the break point stops, select Common in the left side menu. +
For example, you can specify a condition using an expression. The break point stops the execution only if the condition is matched. The Ignore count field defines the count where the break point stops.

+ +

A watch point suspends the execution of a program at the location where the expression is read or written.

To add a watch point:

In the Variables, Outline, or Expressions view, right-click a variable, and select Add Watchpoint (C/C++).
Define the details and click OK.

Figure: Watch point details

Watch point details

The added watch points are displayed in the Breakpoints view.

To execute watch points, set the read/write access of the expression you want to watch. When running the application, the program breaks when the address of the expression is valid.

The Expressions view allows you to evaluate the data related to expressions.

The Expressions view can be used in the following ways:

@@ -383,12 +382,10 @@ collections

Figure: Expressions view

Expressions view

You can debug Tizen native applications on the - - Emulator using the Project Explorer view or the Tizen IDE menu.

You can debug Tizen native applications on the Emulator using the Project Explorer view or the Tizen IDE menu.

To debug your application on the Emulator:

Start the Emulator in the Connections view.
Use the application in the Emulator as you would in a target device.
-
While the application is running, the IDE's - - Log view shows the log, debug, and exception messages from the methods defined in the log macros.

While the application is running, the IDE's Log view shows the log, debug, and exception messages from the methods defined in the log macros.

To stop debugging, do one of the following:

After debugging, run your application again to check its functionality and to ensure that the bugs detected during the debugging process are fixed.

In the Emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the - Emulator Control Panel to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.

+ Emulator Control Panel to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.

- - + +

diff --git a/org.tizen.gettingstarted/html/process/designing_app_ui_n.htm b/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm similarity index 74% rename from org.tizen.gettingstarted/html/process/designing_app_ui_n.htm rename to org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm index d01de34..2bfe9d2 100644 --- a/org.tizen.gettingstarted/html/process/designing_app_ui_n.htm +++ b/org.tizen.gettingstarted/html/native/process/designing_app_ui_n.htm @@ -3,22 +3,22 @@ - - - - - - - + + + + + + + Creating Application UIs with UI Builder -

@@ -33,7 +33,7 @@

Tizen provides a WYSIWYG (What You See Is What You Get) UI Builder tool in the IDE for creating application UIs. The UI Builder includes the following features:

Creating a UI Builder project
Creating and designing page layouts

The following figure illustrates the default project folder structure for Tizen UI Builder applications.

Figure: Default project folder structure

Default project folder structure

The following table describes the content of the default project folders.

You can create and design native UI Builder application pages in the WYSIWYG Editor view.

A design area is displayed in the WYSIWYG Editor view.

Drag the widget from the Palette area to the WYSIWYG Editor view. -
+
Select the widget in the WYSIWYG Editor or Outline view.
In the Properties view, set the widget properties.

diff --git a/org.tizen.gettingstarted/html/process/performance_n.htm b/org.tizen.gettingstarted/html/native/process/performance_n.htm similarity index 92% rename from org.tizen.gettingstarted/html/process/performance_n.htm rename to org.tizen.gettingstarted/html/native/process/performance_n.htm index 4ae9a00..e67f01a 100644 --- a/org.tizen.gettingstarted/html/process/performance_n.htm +++ b/org.tizen.gettingstarted/html/native/process/performance_n.htm @@ -3,20 +3,20 @@ - - - - - - - + + + + + + + Optimizing Application Performance -

+ @@ -54,10 +55,10 @@

Tizen SDK supports various tools which help to measure performance and increase performance at runtime:

Dynamic Analyzer +
Dynamic Analyzer
Dynamic Analyzer helps to identify bottlenecks and improve resource usage patterns in native applications. For more information on its usage, see Dynamic Analysis.
Valgrind
Valgrind detects memory errors or leaks. This tool helps to improve memory usage patterns in native applications. For more information on its usage, see Valgrind Analysis.
Valgrind
Valgrind detects memory errors or leaks. This tool helps to improve memory usage patterns in native applications. For more information on its usage, see Valgrind Analysis.

Measuring performance allows you to identify bottlenecks that take a critical amount of time during the program execution and to compare the code execution time before and after optimization.

Profiling can show unexpected bottleneck locations that you have not noticed otherwise. Once bottlenecks are identified, you can consider applying threading mechanism to clear them. This solution does not work in all situations or for all algorithms, but it can be worth spending your time to investigate the possibilities. Code refactoring is required to apply the threading mechanism.

@@ -100,7 +101,7 @@

The performance details of your application retrieved during tracing are stored in trace files. You can manage the trace files through the Toolbar.

The following figure illustrates the components of the Toolbar used for running the dynamic analyzer.

Figure: Toolbar

Toolbar

Target
The Target combo box shows a serial number (if the target is a device), or the Emulator name (if the target is the Emulator).

Clicking the Save Trace button saves the trace data permanently.

Open Trace
Clicking the Open Trace button loads and displays the saved trace data.
-

+

The Open Trace window consists of the following panels:
- Saved file @@ -172,16 +173,16 @@
  When analyzing application performance, execution time of each method is one of the most significant factors. You can improve the performance of an application by identifying unexpected bottleneck locations, and analyzing and optimizing the most used methods in the dynamic analyzer.
  
  To detect and fix the methods consuming the most time:
  1. Select the Summary tab and view the Function Usage Profiling view displaying the methods consuming the most time. Click the title of a column to view the sorted results.
  2. Select the Summary tab and view the Function Usage Profiling view displaying the methods consuming the most time. Click the title of a column to view the sorted results.
  3. To view the execution time of the methods called within a specific time period, use the range information feature of the dynamic analyzer. +
  4. To view the execution time of the methods called within a specific time period, use the range information feature of the dynamic analyzer.
    The time consumed by UI-related methods is displayed on the UI Function Profiling view of the UI tab.
- Timeline CPU Chart
  When analyzing application performance, the CPU load is one of the most significant factors. A CPU load peak can result in a performance bottleneck. High CPU load leads to increased memory consumption, which shortens the battery life of the device running the application. To avoid this, you need to optimize your code.
  
  Figure: Timeline CPU chart
  -
  +
  
  To detect and fix CPU load peaks with the CPU load feature of the dynamic analyzer:
  1. Select the Timeline tab and view the CPU chart.
In the thread chart, the thread life-cycle is displayed as follows:
- Thread creation: When an API is called to create the thread, a yellow bar is displayed and a new chart item is created with a tid arrow.
  Figure: Creating a thread
- Thread exiting: When a thread exits, a purple bar is displayed with a joined tid arrow. If another thread calls the API of the exited thread, a yellow bar is displayed.
  Figure: Exiting a thread
- Thread creation: When an API is called to create the thread, a yellow bar is displayed and a new chart item is created with a tid arrow.
  Figure: Creating a thread
  +
- Thread exiting: When a thread exits, a purple bar is displayed with a joined tid arrow. If another thread calls the API of the exited thread, a yellow bar is displayed.
  Figure: Exiting a thread
  +
A new thread is created in a joinable state. Otherwise, memory and resource leaks can occur until the process ends. To make the process faster, set the thread to the detach state, or call the detach API. You can check the state of the thread on the Thread tab.

Analyzing Thread Concurrency
@@ -269,11 +273,11 @@
To view the parent item with the thread for each usage showing the child items, select Sync.

Figure: Synchronization chart types

Synchronization chart types

A synchronization object can be checked using the synchronization chart. When a synchronization object acquires a lock, the thread enters the critical section. The dynamic analyzer analyzes the critical section duration and waiting time.

If the critical section duration increases, the thread stops working concurrently and affects the performance. If a thread acquires a lock, the critical section waiting time of the other threads increases. To avoid potential dead lock, reduce the waiting time.

Figure: Dead lock warning

Dead lock warning

Valgrind helps you to detect memory errors or leaks in your application at runtime.

Heap memory profiling
This option uses the Massif tool to profile your application.
On the General setting tab, set the general Valgrind options. These options are used for both Memcheck and Massif profiling.

Figure: Memory error and memory leak data options

+
On the General setting tab, set the general Valgrind options. These options are used for both Memcheck and Massif profiling.

Figure: Memory error and memory leak data options
+

@@ -87,47 +87,47 @@
Content
includes	includes	Native UI framework
res	res	Icons or images
src	src	Application source files
layout	layout	Layout folder
lib	lib	Library folder
shared	shared	Shared folder
res	res	Resource folder of the Tizen IDE
layout.tuml	layout.tuml	Layout meta file (tuml: Tizen UI Markup Language)
nativeuibuilder	nativeuibuilder	Application icon file
app.xml	app.xml	Application information file
tizen-manifest.xml	tizen-manifest.xml	Manifest XML file of the Tizen IDE

Table: General setting options @@ -456,7 +461,7 @@

The heap memory profiling table displays the heap memory consumed and allocated during the profiling process.

Figure: Heap memory profiling results

Heap memory profiling results

Snapshot is the index number of the snapshot.
Time (i) is the number of instructions being executed.

diff --git a/org.tizen.gettingstarted/html/process/running_app_n.htm b/org.tizen.gettingstarted/html/native/process/running_app_n.htm similarity index 81% rename from org.tizen.gettingstarted/html/process/running_app_n.htm rename to org.tizen.gettingstarted/html/native/process/running_app_n.htm index e113935..609424f 100644 --- a/org.tizen.gettingstarted/html/process/running_app_n.htm +++ b/org.tizen.gettingstarted/html/native/process/running_app_n.htm @@ -3,13 +3,13 @@ - - - - - - - + + + + + + + Running Applications @@ -17,16 +17,15 @@ -

You can run Tizen native applications on the - Emulator using the Project Explorer view or the Tizen IDE menu.

You can run Tizen native applications on the Emulator using the Project Explorer view or the Tizen IDE menu.

To run your application on the Emulator:

Before you run the application, you must sign your application package by generating an author certificate and registering it in the IDE.
@@ -75,11 +74,11 @@ - - + +

diff --git a/org.tizen.gettingstarted/html/process/setting_properties_n.htm b/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm similarity index 77% rename from org.tizen.gettingstarted/html/process/setting_properties_n.htm rename to org.tizen.gettingstarted/html/native/process/setting_properties_n.htm index 7ef7dc0..44a9d69 100644 --- a/org.tizen.gettingstarted/html/process/setting_properties_n.htm +++ b/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm @@ -3,22 +3,22 @@ - - - - - - - + + + + + + + Setting Project Properties -

Related Info

@@ -65,14 +65,14 @@

In the Properties window, select C/C++ Build > Tizen Settings > API and Privilege Checker.
-
Select the required API problems in the API Check panel.

Select the required API problems in the API Check panel.

To perform API usage checks automatically, select the required option in the Launching panel:

During the build process, select the Run API and privilege checks with build option.
During code editing, select the Run API and privilege checks while editing option.

You can also perform the API usage checks manually after building the application by selecting Project > Check API and Privilege Violations. The results are displayed in the Problems view.

@@ -86,22 +86,20 @@

In the Properties window, select C/C++ Build > Tizen Settings > API and Privilege Checker.
-
Select the required privilege problems in the Privilege Check panel.

Select the required privilege problems in the Privilege Check panel.

To perform privilege checks automatically, select the required option in the Launching panel:

During the build process, select the Run API and privilege checks with build option.
During code editing, select the Run API and privilege checks while editing option.

You can also perform privilege checks manually after building the application by selecting Project > Check API and Privilege Violations. The results are displayed in the Problems view.

The application manifest consists of application information, such as package, version, features, and privileges, which are available for the application. To configure the application information in the manifest editor, double-click the tizen-manifest.xml file present in the project folder of the application.

Figure: Setting the application manifest

- Setting the application manifest -

Setting the application manifest

You can edit application properties using the tabs of the manifest editor.

@@ -109,7 +107,7 @@

You can set and edit general and project-related information about the application, such as application package, version, author, description, in the Overview tab of the manifest editor. Additionally, you can specify the application icon.

You can perform the following tasks using the Overview tab:

Set the package name of the application.
The package name represents the package identifier of the application
Set the application version (x.y.z).
The application version format has the following constraints: 0 â¤ {x, y} â¤ 255, 0 â¤ z â¤ 65535. You can change the application version in the Version field.
Set the application label.
The application label represents the label of the application.

Note

Set the application author. -

The application author represents the creator of the Tizen mobile native application package. You can set the name, email ID, and Web site of the author.

The application author represents the creator of the Tizen native application package. You can set the name, email ID, and Web site of the author.

Set the application description. -

The application description represents the human-readable descriptions of the Tizen mobile native application package.

The application description represents the human-readable descriptions of the Tizen native application package.

@@ -162,18 +160,18 @@

You can declare required software or hardware features. This declaration can be used for application filtering in the Tizen Store.

To enable filtering for your mobile native application:

To enable filtering for your native application:

In the Features tab of the manifest editor, click Add and set the mandatory features for the application package.
The manifest file (tizen-manifest.xml) is updated automatically.
Upload and publish the application package on the Tizen Store.
If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.

For more information on the available requirements for an application package, see Feature Filtering for Native Applications. If you want to check which features are necessary for using a specific API, see the related feature in the native API Reference.

You can use features and services provided by privileged APIs, which handle platform and user-sensitive data. Assign specific privileges to your application in the Privilege tab of the manifest editor, according to the application functionality that you want to develop.

@@ -184,20 +182,31 @@

You can define advanced features of the application, such as metadata and data and application control functionalities, account, and miscellaneous options, in the Advanced tab of the manifest editor.

You can perform the following tasks using the Advanced tab:

Add metadata.
You can add user-defined key-value pairs to the application to be used for filtering in the package manager.
Set miscellaneous options.
You can set as true or false various application options:
-
- Define application control. -
  You can export the application control functionality of your application. To define an application control used to access the functionality of your application, click Add in the Application Control section of the Advanced tab of the manifest editor.
  +
  You can export the application control functionality of your application. To define an application control used to access the functionality of your application, click Add in the Application Control section of the Advanced tab of the manifest editor.
  
  Each application control can have multiple operation, mime type, and uri attributes.
- Add an account.
  Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.
  @@ -244,7 +253,7 @@ String

File path of the account provider icon.

The icon size is:

72 x 72 for Xhigh (HD)
48 x 48 for High (WVGA)

String

File path of the account provider icon.

The icon size is:

45 x 45 for Xhigh (HD)
30 x 30 for High (WVGA)

String

Capability of the account provider.

Capabilities are defined in the http://<VENDOR_INFORMATION>/accounts/capability/<NAME> IRI format.

The following predefined capabilities can be used in Tizen:

http://tizen.org/account/capability/contact
Used when the account is related to the contacts.

Export DataControl functionality.
You can export data functionalities of your Tizen native application.

To define a data control used to export application data, click Add and define the data control details.
Export DataControl functionality.
You can export data functionalities of your Tizen native application.

To define a data control used to export application data, click Add and define the data control details.

The tizen-manifest.xml tab of the manifest editor shows the code of the tizen-manifest.xml file. You can edit the basic syntax of the XML document and also see how changes made on the other tabs are reflected in the raw XML source content.

@@ -316,11 +325,11 @@ - - + + -

diff --git a/org.tizen.gettingstarted/html/preface/preface.htm b/org.tizen.gettingstarted/html/preface.htm similarity index 60% rename from org.tizen.gettingstarted/html/preface/preface.htm rename to org.tizen.gettingstarted/html/preface.htm index 7de539f..ff28299 100644 --- a/org.tizen.gettingstarted/html/preface/preface.htm +++ b/org.tizen.gettingstarted/html/preface.htm @@ -3,25 +3,25 @@ - - - - - - - + + + + + + + Preface -

@@ -30,9 +30,9 @@

Tizen is an open-source project that allows you to create feature-rich applications for multiple device categories.

The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile native profile can be used to develop native applications for mobile devices.

The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile and wearable native profile can be used to develop native applications for mobile and wearable devices.

When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. "N" in the icon stands for the native application profiles and "W" stands for the Web application profiles.

@@ -52,16 +52,20 @@

- + - + - + + + + +

Mobile Web	or	or
Wearable Web	or	or
Mobile Native
Wearable Native

@@ -85,28 +89,31 @@

To make the most of your Tizen applications, get familiar with the Tizen documentation:

Getting Started -
The getting started with Tizen documentation provides all the information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.
+
Getting Started +
The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.
Development Environment and Tools +
Development Environment and Tools
The development environment and tools documentation introduces the Tizen software development kit (SDK) and related tools you can use when developing your Tizen application.
Tutorials +
Tutorials
The Tizen tutorials teach you how to incorporate Tizen features into your application. The tutorials contain detailed code examples to help you write the required code in practice.
Guides +
Guides
The Tizen developer guides introduce the various features that you can use in creating Tizen applications. You can select an API domain to implement its functionalities into your Tizen application.
API References +
API References
The Tizen API References provide descriptions of all the Tizen API domains, subdomains, classes, interfaces, and methods.
Sample Descriptions +
The Tizen sample descriptions introduce the sample applications provided in the SDK.
+

- - + +

diff --git a/org.tizen.gettingstarted/html/process/designing_app_ui_w.htm b/org.tizen.gettingstarted/html/process/designing_app_ui_w.htm deleted file mode 100644 index 0820768..0000000 --- a/org.tizen.gettingstarted/html/process/designing_app_ui_w.htm +++ /dev/null @@ -1,572 +0,0 @@ - - - - - - - - - - - - - - Creating Application UIs with UI Builder - - - - - - -

Tizen provides a WYSIWYG (What You See Is What You Get) UI Builder tool in the IDE for creating application UIs. The UI Builder includes the following features:

Creating a UI Builder project
Creating and designing page layouts
Handling events and testing
Migrating UI Builder projects

- -

A UI Builder project creates source code and required files and folders in the IDE workspace for building a Tizen Web application using the UI Builder. You can use the UI Builder to create and modify the page layout using a graphical user interface. The project uses the Web UI Builder framework as a guide for the programming model.

To create a Web UI Builder project:

In the IDE, select File > New > Tizen Web Project.
If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Web). To switch perspectives, go to Window > Open Perspective > Other and select the perspective you need.
In the New Tizen Web Project window, select the Template tab and define the project details: -
1. Select the Tizen Web UI Builder project type.
2. Define the name of your project.
  The default location for your application project is defined.
  - - - - - - - - - -
  Note
  The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-z OR A-Z][a-z OR A-Z OR 0-9]{2,49}.
Click Finish.

The new application project is shown in the Project Explorer view of the IDE, with default content in the config.xml file as well as in several project folders.

- -

The Tizen Web UI Builder framework consists of a set of managed code as a guide for the programming model using event handlers.

An application consists of pages and the transition between pages. A page is a set of widgets and event handlers. To develop each element of an application, the Web UI Builder provides several components.

Figure: Relationship between application elements and UI Builder components

Relationship between application elements and UI Builder components

The Web UI Builder framework provides the following abstract objects to handle the events of application, pages and widgets:

App Object
Page Object

- -

The app object is an abstraction of the application. It contains the runtime information and event handler of the application life-cycle.

The app object is declared in the page-system.js file. As the app object is a global object, it is accessible in every JavaScript file.

/* page-system.js */
-window.app = new _app();

When the application is running, the app object always exists and has a valid value. The following tables list the available member objects and event handlers.

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

- Table: App objects -
Method	Description	Example
setCurrentPageId()	Sets the current page ID	app.setCurrentPageId("page1");
getCurrentPageId()	Returns the current page ID	app.getCurrentPageId();

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

- Table: Event handlers -
Event	Handler	Reference
load	app.onload	When the document is ready
unload	app.onunload	When the window is unloaded
show	app.onshow	When the window is shown
hide	app.onhide	When the window is hidden
pagebeforechange	app.onpagebeforechange	Before switching from the current page
pagechange	app.onpagechange	After switching from the current page to the new page
pagechangefailed	app.onpagechangefailed	When the page switching fails
pagebeforeload	app.onpagebeforeload	Before an external page is loaded
pageload	app.onpageload	After an external page is loaded

The prototype of the event handler is declared in the app.js file.

-app.onload = function() 
-{
-   /* App initialization */
-   console.log("loaded");	
-};
-
-app.onunload = function() 
-{
-   /* App termination */
-   console.log("unloaded");
-};
-
-app.onshow = function() 
-{
-   /* App is shown */
-   console.log("shown");
-};
-
-app.onhide = function() 
-{
-   /* App is hidden */
-   console.log("hidden");
-};
-
-app.onpagebeforechange= function() 
-{
-   /* Before switching from the current page */
-   console.log("onpagebeforechange ");
-};
-
-app.onpagechange = function() 
-{
-   /* After switching from the current page to the new page */
-   console.log("onpagechange ");
-};
-
-app.onpagechangefailed = function() 
-{
-   /* When the page switching fails */
-   console.log("onpagechangefailed ");
-};
-
-app.onpagebeforeload = function() 
-{
-   /* Before an external page is loaded */
-   console.log("onpagebeforeload ");
-};
-
-app.onpageload = function() 
-{
-   /* After an external page is loaded */
-   console.log("onpageload ");
-};
-

- -

The page object is an abstraction object of each page. It contains the layout information of the widget and the event handler of the page or widget event.

In the event handler of pages or widgets, you can access the corresponding page object using the this keyword.

/* index.js */
-page1_page.prototype.onpageinit = function(event) 
-{
-   console.log('HTML: ' + this.pageID);
-};
-
-page1_page.prototype.button1_ontap = function(event) 
-{
-   this.headingone1.innerText = 'Hello World!';
-};
-

Figure: Page object

Page object

The page object exists when a page is being loaded, and has a valid value only when the page is shown. You cannot access the event handler in other pages. The following table lists the available member objects.

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

- Table: Page member objects -
Member	Type	Description	Value
pageID	string	Page ID	"page1"
obj	HTML element	HTML element of page	<div data-role="page" id="page1">...</div>
tauObj	object	Advanced page object	{id: "page1", name: "Page", namespace: "mobile", widgetName: "page", ...}

You can access the widget of the page as a member variable of the page object.

/* index.js */
-page1_page.prototype.button1_ontap = function(event)
-{
-   this.headingone1.innerText = 'Hello World!'; 
-};
-

Figure: Widget object

Widget object

The following table lists the available events of the page.

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

- Table: Page events -
Event	Handler	Occurred time
pagebeforecreate	{page_class}.prototype.onpagebeforecreate	Before the page is initialized
pagecreate	{page_class}.prototype.onpagecreate	After the page is added to DOM
pageinit	{page_class}.prototype.onpageinit	After the page is initialized
pagebeforehide	{page_class}.prototype.onpagebeforehide	Before the page is hidden
pagehide	{page_class}.prototype.onpagehide	After the page is hidden
pagebeforeshow	{page_class}.prototype.onpagebeforeshow	Before the page is shown
pageshow	{page_class}.prototype.onpageshow	After the page is shown
pageremove	{page_class}.prototype.onpageremove	Before the page is removed from DOM

The following figure describes the sequence of events and the life-cycle of pages when there is a page transition. Currently, this also applies to the JQM page transition scheme.

Figure: Page event sequence

Page event sequence

You can add a page event handler using the UI Builder.

Figure: Page event handler

Page event handler

Figure: Page event handler code

Page event handler code

Every widget has some event of its own. The following table list the events of button widgets.

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

- Table: Button widget events -
Event	Handler
Tap	{page_class}.prototype.{buttonID}_ontap
Tap hold	{page_class}.prototype.{buttonID}_ontaphold
Swipe	{page_class}.prototype.{buttonID}_onswipe
Swipe left	{page_class}.prototype.{buttonID}_onswipeleft
Swipe right	{page_class}.prototype.{buttonID}_onswiperight

- -

The following figure illustrates the default project folder structure for Tizen UI Builder applications.

Figure: Default project folder structure

Default project folder structure

The following table describes the contents of the default project folders.

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

- Table: Default project folder contents -
File or folder	Content
lib	UI framework
res	Icons
tizen-ui-builder-fw	UI Builder framework
tizen-ui-builder-tool	UI Builder Tool framework
config.xml	Tizen Web application configuration file
index.config.xml	UI Builder project configuration file
index.html	Application master HTML file
index.js	Application, page, and widgets event handler file
index.managed.css	Automatically generated file for multi screen
index.managed.js	Automatically generated file for app and page initialization
page1_common.css	Automatically generated page style file

- -

You can create and design Web UI Builder application pages in the Page Designer view.

You can create multiple pages for a Web UI Builder application. To add a new page:

In the IDE, select File > New > Other.
In the New window, select Tizen > Tizen Web UI Builder Page and click Next.
Select a project to be added and click Next.
Select a page template and enter the new page ID.
Click Finish.
The new page appears in the Page Designer view.

You can configure the design area in the Page Designer view by managing the display resolution, changing the orientation, zooming in and out, and scaling the design area to available screen space.

You can add a UI widget in the Page Designer view and set its properties:

In the Project Explorer view, double-click the page file to which you want to add widgets.
The page file displays a design area in the Page Designer view.
Drag the widget from the Palette area to the design area.
Select the widget in the design area or in the Outline view.
In the Properties view, set the widget properties.

You can move the widgets around in the design area.

- -

You can place a variety of widgets in the Page Designer.

To place a widget, drag the widget from the Palette area to the design area. The next empty position in the design area is marked with a dotted rectangle. The parent widget or content object is blue in color.

You can add child widgets in a container, such as a List. For example, you can add a set of ListItem widgets in a List container widget. If the design area List container widget does not contain any ListItem widgets, the List widget displays a "Drop a List Item" message.

You can only add widgets of a fixed type in container widgets. For example, you can add a ListItem widget only to a List widget. If you try to add a ListItem widget to a wrong widget, the design area changes to red color, which implies that the widget cannot be placed. If you add the widget to the correct container widget, the design area changes to blue color, which implies that the widget can be placed.

- -

You can select a UI widget from the design area of the Page Designer view and add event handlers for it.

To add an event handler for the selected widget:

In the Properties view, select the Event sub-tab.
Click the + button on the right side of the Tap label.
Click the combo on the right side of Action.
In the Add drop-down list, select the event to which you want to add an event handler.
The event handler for the selected event is displayed.
Define a name for the event handler, and click the play button next to it.
The UI Builder generates a skeleton code for the event handler.
Enter the application-specific event handler-related code.

All widgets have their own unique ID in a specific page, and you can access the widgets in the event handler code using the ID. You can view and edit the widget ID in the Outline view.

For example, if your page has a button (with the button1 ID) and a heading (with the heading1 ID), you can create an event handler for the button tap that changes the heading text:

-page1.button1_tap = function(event) 
-{ 
-   this.heading1.text("Hello World!");
-};
-

To test the UI Builder project:

Select the project in the Project Explorer view.
In the IDE menu, select one of the following: -
- Run > Run as > Tizen Web Application to test the project on the Emulator or target device.
- Run > Run as > Tizen Web Simulator Application to test the project on the Web Simulator.

- -

- -

You can migrate your UI Builder project from the Tizen 2.2.1 SDK to the 2.3 version to keep your old files and settings:

- -

In the Project Explorer view, right-click the project and select Import.
Select Tizen > Tizen Web UI Builder Project with Migration and click Next.
Select the project whose version is "tizen 2.2.1".
Enter the migration project name and click Finish.
Implement project changes required by the migration: -
1. Copy the original project under the new name.
2. Generate new files ("page#" refers to the ID of each page): -
  - .tizen-ui-builder-tool.xml: Contains the version information.
  - index.html: Generated with reference to the following: -
    - app.xml
    - page#.page
  - index.meta.xml: Generated with reference to the following: -
    - page#.page
  - index.js -
    - app.js
    - page#.js
  - page#_common.css -
    - page#.managed.css
3. Copy the old CSS files: -
  - page#.css
  - app.css
4. Edit the config.xml file -
  Content: app.xml > index.html
5. Generate code: -
  - index.managed.js
  - index.managed.css
6. Replace: -
  - UI frameworks
  - UI Builder frameworks
  - UI Builder Tool frameworks
  - /res folder
  - icon.png
7. Delete files that are no longer needed.

- - - - - - - - - - -

Note

While every effort has been made to avoid breakage, some incompatibility areas with the new APIs must be checked. -

Check the href attribute, since it is not automatically translated with the href URL. For example:

<a href="page1.html">LINK</a>

- - - - - -

- -

- - - - - - - \ No newline at end of file diff --git a/org.tizen.gettingstarted/html/scripts/showhide.js b/org.tizen.gettingstarted/html/scripts/showhide.js index 7b3255f..2e85407 100644 --- a/org.tizen.gettingstarted/html/scripts/showhide.js +++ b/org.tizen.gettingstarted/html/scripts/showhide.js @@ -118,9 +118,8 @@ $(document).ready(function(){ } $('#contents').scroll(); - - var updateH = function(){ + var checkBreadCrumbs = function() { if (!isScrolledIntoView($('#contents .content h1'))) { $('a.top.sms').show(); @@ -130,13 +129,12 @@ $(document).ready(function(){ $('.help_breadcrumbs').show(); } $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6)); + } + + var updateH = function(){ + checkBreadCrumbs(); $('a.top').css('bottom', $('#footer').outerHeight()); - - if($('#navigation').length) { - $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2)); - } else { - $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2)); - } + $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2)); $('#toc').css('top', $('#toc_border').position()['top'] + 7); @@ -152,18 +150,13 @@ $(document).ready(function(){ $('#container #contents').css('margin-bottom', $('#footer').outerHeight()); //$('#toc').css('top', $('#toc_border').position()['top'] + 2); $('#toc').css('top', $('#toc_border').position()['top'] + 7); - - if($('#navigation').length) { - $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5); + $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5); //$('#toc').css('width', $('#toc_border').width() - 40); - } else { - $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5); - } - $('#toc').css('width', $('#toc_border').width() - 49); }; var updateH_no_toc = function() { + checkBreadCrumbs(); if (!isScrolledIntoView($('#contents .content h1'))) { $('a.top.sms').show(); diff --git a/org.tizen.gettingstarted/html/details/tizen_websites.htm b/org.tizen.gettingstarted/html/tizen_websites.htm similarity index 83% rename from org.tizen.gettingstarted/html/details/tizen_websites.htm rename to org.tizen.gettingstarted/html/tizen_websites.htm index 69639c9..ea58e60 100644 --- a/org.tizen.gettingstarted/html/details/tizen_websites.htm +++ b/org.tizen.gettingstarted/html/tizen_websites.htm @@ -3,25 +3,25 @@ - - - - - - - + + + + + + + Tizen Web Sites -

@@ -54,12 +54,12 @@ - - + +

diff --git a/org.tizen.gettingstarted/html/app_model/application_model_w.htm b/org.tizen.gettingstarted/html/web/app_model/application_model_w.htm similarity index 81% rename from org.tizen.gettingstarted/html/app_model/application_model_w.htm rename to org.tizen.gettingstarted/html/web/app_model/application_model_w.htm index d882022..60bec25 100644 --- a/org.tizen.gettingstarted/html/app_model/application_model_w.htm +++ b/org.tizen.gettingstarted/html/web/app_model/application_model_w.htm @@ -3,37 +3,37 @@ - - - - - - - + + + + + + + Tizen Web Application Model -

The Tizen SDK enables you to create Web applications and widgets for mobile devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device.

A widget package includes all the support files that are needed by the widget. Therefore, a widget is a complete standalone Web application that can run without any additional external resources or network connectivity.

The Tizen SDK enables you to create Web applications for mobile devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device.

A Web application package includes all the support files that are needed by the Web application. Therefore, a Web application can run without any additional external resources or network connectivity after installation.

The application model supports a rich set of standard W3C/HTML5 features, which include various JavaScript APIs as well as additional HTML markups and CSS features. These features along with the Tizen Device APIs and UI framework support can be used to create rich Web applications in a variety of categories, such as contact, messaging, device information access, multimedia, graphics, and games.

Tizen supports both Web application packages and hybrid application packages (in mobile applications only), which combine a Web application and 1 or more native service applications.

Applications in the same package follow the same installation life-cycle, handled by the application package manager.

@@ -43,12 +43,12 @@

The application package manager module is expandable to support various types of applications, and designated installation modules can be added to it.

Figure: Application package manager

Application package manager

Each Web widget package has a configuration file, config.xml, which indicates a packaging format and metadata for the application.

The Tizen Web widget must follow the guidelines of W3C Widget Packaging and Tizen extended configuration.

For more information on the configuration elements, see Configuration Element Hierarchy.

Each Web application package has a configuration file, config.xml, which indicates a packaging format and metadata for the application.

The Tizen Web application must follow the guidelines of W3C Widget Packaging and Tizen extended configuration.

For more information on the configuration elements, see Configuration Element Hierarchy.

The Tizen platform supports Web applications based on HTML, JavaScript, and CSS, and packaged according to the W3C specification. The platform also provides device APIs to access the platform capabilities, enabling a rich Web application development environment.

@@ -129,7 +129,7 @@

Directory hierarchy (after installation on device)

The following figure and table illustrate the Web application package directory structure.

Web application directory structure

Table: Web application package structure @@ -224,7 +224,7 @@

Directory hierarchy (after installation on device)

The following figure and table illustrate the hybrid application package directory structure.

Figure: Hybrid application directory structure

Hybrid application directory structure

Table: Hybrid application package structure @@ -255,11 +255,11 @@ - - + + -

diff --git a/org.tizen.gettingstarted/html/app_model/application_model.htm b/org.tizen.gettingstarted/html/web/cover_page_w.htm similarity index 55% rename from org.tizen.gettingstarted/html/app_model/application_model.htm rename to org.tizen.gettingstarted/html/web/cover_page_w.htm index 8972540..5d20f15 100644 --- a/org.tizen.gettingstarted/html/app_model/application_model.htm +++ b/org.tizen.gettingstarted/html/web/cover_page_w.htm @@ -11,18 +11,46 @@ - Tizen Application Model + Introduction to Web Applications - + -

+ -

Click the application type you want:

- +

+ +

+ + +

The introduction to Web applications documentation provides overall information you need to become familiar with Web-specific Tizen programming and application model:

+ +

Creating Your First Tizen Application +
Demonstrates how you can create a simple HelloWorld application - thus helping you to get more familiar with the Tizen application development process and using the Tizen SDK.
Application Development Process +
Teaches you how to create a Tizen application from the initial application planning stage to the end stages where you are ready to run and package your application.
Tizen Application Model +
Provides an introduction to the Tizen application life-cycle and package contents.
Understanding Tizen Programming +
Introduces the Tizen platform, its architecture, and some useful programming concepts you need to take into account when designing Tizen applications.
+

+ +

diff --git a/org.tizen.gettingstarted/html/web/details/app_filtering_w.htm b/org.tizen.gettingstarted/html/web/details/app_filtering_w.htm new file mode 100644 index 0000000..716f0fd --- /dev/null +++ b/org.tizen.gettingstarted/html/web/details/app_filtering_w.htm @@ -0,0 +1,609 @@ + + + + + + + + + + + + + + Application Filtering + + + + + + +

+ +

When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround. +
For example, if an application wants to use location information, it can check the device capability by using the getCapability() method of the SystemInfo interface (in mobile and wearable applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.
+
Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user's device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place. +
Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.

+ +

Figure: Feature-based filtering

Feature-based filtering

+ +

If you do not specify a proper screen size in the config.xml file, your application can be rejected from the Tizen store.

The following tables list the available screen size features.

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

Table: Available screen size features for mobile applications
Feature key	Description
http://tizen.org/feature/screen.size.normal	Specify this key, if the application supports all possible current and future resolutions on the normal screen size. + You cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both http://tizen.org/feature/screen.size.normal and http://tizen.org/feature/screen.size.normal.320.480 keys, only the http://tizen.org/feature/screen.size.normal.320.480 key is applied. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. +
http://tizen.org/feature/screen.size.normal.240.400	Specify this key, if the application supports the 240 x 400 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. +
http://tizen.org/feature/screen.size.normal.320.320	Specify this key, if the application supports the 320 x 320 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. +
http://tizen.org/feature/screen.size.normal.320.480	Specify this key, if the application supports the 320 x 480 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.360.480	Specify this key, if the application supports the 360 x 480 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.480.800	Specify this key, if the application supports the 480 x 800 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.540.960	Specify this key, if the application supports the 540 x 960 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.600.1024	Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.720.1280	Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.normal.1080.1920	Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.all	Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size. + You cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both http://tizen.org/feature/screen.size.all and http://tizen.org/feature/screen.size.normal.320.480 keys, only the http://tizen.org/feature/screen.size.normal.320.480 key is applied. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.

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

Table: Available screen size features for wearable applications
Feature key	Description
http://tizen.org/feature/screen.size.normal	Specify this key, if the application supports all possible current and future resolutions on the normal screen size. + You cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both http://tizen.org/feature/screen.size.normal and http://tizen.org/feature/screen.size.normal.320.480 keys, only the http://tizen.org/feature/screen.size.normal.320.480 key is applied. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. +
http://tizen.org/feature/screen.size.normal.320.320	Specify this key, if the application supports the 320 x 320 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key. +
http://tizen.org/feature/screen.size.normal.360.480	Specify this key, if the application supports the 360 x 480 resolution on the normal screen size. + You can specify multiple http://tizen.org/feature/screen.size.normal.* keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.
http://tizen.org/feature/screen.size.all	Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size. + You cannot specify keys on both screen.size.* and screen.size.normal.* levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both http://tizen.org/feature/screen.size.all and http://tizen.org/feature/screen.size.normal.320.480 keys, only the http://tizen.org/feature/screen.size.normal.320.480 key is applied. If no screen size key is declared, it is assumed that the application supports only screen.size.normal.720.1280. To avoid this, specify at least 1 screen size key.

+ + +

+ +

The feature keys have a hierarchy. For example, consider the http://tizen.org/feature/location, http://tizen.org/feature/location.gps, and http://tizen.org/feature/location.wps features:

If the feature list includes the http://tizen.org/feature/location.gps feature, only a device which has the http://tizen.org/feature/location.gps feature can show the application on the Tizen Store application list.
If the feature list includes the http://tizen.org/feature/location feature, a device which has the http://tizen.org/feature/location.gps, http://tizen.org/feature/location.wps, or http://tizen.org/feature/location feature can show the application on the Tizen Store application list. +
This means that the Tizen Store considers the http://tizen.org/feature/location feature as the http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps feature. (If the feature list includes the http://tizen.org/feature/location.gps and http://tizen.org/feature/location.wps features together, only a device which supports both those features can show the application.)

+ +

+ +

To enable filtering for your Web application, add the feature list for the application config.xml file:

To open the Web application configuration editor in the IDE, double-click the config.xml file in the Project Explorer view.
In the Feature tab, click Add.
Select a feature from the list.
Click Save.

+ +

After setting the feature information with the Web application configuration editor, you can see the added code in the Source tab.

+ +

The following example shows the setting in the config.xml file code:

+<tizen:feature name="http://tizen.org/feature/network.nfc"/>
+

+ +

The following tables show the available requirements for Tizen Web application package.

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

Table: Available requirements for mobile Web Device APIs
Feature key	Description
http://tizen.org/feature/datasync	Specify this key, if the application requires the DataSync feature.
http://tizen.org/feature/fmradio	Specify this key, if the application requires an FM radio.
http://tizen.org/feature/humanactivitymonitor	Specify this key, if the application requires any of the Human Activity Monitor features.
http://tizen.org/feature/location.batch	Specify this key, if the application requires the location tracking with a position batch information feature for using the Human Activity Monitor (GPS Type) API.
http://tizen.org/feature/network.bluetooth	Specify this key, if the application requires the Bluetooth feature.
http://tizen.org/feature/network.bluetooth.audio.media	Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).
http://tizen.org/feature/network.bluetooth.health	Specify this key, if the application requires the Bluetooth Health feature (HDP).
http://tizen.org/feature/network.bluetooth.le	Specify this key, if the application requires the Bluetooth Low Energy feature (BLE).
http://tizen.org/feature/network.nfc	Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.
http://tizen.org/feature/network.nfc.card_emulation	Specify this key, if the application requires the NFC card emulation feature.
http://tizen.org/feature/network.nfc.card_emulation.hce	Specify this key, if the application requires the NFC host-based card emulation feature.
http://tizen.org/feature/network.nfc.p2p	Specify this key, if the application requires the NFC P2P feature.
http://tizen.org/feature/network.nfc.tag	Specify this key, if the application requires the NFC tag feature.
http://tizen.org/feature/network.push	Specify this key, if the application requires the network-based push service.
http://tizen.org/feature/network.secure_element	Specify this key, if the application requires the secure element feature.
http://tizen.org/feature/network.telephony	Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.
http://tizen.org/feature/network.telephony.mms	Specify this key, if the application requires the MMS feature.
http://tizen.org/feature/network.wifi	Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.
http://tizen.org/feature/sensor.barometer	Specify this key, if the application requires a barometer sensor for using the Sensor (Pressure Type) API.
http://tizen.org/feature/sensor.heart_rate_monitor	Specify this key, if the application requires a heart rate monitor sensor for using the Human Activity Monitor (HRM Type) API.
http://tizen.org/feature/sensor.magnetometer	Specify this key, if the application requires a magnetic sensor for using the Sensor (MAGNETIC Type) API.
http://tizen.org/feature/sensor.pedometer	Specify this key, if the application requires a pedometer sensor for using the Human Activity Monitor (PEDOMETER Type) API.
http://tizen.org/feature/sensor.photometer	Specify this key, if the application requires a photometer sensor for using the Sensor (LIGHT Type) API.
http://tizen.org/feature/sensor.proximity	Specify this key, if the application requires a proximity sensor for using the Sensor (PROXIMITY Type) API.
http://tizen.org/feature/sensor.ultraviolet	Specify this key, if the application requires a ultraviolet sensor for using the Sensor (ULTRAVIOLET Type) API.
http://tizen.org/feature/sensor.wrist_up	Specify this key, if the application requires a wrist up sensor for using the Human Activity Monitor (WRIST_UP Type) API.

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

Table: Available requirements for mobile Web W3C/HTML5 APIs
Feature key	Description
http://tizen.org/feature/camera	Specify this key, if the application requires any kind of a camera for using the getUserMedia or HTML Media Capture API.
http://tizen.org/feature/location.gps	Specify this key, if the application requires the Global Positioning System (GPS) feature for using the GeoLocation API.
http://tizen.org/feature/microphone	Specify this key, if the application requires a microphone for using the getUserMedia or HTML Media Capture API.
http://tizen.org/feature/sensor.accelerometer	Specify this key, if the application requires an acceleration sensor for using the DeviceOrientation Event Specification API.
http://tizen.org/feature/sensor.gyroscope	Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.
http://tizen.org/feature/sensor.magnetometer	Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification or Screen Orientation API.
http://tizen.org/feature/speech.synthesis	Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the Web Speech API.

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

Table: Available requirements for wearable Web Device APIs
Feature key	Description
http://tizen.org/feature/download	Specify this key, if the application requires the network connection to access the Internet for using the Download API.
http://tizen.org/feature/humanactivitymonitor	Specify this key, if the application requires the Human Activity Monitor API. + If the key is declared in the config.xml file, the application can be installed on the device with any of the Human Activity Monitor features: + + HRM: http://tizen.org/feature/sensor.heart_rate_monitor + PEDOMETER: http://tizen.org/feature/sensor.pedometer + WRIST_UP: http://tizen.org/feature/sensor.wrist_up + GPS: http://tizen.org/feature/location.batch + +
http://tizen.org/feature/location.batch	Specify this key, if the application requires the location tracking with a position batch information feature.
http://tizen.org/feature/network.bluetooth	Specify this key, if the application requires the Bluetooth feature.
http://tizen.org/feature/network.bluetooth.audio.media	Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP) feature for using the Media Key API.
http://tizen.org/feature/network.bluetooth.health	Specify this key, if the application requires the Bluetooth Health feature (HDP).
http://tizen.org/feature/network.bluetooth.le	Specify this key, if the application requires the Bluetooth Low Energy feature (BLE).
http://tizen.org/feature/network.nfc	Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.
http://tizen.org/feature/network.nfc.card_emulation	Specify this key, if the application requires the NFC card emulation feature.
http://tizen.org/feature/network.nfc.card_emulation.hce	Specify this key, if the application requires the NFC host-based card emulation feature.
http://tizen.org/feature/network.nfc.p2p	Specify this key, if the application requires the NFC P2P feature.
http://tizen.org/feature/network.nfc.tag	Specify this key, if the application requires the NFC tag feature.
http://tizen.org/feature/network.push	Specify this key, if the application requires the network-based push service.
http://tizen.org/feature/network.secure_element	Specify this key, if the application requires the secure element feature.
http://tizen.org/feature/network.telephony	Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.
http://tizen.org/feature/network.wifi	Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature (for example, the Download API).
http://tizen.org/feature/sensor.barometer	Specify this key, if the application requires a barometer sensor.
http://tizen.org/feature/sensor.heart_rate_monitor	Specify this key, if the application requires a heart rate monitor sensor.
http://tizen.org/feature/sensor.magnetometer	Specify this key, if the application requires a magnetic sensor.
http://tizen.org/feature/sensor.pedometer	Specify this key, if the application requires a pedometer sensor.
http://tizen.org/feature/sensor.photometer	Specify this key, if the application requires a photometer sensor.
http://tizen.org/feature/sensor.proximity	Specify this key, if the application requires a proximity sensor.
http://tizen.org/feature/sensor.ultraviolet	Specify this key, if the application requires an ultraviolet sensor.
http://tizen.org/feature/sensor.wrist_up	Specify this key, if the application requires a wrist up sensor.

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

Table: Available requirements for wearable Web W3C/HTML5 APIs
Feature key	Description
http://tizen.org/feature/camera	Specify this key, if the application requires any kind of a camera for using the getUserMedia API.
http://tizen.org/feature/input.rotating_bezel	Specify this key, if the application requires rotating bezel input.
http://tizen.org/feature/location.gps	Specify this key, if the application requires the Global Positioning System (GPS) feature for using the GeoLocation API.
http://tizen.org/feature/microphone	Specify this key, if the application requires a microphone for using the getUserMedia API.
http://tizen.org/feature/network.internet	Specify this key, if the application requires Internet access for using the WebSocket API, XMLHttpRequest Level 1, or Cross-Origin Resource Sharing API.
http://tizen.org/feature/screen.shape.circle	Specify this key, if the application requires a circle-shaped screen.
http://tizen.org/feature/screen.shape.rectangle	Specify this key, if the application requires a rectangle-shaped screen.
http://tizen.org/feature/sensor.accelerometer	Specify this key, if the application requires an acceleration sensor for using the DeviceOrientation Event Specification API.
http://tizen.org/feature/sensor.gyroscope	Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.
http://tizen.org/feature/speech.synthesis	Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the Web Speech API.

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

Table: Available requirements for wearable Web Supplementary APIs
Feature key	Description
http://tizen.org/feature/media.audio_recording	Specify this key, if the application requires the audio recording functionality of the device for using the Camera API (Tizen Extension) (Audio Recording) API.
http://tizen.org/feature/media.image_capture	Specify this key, if the application requires the image capture functionality of the device for using the Camera API (Tizen Extension) (Image Recording) API.
http://tizen.org/feature/media.video_recording	Specify this key, if the application requires the video recording functionality of the device for using the Camera API (Tizen Extension) (Video Recording) API.

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

Table: Available requirements for wearable Web Runtime
Feature key	Description
http://tizen.org/feature/web.service	Specify this key, if the application requires the Web service application feature.

+ +

+ +

The following table lists the Tizen profiles and related profile name attributes.

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

Table: Tizen profiles and profile name attributes
Tizen profile	Profile name attribute
Mobile	mobile
Wearable	wearable
TV	TV

+ +

In a Web application, the profile name element can be added to the config.xml file as follows:

+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" ... >
+<tizen:profile name="mobile"/>
+<!--OR-->
+<tizen:profile name="wearable"/>
+

+ +

+ + + + +

+ +

+ + + + + + + + diff --git a/org.tizen.gettingstarted/html/web/details/details_w.htm b/org.tizen.gettingstarted/html/web/details/details_w.htm new file mode 100644 index 0000000..cf78fde --- /dev/null +++ b/org.tizen.gettingstarted/html/web/details/details_w.htm @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + Understanding Tizen Programming + + + + + + +

+ +

When designing Tizen Web applications, you need to take into account the following programming concepts:

Tizen APIs
Security and API Privileges
Application Filtering
Web Runtime
Event Handling (in wearable applications only)

+ +

+ +

+ + +

+ +

Figure: Tizen architecture

+ +

Tizen architecture

+ +

The Tizen architecture consists of the following subsystems:

+ +

Web framework +
The Web framework accommodates and leverages most up-to-date Web technologies. It provides a large number of HTML5 functionalities defined by W3C and other standardization groups, such as video, audio, form, 2D canvas, WebGL, CSS3, geolocation, vibration, Web socket, and Web worker. In addition, the framework defines various new device APIs, which enable you to access device functionalities, such as Bluetooth, near field communication (NFC), alarm, and messaging. The device functionalities are provided with a strict rule-based security control system that restricts the malicious use of the device APIs.

Native framework +

The native framework is composed of system services and a set of native modules across various domains, with which native applications can be developed. The modules include, for example, Base, Application framework, Security, UI, Network, Messaging, Social, Locations, and Web. The framework also provides popular standard open source libraries, such as eglibc, libstdc++, libxml2, OpenAL, and OpenMP®, to support efficient application development and the migration of pre-existing applications using such libraries.

+ + + + + + + + + + +

Note
Only a selected set of APIs in the native framework are native APIs. This means that native applications must use the listed native APIs in the API Reference which are managed by API maintainers in the Tizen project.

Kernel +
The kernel layer contains the Linux kernel and device drivers.

+ + + + +

+ +

+ + + + + + + + diff --git a/org.tizen.gettingstarted/html/web/details/event_handling_w.htm b/org.tizen.gettingstarted/html/web/details/event_handling_w.htm new file mode 100644 index 0000000..23b7bd0 --- /dev/null +++ b/org.tizen.gettingstarted/html/web/details/event_handling_w.htm @@ -0,0 +1,172 @@ + + + + + + + + + + + + + + Event Handling + + + + + + +

+ +

+ +

The Tizen platform supports event handling for user interactions. To provide a full user experience for your application users, you must handle various events in your application.

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

+ +

The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called detent. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.

+ +

Figure: Rotary device

Rotary device

Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.

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

Table: Rotary events
Type	Description	Attribute
rotarydetent	Event is triggered when a device detects the detent point.	detail.direction: the rotation direction. + The available values are CW for clockwise and CCW for counter-clockwise rotation.

+ +

To bind an event callback on rotary events, use the following code:

+document.addEventListener("rotarydetent", function(ev) 
+{
+   var direction = ev.detail.direction; 
+   /* Add behavior for detent detected event with a direction value */
+});
+

+ +

+ +

In low-powered wearable devices, the Tizen platform supports an ambient mode for watch applications. When the device enables the ambient mode, the Tizen watch application displayed on an idle screen can show a limited UI to reduce power consumption. The watch application also receives a tick event every minute in the ambient mode.

+ +

The limits of the UI in the ambient mode depend on the device. When designing the ambient mode UI, you achieve optimal results by drawing only a black and white UI and using less than 20% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the ambient_support attribute to disable in the config.xml file. In this case, the platform shows the default ambient mode UI.

+ +

The following table describes the ambient mode events.

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

Table: Ambient events

Type

Description

Attribute

ambientmodechanged

Event is triggered when a device enables or disables the ambient mode.

detail.ambientMode: the status of the mode. +

The available values are true when the ambient mode is enabled and false when the ambient mode is disabled.

timetick

Event is triggered once a minute while the device is in the ambient mode to notify the application that it can update its UI. + + + + + + + + + +

Note
The http://tizen.org/privilege/alarm privilege must be set to get timetick events.

+ + + +

To bind an event callback on ambient events, use the following code:

+document.addEventListener("ambientmodechanged", function(ev) 
+{
+   var mode = ev.detail.ambientMode; 
+   if (mode == true) 
+   {
+      /* Change the UI for ambient mode */
+   } 
+   else 
+   {
+      /* Change the UI for normal mode */
+   }
+});
+
+document.addEventListener("timetick", function(ev) 
+{
+   /* Update the UI */ 
+});
+

+ + + + + +

+ +

+ + + + + + + + diff --git a/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm b/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm new file mode 100644 index 0000000..f800843 --- /dev/null +++ b/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm @@ -0,0 +1,690 @@ + + + + + + + + + + + + + + Security and API Privileges + + + + + + + +

+ +

+ +

The Tizen IDE also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see Privilege Checker.

+ +

The following tables list the API privileges, which you must to declare when using security-sensitive API modules.

Table: Mobile Web Device API privileges
Privilege	Level	Display name	Description
http://tizen.org/privilege/account.read	public	Reading accounts	The application can read accounts.
http://tizen.org/privilege/account.write	public	Managing accounts	The application can create, edit, and delete accounts.
http://tizen.org/privilege/alarm	public	Setting alarms	The application can set alarms and wake up the device at scheduled times.
http://tizen.org/privilege/application.info	public	Retrieving application information	The application can retrieve information related to other applications.
http://tizen.org/privilege/application.launch	public	Opening applications	The application can open other applications using the application ID or application control.
http://tizen.org/privilege/appmanager.certificate	partner	Getting application certificates	The application can retrieve specified application certificates.
http://tizen.org/privilege/appmanager.kill	partner	Closing applications	The application can close other applications.
http://tizen.org/privilege/bluetooth.admin	public	Managing Bluetooth general settings	The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name.
http://tizen.org/privilege/bluetooth.gap	public	Using Bluetooth GAP	The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices.
http://tizen.org/privilege/bluetooth.health	public	Using Bluetooth HDP	The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information.
http://tizen.org/privilege/bluetooth.spp	public	Using Bluetooth SPP	The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data.
http://tizen.org/privilege/bluetoothmanager	platform	Managing Bluetooth system settings	The application can change Bluetooth system settings related to privacy and security, such as the visibility mode.
http://tizen.org/privilege/bookmark.read	platform	Reading bookmarks	The application can read bookmarks.
http://tizen.org/privilege/bookmark.write	platform	Managing bookmarks	The application can create, edit, and delete bookmarks.
http://tizen.org/privilege/calendar.read	public	Reading calendar	The application can read events and tasks.
http://tizen.org/privilege/calendar.write	public	Managing calendar	The application can create, update, and delete events and tasks.
http://tizen.org/privilege/call	public	Making phone calls	The application can make phone calls to numbers when they are tapped without further confirmation.
http://tizen.org/privilege/callhistory.read	public	Reading call logs	The application can read call log items.
http://tizen.org/privilege/callhistory.write	public	Managing call logs	The application can create, update, and delete call log items.
http://tizen.org/privilege/contact.read	public	Reading contacts	The application can read your profile, contacts, and contact history. Contact history can include social network activity.
http://tizen.org/privilege/contact.write	public	Managing contacts	The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.
http://tizen.org/privilege/content.read	public	Reading contents	The application can read media content information.
http://tizen.org/privilege/content.write	public	Managing contents	The application can create, update, and delete media content information.
http://tizen.org/privilege/datacontrol.consumer	public	Accessing exported data	The application can read data exported by data control providers.
http://tizen.org/privilege/datasync	public	Syncing device data	The application can synchronize device data, such as contacts and calendar events, using the OMA DS 1.2 protocol.
http://tizen.org/privilege/download	public	Downloading via HTTP	The application can manage HTTP downloads.
http://tizen.org/privilege/filesystem.read	public	Reading file systems	The application can read file systems.
http://tizen.org/privilege/filesystem.write	public	Writing to file systems	The application can write to file systems.
http://tizen.org/privilege/healthinfo	public	Reading health related information	The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.
http://tizen.org/privilege/internet	public	Accessing Internet	The application can access the Internet.This can result in additional charges depending on the user's payment plan.
http://tizen.org/privilege/location	public	Using user location	The application can read the user's location information.
http://tizen.org/privilege/messaging.read	public	Accessing messages	The application can retrieve messages from message boxes or receive messages.
http://tizen.org/privilege/messaging.write	public	Writing messages	The application can write, send, sync, and remove text messages, multimedia messages, and emails.
http://tizen.org/privilege/networkbearerselection	partner	Selecting network connection	The application can request and release a specific network connection.
http://tizen.org/privilege/nfc.admin	public	Managing NFC general settings	The application can change NFC settings, such as turning NFC on or off.
http://tizen.org/privilege/nfc.cardemulation	public	Using NFC card emulation mode	The application can access smart card details, such as credit card details, and allow users to make payments via NFC.
http://tizen.org/privilege/nfc.common	public	Using NFC common features	The application can use NFC common features.
http://tizen.org/privilege/nfc.p2p	public	Pushing NFC messages	The application can push NFC messages to other devices.
http://tizen.org/privilege/nfc.tag	public	Reading/writing to NFC tags	The application can read and write NFC tag information.
http://tizen.org/privilege/notification	public	Providing notifications	The application can show and hide its own notifications and badges.
http://tizen.org/privilege/package.info	public	Receiving package information	The application can retrieve information about installed packages.
http://tizen.org/privilege/packagemanager.install	platform	Managing packages	The application can install or uninstall application packages.
http://tizen.org/privilege/power	public	Managing power	The application can control power-related settings, such as dimming the screen.
http://tizen.org/privilege/push	public	Receiving push notifications	The application can receive notifications from the Internet.
http://tizen.org/privilege/secureelement	public	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/setting	public	Accessing user settings	The application can change and read user settings.
http://tizen.org/privilege/system	public	Reading system information	The application can read system information.
http://tizen.org/privilege/systemmanager	partner	Reading secure system information	The application can read secure system information.
http://tizen.org/privilege/volume.set	public	Adjusting volume	The application can adjust the volume for different features, such as notification alerts, ringtones, and media.
http://tizen.org/privilege/websetting	public	Managing web application settings	The application can change its Web application settings, including deleting cookies.

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

Table: Mobile Web W3C/HTML5 API privileges
Privilege	Level	Description
http://tizen.org/privilege/internet	public	The application can access the Internet using the WebSocket, XMLHttpRequest Level 2, Server-Sent Events, HTML5 Application caches, and Cross-Origin Resource Sharing APIs.
http://tizen.org/privilege/mediacapture	public	The application can manipulate streams from cameras and microphones using the getUserMedia API. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. + In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.
http://tizen.org/privilege/unlimitedstorage	public	The application can use the storage with unlimited size with the File API: Directories and System, File API: Writer, Indexed Database, and Web SQL Database APIs. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used. + In the remote domain, pop-up user prompt is used.
http://tizen.org/privilege/notification	public	The application can display simple notifications using the Web Notifications API. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used. + In the remote domain, pop-up user prompt is used.
http://tizen.org/privilege/location	public	The application can access geographic locations using the Geolocation API. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. + In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.

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

Table: Mobile Web Supplementary API privileges
Privilege	Level	Description
http://tizen.org/privilege/fullscreen	public	The application can display in the full-screen mode using the FullScreen API - Mozilla API. + Privilege behavior: + If this privilege is defined, permission is granted without user interaction. Otherwise, permission is granted by user interaction.

Table: Wearable Web Device API privileges
Privilege	Level	Display name	Description
http://tizen.org/privilege/alarm	public	Setting alarms	The application can set alarms and wake up the device at scheduled times.
http://tizen.org/privilege/application.info	public	Retrieving application information	The application can retrieve information related to other applications.
http://tizen.org/privilege/application.launch	public	Opening applications	The application can open other applications using the application ID or application control.
http://tizen.org/privilege/appmanager.certificate	partner	Getting application certificates	The application can retrieve specified application certificates.
http://tizen.org/privilege/appmanager.kill	partner	Closing applications	The application can close other applications.
http://tizen.org/privilege/call	public	Making phone calls	The application can make phone calls to numbers when they are tapped without further confirmation.
http://tizen.org/privilege/content.read	public	Reading contents	The application can read media content information.
http://tizen.org/privilege/content.write	public	Managing contents	The application can create, update, and delete media content information.
http://tizen.org/privilege/download	public	Downloading via HTTP	The application can manage HTTP downloads.
http://tizen.org/privilege/filesystem.read	public	Reading file systems	The application can read file systems.
http://tizen.org/privilege/filesystem.write	public	Writing to file systems	The application can write to file systems.
http://tizen.org/privilege/healthinfo	public	Reading health related information	The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.
http://tizen.org/privilege/location	public	Using user location	The application can read the user's location information.
http://tizen.org/privilege/nfc.admin	public	Managing NFC general settings	The application can change NFC settings, such as turning NFC on or off.
http://tizen.org/privilege/nfc.cardemulation	public	Using NFC card emulation mode	The application can access smart card details, such as credit card details, and allow users to make payments via NFC.
http://tizen.org/privilege/nfc.common	public	Using NFC common features	The application can use NFC common features.
http://tizen.org/privilege/nfc.p2p	public	Pushing NFC messages	The application can push NFC messages to other devices.
http://tizen.org/privilege/nfc.tag	public	Reading/writing to NFC tags	The application can read and write NFC tag information.
http://tizen.org/privilege/notification	public	Providing notifications	The application can show and hide its own notifications and badges.
http://tizen.org/privilege/package.info	public	Receiving package information	The application can retrieve information about installed packages.
http://tizen.org/privilege/packagemanager.install	platform	Managing packages	The application can install or uninstall application packages.
http://tizen.org/privilege/power	public	Managing power	The application can control power-related settings, such as dimming the screen.
http://tizen.org/privilege/push	public	Receiving push notifications	The application can receive notifications from the Internet.
http://tizen.org/privilege/secureelement	public	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/setting	public	Accessing user settings	The application can change and read user settings.
http://tizen.org/privilege/system	public	Reading system information	The application can read system information.
http://tizen.org/privilege/systemmanager	partner	Reading secure system information	The application can read secure system information.
http://tizen.org/privilege/volume.set	public	Adjusting volume	The application can adjust the volume for different features, such as notification alerts, ringtones, and media.

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

Table: Wearable Web W3C/HTML5 API privileges
Privilege	Level	Description
http://tizen.org/privilege/internet	public	The application can access the Internet using the WebSocket, XMLHttpRequest Level 1, and Cross-Origin Resource Sharing APIs.
http://tizen.org/privilege/mediacapture	public	The application can manipulate streams from cameras and microphones using the getUserMedia API. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. + In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.
http://tizen.org/privilege/unlimitedstorage	public	The application can use the storage with unlimited size with the Indexed Database API. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used. + In the remote domain, pop-up user prompt is used.
http://tizen.org/privilege/location	public	The application can access geographic locations using the Geolocation API. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. + In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.

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

Table: Wearable Web Supplementary API privileges
Privilege	Level	Description
http://tizen.org/privilege/camera	public	The application can capture video and image on a target device using the Camera API (Tizen Extension) (Video Recording and Image Capture) API. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. + In the remote domain, execution is blocked.
http://tizen.org/privilege/audiorecorder	public	The application can record an audio stream on a target device using the Camera API (Tizen Extension) (Audio Recording) API. + Privilege behavior: + In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked. + In the remote domain, execution is blocked.

+ + + +

+ +

+ + + + + + + + diff --git a/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm b/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm new file mode 100644 index 0000000..b2624ee --- /dev/null +++ b/org.tizen.gettingstarted/html/web/details/tizen_apis_w.htm @@ -0,0 +1,554 @@ + + + + + + + + + + + + + + Tizen APIs + + + + + + +

+ +

+ +

Tizen provides a wide range of Web API modules that allow you to take full advantage of various Tizen features.

The following table lists the features provided by the Mobile Web Device API Reference.

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

+ Table: Device API features provided for mobile applications +
Feature	Purpose	Documentation
Tizen	This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API. + You can use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.	+ + Guides: Tizen + Tutorials: Tizen + API Reference: Tizen +
Application	These APIs contain classes and interfaces that enable you to manage alarm, application, and package features. + You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.	+ + Guides: Application + Tutorials: Application + API Reference: Application +
Communication	These APIs contain classes and interfaces that enable you to manage Bluetooth, messaging, NFC (Near Field Communication), push, and secure element features. + You can transfer data over a Bluetooth connection, send and receive messages, share contacts, photos, and videos using NFC, receive push notifications from a push server, and access secure elements, such as SIM card and secure SD card, in a device.	+ + Guides: Communication + Tutorials: Communication + API Reference: Communication +
Content	These APIs contain classes and interfaces that enable you to manage content and download features. + You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.	+ + Guides: Content + Tutorials: Content + API Reference: Content +
Input/Output	These APIs contain classes and interfaces that enable you to manage file system and message port features. + You can access specific parts of the device file system, archive files, and send and receive messages through message ports.	+ + Guides: Input/Output + Tutorials: Input/Output + API Reference: Input/Output +
Multimedia	These APIs contain classes and interfaces that enable you to manage multimedia-related features. + You can change and monitor playback volume level, and react to dedicated multimedia key presses.	+ + Guides: Multimedia + Tutorials: Multimedia + API Reference: Multimedia +
Social	These APIs contain classes and interfaces that enable you to manage bookmark, calendar, call history, contact, and data synchronization features. + You can manage the Tizen Web browser bookmark list, calendar events and tasks, call history, and address books and contacts on a device, and you can synchronize device data, such as contacts and calendar events, with the OMA DS server.	+ + Guides: Social + Tutorials: Social + API Reference: Social +
System	These APIs contain classes and interfaces that enable you to manage power, system information and setting, time, and Web setting features. + You can access the state of the device power resource, device system information, and device wallpaper settings, and you can use locale-specific calendar features by retrieving date and time information. You can manage time features, and set Web view properties, such as setting Web view user agents and deleting Web view cookies.	+ + Guides: System + Tutorials: System + API Reference: System +
User Interface	These APIs contain classes and interfaces that enable you to manage badge and notification features. + You can manage and monitor badge numbers, and create and manage notifications about application events.	+ + Guides: User Interface + Tutorials: User Interface + API Reference: User Interface +
Web UI Framework	These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features. + You can create and manage various kinds of UI widgets.	+ + Guides: Web UI Framework (UIFW) + Tutorials: Web UI Framework (UIFW) + API Reference: Web UI Framework +

+ +

The following table lists the features provided by the Wearable Web Device API Reference.

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

+ Table: Device API features provided for wearable applications +
Feature	Purpose	Documentation
Tizen	This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API. + You can use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.	+ + Guides: Tizen + Tutorials: Tizen + API Reference: Tizen +
Application	These APIs contain classes and interfaces that enable you to manage alarm, application, and package features. + You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.	+ + Guides: Application + Tutorials: Application + API Reference: Application +
Communication	These APIs contain classes and interfaces that enable you to manage Bluetooth, NFC (Near Field Communication), push, and secure element features. + You can transfer data over a Bluetooth connection, share contacts, photos, and videos using NFC, receive push notifications from a push server, and access secure elements, such as SIM card and secure SD card, in a device.	+ + Guides: Communication + Tutorials: Communication + API Reference: Communication +
Content	These APIs contain classes and interfaces that enable you to manage content and download features. + You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.	+ + Guides: Content + Tutorials: Content + API Reference: Content +
Input/Output	These APIs contain classes and interfaces that enable you to manage file system and message port features. + You can access specific parts of the device file system, archive files, and send and receive messages through message ports.	+ + Guides: Input/Output + Tutorials: Input/Output + API Reference: Input/Output +
Multimedia	These APIs contain classes and interfaces that enable you to manage multimedia-related features. + You can change and monitor playback volume level, and react to dedicated multimedia key presses.	+ + Guides: Multimedia + Tutorials: Multimedia + API Reference: Multimedia +
System	These APIs contain classes and interfaces that enable you to manage power, system information and setting, and time features. + You can access the state of the device power resource, device system information, and device wallpaper settings, and you can use locale-specific calendar features by retrieving date and time information. You can also manage time features.	+ + Guides: System + Tutorials: System + API Reference: System +
User Interface	These APIs contain classes and interfaces that enable you to manage badge and notification features. + You can manage and monitor badge numbers, and create and manage notifications about application events.	+ + Guides: User Interface + Tutorials: User Interface + API Reference: User Interface +
Web UI Framework	These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features. + You can create and manage various kinds of UI widgets.	+ + Guides: Web UI Framework (UIFW) + Tutorials: Web UI Framework (UIFW) + API Reference: Web UI Framework +

+ +

The following table lists the features provided by the Mobile Web W3C/HTML5 and Supplementaries API Reference.

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

+ Table: W3C/HTML5 and some supplementary API features provided for mobile applications +
Feature	Purpose	Documentation
DOM, Forms and Styles	These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible and multi-column layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.	+ + Guides: DOM, Forms and Styles + Tutorials: DOM, Forms and Styles + API Reference: DOM, Forms and Styles +
Device	These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, manage screen orientation, implement and control various types of touch events, and implement different vibration patterns on a Tizen device.	+ + Guides: Device + Tutorials: Device + API Reference: Device +
Graphics	These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context, and create and modify SVG elements in your application.	+ + Guides: Graphics + Tutorials: Graphics + API Reference: Graphics +
Media	These APIs enable you to access a local device to generate a multimedia stream, access the media capture capabilities based on their type, control multimedia playback and check supported media formats, and play audio content.	+ + Guides: Media + Tutorials: Media + API Reference: Media +
Communication	These APIs enable you to send and receive data between Web sites and through a message channel, exchange push data with the server, connect to the socket server to send and receive data, and use cross-origin resource sharing (CORS) to request and send data of various content types.	+ + Guides: Communication + Tutorials: Communication + API Reference: Communication +
Storage	These APIs enable you to retrieve file content and information, slice data objects, manage sandboxed file systems, activate project resource caching and manage the cached resources, create an object store and save data in it, create databases and access them using SQL statements, and use session storage and local storage.	+ + Guides: Storage + Tutorials: Storage + API Reference: Storage +
Security	These APIs enable you to allow or block specific HTML elements on a Web page, and make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.	+ + Guides: Security + Tutorials: Security + API Reference: Security +
UI	These APIs enable you to copy content and paste it in an editable area, create and manage draggable elements, and implement drag events.	+ + Guides: UI + Tutorials: UI + API Reference: UI +
Performance and Optimization	These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.	+ + Guides: Performance and Optimization + Tutorials: Performance and Optimization + API Reference: Performance and Optimization +
Location	These APIs enable you to retrieve and update position information.	+ + Guides: Location + Tutorials: Location + API Reference: Location +
Supplementary	These APIs enable you to manage some supplementary features, such as displaying an element on full screen, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.	+ + Guides: Supplementary Features + Tutorials: Supplementary Features + API Reference: Supplementary +

+ + +

The following table lists the features provided by the Wearable Web W3C/HTML5 and Supplementaries API Reference.

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

+ Table: W3C/HTML5 and some supplementary API features provided for wearable applications +
Feature	Purpose	Documentation
DOM, Forms and Styles	These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.	+ + Guides: DOM, Forms and Styles + Tutorials: DOM, Forms and Styles + API Reference: DOM, Forms and Styles +
Device	These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, implement and control various types of touch events, and implement different vibration patterns on a Tizen wearable device.	+ + Guides: Device + Tutorials: Device + API Reference: Device +
Graphics	These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context.	+ + Guides: Graphics + Tutorials: Graphics + API Reference: Graphics +
Media	These APIs enable you to access a local device to generate a multimedia stream, control multimedia playback and check supported media formats, and play audio content.	+ + Guides: Media + Tutorials: Media + API Reference: Media +
Communication	These APIs enable you to send and receive data between Web sites and through a message channel, and connect to the socket server to send and receive data.	+ + Guides: Communication + Tutorials: Communication + API Reference: Communication +
Storage	These APIs enable you to retrieve file content and information, create an object store and save data in it, and use session storage and local storage.	+ + Guides: Storage + Tutorials: Storage + API Reference: Storage +
Security	These APIs enable you to allow or block specific HTML elements on a Web page.	+ + Guides: Security + Tutorials: Security + API Reference: Security +
Performance and Optimization	These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.	+ + Guides: Performance and Optimization + Tutorials: Performance and Optimization + API Reference: Performance and Optimization +
Location	These APIs enable you to retrieve and update position information.	+ + Guides: Location + Tutorials: Location + API Reference: Location +
Supplementary	These APIs enable you to manage some supplementary features, such as managing the device camera, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.	+ + Guides: Supplementary Features + Tutorials: Supplementary Features + API Reference: Supplementary +

+ + + +

+ +

+ + + + + + + + diff --git a/org.tizen.gettingstarted/html/details/web_runtime_w.htm b/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm similarity index 88% rename from org.tizen.gettingstarted/html/details/web_runtime_w.htm rename to org.tizen.gettingstarted/html/web/details/web_runtime_w.htm index 7be9ba3..44a2c9f 100644 --- a/org.tizen.gettingstarted/html/details/web_runtime_w.htm +++ b/org.tizen.gettingstarted/html/web/details/web_runtime_w.htm @@ -3,13 +3,13 @@ - - - - - - - + + + + + + + Web Runtime @@ -17,9 +17,9 @@ -

@@ -49,10 +49,10 @@

Packaged Web applications

Hosted Web applications

All Web applications must be packaged according to Widget Packaging and XML Configuration guidelines. However, unlike packaged Web applications, the hosted Web applications have an externally hosted document as their starting page. For more information, see Extending Configuration Elements.

You can manage Web applications by:

Installing Web applications
To install a Web application, see the guidelines for processing a widget package. After the installation is completed, the WRT sends a notification of the result.

The Web Runtime also registers the Web application on the device's idle screen. It uses an icon and Web application name derived according to Web widget packaging rules.
+
- Installing Web applications
  To install a Web application, see the guidelines for processing a Web application package. After the installation is completed, the WRT sends a notification of the result.
  
  The Web Runtime also registers the Web application on the device's idle screen. It uses an icon and Web application name derived according to Web application packaging rules.
  
  If a Web application installation fails due to power failure, the Web Runtime reinstalls it during next booting. The Web Runtime aborts the installation in the following situations:

To access the host page of your Web application, add the domain for access in the config.xml file. For more information, see Content Security Policy.

The Web Runtime also supports the following features:

Widget Interface

<feature>The Web application security consists of the following elements:

Widget Signature
Web Application Signature
Web Application Protection
Private Storage Support
HTML5 API Security Policy
Tizen Device API Security Policy
Content Security Policy
Content Security Policy

The Web Runtime follows the XML digital widget signature process:

Web application can be signed by the author and distributors.

For Web applications that explicitly turn on encryption using the <tizen:setting /> element in the configuration file, the Web Runtime provides the following protection features:

HTML, JavaScript, and CSS files of the Web application stored by the device are encrypted.
When the Web application is launched, the WRT decrypts all of its resources in a manner which is transparent to the Web application itself.

<feature>Tizen Device API Security Policy -

Web Runtime also provides access to sensitive Device API features after consulting the platform-defined security policy. A Web application or an individual user cannot elevate the permissions set by the platform-defined security policy. The mapping between each Tizen Device API and the corresponding privilege is defined in the API definitions in the Tizen Device API Reference.

The following table summarizes distributor signature type to API privilege level behavior mapping:

@@ -240,7 +240,7 @@ The <feature>

The Web applications can mitigate various kinds of content injection vulnerabilities, such as cross-site scripting (XSS). The content security policy (CSP) is a declarative policy that lets the author or server administrator of a Web application inform the client from where the application expects to load resources. To mitigate XSS, for example, a Web application can declare from where it expects to load scripts, allowing the client to detect and block malicious scripts injected into the application by an attacker.

Web application configuration can include 1 or more <tizen:content-security-policy>, <tizen:content-security-policy-report-only>, or <tizen:allow-navigation> element. If these are included, the Web application is set to the CSP-based security mode.

@@ -277,11 +277,11 @@ The <feature> - - + + -

diff --git a/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm b/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm new file mode 100644 index 0000000..dcfc861 --- /dev/null +++ b/org.tizen.gettingstarted/html/web/first_app/first_app_w.htm @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + Creating Your First Tizen Application + + + + + + +

+ +

+ + +

+ +

This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen Web application development process as well as using the Tizen SDK and installing the created application on the Emulator or target device.

When you are developing a more complex application, you can take advantage of the tools included in the SDK to ease the tasks of creating functionality and designing the application UI.

Creating the HelloWorld Project +
1. Launch the Tizen IDE.
2. Create the application project in the IDE.
  During the project creation, use the basic Tizen project template: in the New Tizen Web Project window, select Template > Tizen > Basic > Basic Application.
3. Define helloworld as the name of your project and click Finish.
The new helloworld project is shown in the Project Explorer view of the IDE, with default content in the config.xml file as well as in several project folders, including:
+
- css folder: CSS files directory
- js folder: JavaScript files directory
- config.xml file: Application configuration file
- icon.png file: Icon file
- index.html file: Default HTML file
Configuring the Application and Creating the Application Code
The Web project source files already contain the basic application functionality.

The automatically-included code creates an application with the title "Application Name". To change the title to HelloWorld, take the following steps (illustrated in the following figure):
+
1. Open index.html (1).
2. Select the title (2).
3. Locate the title in the code and change "Application Name" into "HelloWorld" (3).
Figure: HelloWorld project

You also have various options to set the application configuration using the config.xml file and design the application UI.
Building and Packaging the Application
After you have finished implementing your application, you must build it.

After building, the Tizen IDE automatically packages the project by creating a .wgt file.
Running and Debugging the Application on the Emulator
You can run the HelloWorld application on the Emulator, Simulator, or real target device.
The following figure shows the Web application running in the Emulator.

Figure: Running the project

On a real target device, you can use the Web Inspector tool to debug the application.

+ +

+ +

This tutorial demonstrates how you can create a simple HelloWorld application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web application development process and use the Tizen SDK, installing the created application on the Emulator or a target device.

When developing a more complex application, you can take advantage of the tools included in the SDK to make creating functionality and designing the application UI easier.

+ +

Creating the HelloWorld Project +
1. Launch the Tizen IDE.
2. Create the application project in the IDE.
  To use the Wearable UI project template, in the New Tizen Wearable Web Project window, select Template > Wearable UI > Basic Application.
3. Define HelloWorld as the name of your project and click Finish.
+
Figure: Creating the HelloWorld project

+ +
The new HelloWorld project is shown in the Project Explorer view of the IDE, with default content in the config.xml file as well as in several project folders, including:
+
- css folder: CSS file directory
- js folder: JavaScript file directory
- lib folder: Tizen wearable UI framework directory +
  - lib/tau/themes/black/tau.min.css: Release version of the Tizen wearable UI theme
  - lib/tau/js/tau.min.js: Release version of the Tizen wearable UI library
  - lib/tau/themes/black/tau.css: Debug version of the Tizen wearable UI theme
  - lib/tau/js/tau.js: Debug version of the Tizen wearable UI library
  +
- config.xml: Application configuration file
- icon.png: Icon file
- index.html: Default HTML file
Configuring the Application and Creating the Application Code +
The Web project source files already contain the basic application functionality.
+
1. Open the index.html file (1).
2. Set the viewport meta tag (2).
3. Add the tau.min.css file (3). +
  If you created your application project using the Wearable UI template, the link already exists in the index.html file.
4. Add a link to the tau.min.js file in the script element (4). +
  If you created your application project using the Wearable UI template, the link already exists in the index.html file.
+ +
Figure: index.html file

+ + +
You have various options to set the application configuration using the config.xml file and code the application features.
Creating a Layout using the Wearable UI Theme
In the Wearable UI, each scene is named a page. When you include the ui-page class attribute in a <div> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.
+
For more information about the Tizen wearable UI layout and components, see Tizen Wearable Web UI Framework Reference.
Building and Packaging the Application +
When you have finished implementing your application, you must build it.

After building, the Tizen IDE automatically packages the project by creating a .wgt package file.
Running and Debugging the Application on the Emulator
You can run the HelloWorld application on the Emulator or a real target device.
The following figure shows the Web application running in the Emulator.
+ +
Figure: Running the project

+ +
On a real target device, you can use the Web Inspector tool to debug the application.

+ + + +

+ +

+ + + + + + + + diff --git a/org.tizen.gettingstarted/html/process/app_dev_process_w.htm b/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm similarity index 74% rename from org.tizen.gettingstarted/html/process/app_dev_process_w.htm rename to org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm index b716d09..fa4edd7 100644 --- a/org.tizen.gettingstarted/html/process/app_dev_process_w.htm +++ b/org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm @@ -3,22 +3,22 @@ - - - - - - - + + + + + + + Web Application Development Process -

@@ -45,42 +45,31 @@

The following figure illustrates the process of developing a Tizen Web application. Tizen provides the tools required to manage your application's life-cycle from product conception, through development and release, to end-of-life application retirement.

Figure: Web application development process

Web application development process

To develop an application with Tizen:

The first step in creating a Tizen Web application is planning and designing it using the design tools of your choice.

For information on planning and designing your applications, see Tizen Web Guides and Tizen Web API References.

Once you have finished the application plan and design, you are ready to create the application project.

After you have planned and designed your application, you are ready to create the application project in the Tizen IDE. You can also create a UI Builder project, which enables you to design your application with the UI Builder.

When creating the application project, use an applicable project template or sample. Based on the selection, the Project Wizard automatically creates basic functionalities that the application has to implement to be able to run. You can select from a variety of templates and samples. You can also create custom user templates.

After you have planned and designed your application, you are ready to create the application project in the Tizen IDE.

When creating the application project, use an applicable project template or sample. Based on the selection, the Tizen Web Project Wizard automatically creates basic functionalities that the application has to implement to be able to run. You can select from a variety of templates and samples. You can also create custom user templates.

After creating the application project, you can configure the properties of the project and the widget to achieve the required functionality and features for your application.

After creating the application project, you can configure the properties of the project and the Web application to achieve the required functionality and features for your application.

You can design and create the application UI (user interface) with UI Builder.

UI Builder is included in the Tizen SDK, and functions as a WYSIWYG (What You See Is What You Get) design environment for creating UIs for Web applications.

- - - - - - - - - -

Note
You can also design the application UI using the widgets defined in the Web UI Framework Reference.

You can design the application UI using the widgets defined in the Web UI Framework Reference.

Code your application in the IDE using the APIs defined in the Web API References.

Once you have finished coding your application, you are ready to build your application.

@@ -90,7 +79,7 @@

JavaScript
CSS

Compile for: -

Coffeescript

Coffeescript
Less

About the output files: -

Compiled coffeescript output file name is <file name>.js. This file is used when the project is packed to the WGT package file, but the script tag's reference path must be changed manually.
Compiled less output file name is <file name>.css. This file is used when the project is packed to the WGT package file, but the script tag's reference path must be changed manually.

If the project has errors, they are shown in the Problems and Project Explorer views after the build.

You can build a widget automatically or manually:

You can build a Web application automatically or manually:

Automatic build:
In the IDE menu, select Project > Build Automatically.

If you select this option, whenever the source or a resource is changed and saved, the IDE automatically recognizes any saved changes and rebuilds the project source.
Manual build:
In the IDE menu, select Project > Build Project.

You can build your project at your convenience. If you want to use the manual build, ensure that the Project > Build Automatically option is not selected.

To customize a widget, set the build properties:

To customize the application, set the build properties:

JS validation
Set the options in the IDE menu: Window > Preferences > Tizen SDK > Web > Editor > JavaScript Editor.
CSS validation @@ -152,7 +141,7 @@
You can run the application smartly:
- You can use the Rapid Development Support (RDS) mode to run or test faster.
- You can use the live editing mode to test faster (debug mode does not support it).
-
For more information about the debugging process and tools, see Debugging Widgets.
+
For more information about the debugging process and tools, see Debugging Web Applications.

Packaging the Application
@@ -165,10 +154,10 @@
Make up resources (for hybrid core, font, and UI framework applications).
Handle signing.

Web application packaging process is based on the W3C packaging and configuration.

You can package a widget using the web-packaging command in the Command Line Interface (CLI), which is an IDE functional tool in the Tizen SDK:

You can package a Web application using the web-packaging command in the Command Line Interface (CLI), which is an IDE functional tool in the Tizen SDK:

web-packaging project.wgt project/

The Tizen Web SDK provides the functionality to package a widget quickly in the required format and to set the package properties.

The Tizen Web SDK provides the functionality to package a Web application quickly in the required format and to set the package properties.

You can set the package properties in IDE > Project > Properties > Tizen SDK > Package by selecting the resources to be included in the package. For a Web application, you can set the properties in IDE > Project > Properties > Tizen SDK > Package > Web:

You can minify your JavaScript, CSS, HTML, and PNG resources and put in an exclude file pattern that you do not want to optimize.

Set hybrid application's main service application (in mobile applications only)

By default, the widget package is created once. You can view the package content at any point of the application development process by double-clicking the project .wgt file in the Project Explorer view. All the files present in the application project are displayed in a list.

By default, the Web application package is created once. You can view the package content at any point of the application development process by double-clicking the project .wgt file in the Project Explorer view. All the files present in the application project are displayed in a list.

Any changes made to the files in the package content list, such as deleting files or dragging and dropping files, are not reflected in the actual project files.

Figure: Viewing the widget package

Viewing the widget package

Figure: Viewing the Web application package

Viewing the Web application package

Additionally, you can localize the widget to support different languages and environments.

Additionally, you can localize the Web application to support different languages and environments.

Tizen supports multi-project applications that combine different types of application templates in Hybrid and Companion Applications.

Tizen supports multi-project applications that combine different types of application templates in hybrid and companion applications.

A hybrid application package combines a Web application and 1 or more native service applications.

To create and run a hybrid application:

Create a project for a Web UI application and native service application.
Create a project for a Web UI application and native service application.
To establish a project reference between a UI and service application:
- In the Project Explorer view, right-click the Web UI application.
- Build and run the Web UI application. The service application is built and executed automatically at the same time, and you can find a WGT file (hybrid application package) under the Web UI application project in the Project Explorer view. -
  To modify the build configuration of the service application, see Building the Application.

With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using the single hybrid package. When a hybrid application package is installed, the Web application is installed by the Web installer, followed by the native installer installing native service applications.

A hybrid application package is very useful to Web applications that need background processing or monitoring. A native service application does not have a UI and can be run in the background.

The Web application and native service applications within a hybrid application package share the same package ID and data folder. Sharing application data between them is easy. Many useful inter-application APIs, such as Message Port and AppControl, can be used in a hybrid application package.

For more information on hybrid applications and their package structure, see HybridWebApp and HybridServiceApp, and Hybrid Application Package.

Once your application has reached the end of its life-cycle, you can remove it from the Tizen Store or Samsung Galaxy Apps Store.

diff --git a/org.tizen.gettingstarted/html/process/coding_app_w.htm b/org.tizen.gettingstarted/html/web/process/coding_app_w.htm similarity index 75% rename from org.tizen.gettingstarted/html/process/coding_app_w.htm rename to org.tizen.gettingstarted/html/web/process/coding_app_w.htm index 88f1307..4fe810d 100644 --- a/org.tizen.gettingstarted/html/process/coding_app_w.htm +++ b/org.tizen.gettingstarted/html/web/process/coding_app_w.htm @@ -3,29 +3,29 @@ - - - - - - - + + + + + + + Coding Applications -

Content

Using Hover Help
Adding External Source Code or Library
Using Hover Help
Adding External Source Code or Library

@@ -41,9 +41,9 @@

The Tizen IDE supports hover help for Web API and W3C widgets. The hover help provides input from the API Reference.

The Tizen IDE supports hover help for Web API and W3C Widget APIs. The hover help provides input from the API Reference.

Figure: Hover help

Hover help

External source files are located in the project directory, and its /js and /css sub-directories. You can add a new folder or source file (such as CSS, HTML, JSON, XML, and JavaScript) to your existing project.

You can add files in the following ways (as an example, the instructions illustrate the adding of a CSS file):

@@ -73,11 +73,11 @@ - - + +

diff --git a/org.tizen.gettingstarted/html/process/creating_app_project_w.htm b/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm similarity index 81% rename from org.tizen.gettingstarted/html/process/creating_app_project_w.htm rename to org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm index 72ea802..6765d59 100644 --- a/org.tizen.gettingstarted/html/process/creating_app_project_w.htm +++ b/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm @@ -3,31 +3,31 @@ - - - - - - - + + + + + + + Creating the Application Project -

+ @@ -39,7 +39,7 @@

In the IDE, select File > New > Tizen Web Project.
If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Web). To switch perspectives, go to Window > Open Perspective > Other and select the perspective you need.

In the New Tizen Web Project window, define the project details: -

Select the project type.

Define the name of your project.

The default location for your application project is defined.

@@ -58,10 +58,10 @@

The new application project is shown in the Project Explorer view of the IDE, with default content in the config.xml file as well as in several project folders.

Figure: Creating a Tizen mobile Web project

Creating a Tizen mobile Web project

Figure: Creating a Tizen wearable Web project

Creating a Tizen wearable Web project

@@ -69,16 +69,18 @@

If you have an existing Tizen application project, you can import it into the Tizen IDE:

Select File > Import > Tizen > Web Projects and Widget file.
Click Browse and select the root directory, which contains your existing project, or widget file (with the .wgt extension).
After selecting the project, you can copy it into the workspace by selecting the Copy projects into workspace check box.
Select File > Import > Tizen > Tizen Project or Package.
Click Browse and select the root directory, which contains your existing project, or Web application package file (with the .wgt extension).
Click the selection buttons under To, and select both a profile and a version.
Enter a project name.
Click Finish.

To export an existing project as a user template that you can use as a basis for creating other projects:

Select File > Export > Tizen > Tizen User Template.
Select File > Export > Tizen > Tizen Web User Template.
In the User Template Export Wizard window, define the project and user template details: -

- + + + + + +

This is a Tizen blank application template.
jQuery Mobile	jQuery Mobile (mobile applications only)	Single Page Application @@ -122,13 +124,19 @@ E - Yellow
IME application (wearable applications only)	Web IME Application	This is a Web-based IME application template, which lets you create your own IME by only writing HTML, CSS, and JavaScript code. +

You can create custom user templates from existing projects and then use these templates to create new projects. The created user templates are located in the <TIZEN_SDK_DATA>/ide/user-templates/web directory and a user-defined directory. When you create a user template, you can define the export location in the User Template Export Wizard.

Figure: User template export location

User template export location

The <TIZEN_SDK_DATA> directory is different for different platforms:

@@ -177,11 +185,11 @@

diff --git a/org.tizen.gettingstarted/html/process/run_debug_app_w.htm b/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm similarity index 68% rename from org.tizen.gettingstarted/html/process/run_debug_app_w.htm rename to org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm index 57412ef..4a6d256 100644 --- a/org.tizen.gettingstarted/html/process/run_debug_app_w.htm +++ b/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm @@ -3,31 +3,31 @@ - - - - - - - + + + + + + + Running and Debugging Applications -

Content

Running Widgets on the Emulator
Running Widgets on a Target Device
Running Mobile Widgets on the Simulator
Debugging Widgets
Running Web Applications on the Emulator
Running Web Applications on a Target Device
Running Mobile Web Applications on the Simulator
Debugging Web Applications
Rapid Development Support

@@ -41,8 +41,8 @@ -

You can debug Tizen widgets on the Emulator using the Project Explorer view or the Tizen IDE menu.

You can debug Tizen Web applications on the Emulator using the Project Explorer view or the Tizen IDE menu.

@@ -55,13 +55,13 @@

To launch the Emulator, do one of the following:

Use the Emulator Manager: +
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. 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.
3. Click Launch.
Use the command line.
Use the command line.

To run the application on the Emulator, do one of the following:

@@ -71,8 +71,8 @@

To stop the Emulator, right-click the Emulator and click Close.

You can run Tizen widgets on a target device using the Project Explorer view or the Tizen IDE menu.

You can run Tizen Web applications on a target device using the Project Explorer view or the Tizen IDE menu.

To run your application on the target device:

Connect the target device to your computer.
In the Tizen IDE menu, go to Run > Run As > Tizen Web Application.
On the Tizen IDE toolbar, click Run.

If the Web application successfully launches on the target device, the JavaScript Log Console View is automatically launched in the Tizen IDE. The JavaScript Log Console view displays Web application JavaScript logs.

You can run Tizen widgets on the Web Simulator using the Project Explorer view or the Tizen IDE menu.

You can run Tizen Web applications on the Web Simulator using the Project Explorer view or the Tizen IDE menu.

Note
The Tizen Web Simulator runs only on the Google Chrome™ browser. To use the Web Simulator, download and install Google Chrome. You can manually specify the installation location of the browser in the simulator preferences.	The Tizen Web Simulator runs only on the Google Chrome™ browser. To use the Web Simulator, download and install Google Chrome. You can manually specify the installation location of the browser in the simulator preferences.

If you are running your widget on the Web Simulator for the first time, create a running configuration by selecting Run > Run Configurations > Tizen Web Simulator Application in the Tizen IDE menu. The running configuration contains the application launch settings.

If you are running your Web application on the Web Simulator for the first time, create a running configuration by selecting Run > Run Configurations > Tizen Web Simulator Application in the Tizen IDE menu. The running configuration contains the application launch settings.

To run your application on the Simulator, do one of the following:

In the Project Explorer view, right-click the project and select Run As > Tizen Web Simulator Application.

When the application is launched, the Web Simulator loads the file specified in the Content field of the config.xml file. The mostly commonly specified file is index.html.

The simulator renders your application on the browser using the WebKit engine. All the Google Chrome™ browser development features are available in the simulator, including the Remote Inspector tool, which can be accessed by pressing the F12 keyboard key. You can leverage the advantages of the Web Simulator tool by setting the device screen size and orientation, and by sending events and messages, such as geolocation data and sensor input events, to your application for debugging the widget.

The simulator renders your application on the browser using the WebKit engine. All the Google Chrome™ browser development features are available in the simulator, including the Web Inspector tool, which can be accessed by pressing the F12 keyboard key. You can leverage the advantages of the Web Simulator tool by setting the device screen size and orientation, and by sending events and messages, such as geolocation data and sensor input events, to your application for debugging it.

Debugging a widget enables you to understand its flow of control. You can debug a widget by running it on the target device and debugging its JavaScript code. JavaScript code debugging uses the Remote Inspector tool.

Debugging a Web application enables you to understand its flow of control. You can debug a Web application by running it on the target device and debugging its JavaScript code. JavaScript code debugging uses the Web Inspector tool.

To debug your application on the target device:

Connect the target device to your computer.
In the Debug Configurations window, click New Launch Configuration.
If you have not made any changes to the application source files since the last time the application was run, Rapid Development Support (RDS) is used to skip the package upload and make running the application faster. RDS is enabled as default. To disable it, go to Window > Preferences > Tizen SDK > Rapid Development Support.
Set the timeout using the Timeout value slider.
The timeout value represents the waiting time for the application launch operation. If you are using a lower configuration system, set a higher timeout value to avoid application launch failure errors.
Start the debugging by clicking Debug.

Start the debugging by clicking Debug.

If no changes are required in the debug configuration, you can also debug the application on the target device by doing one of the following:

In the Project Explorer view, right-click the project and select Debug As > Tizen Web Application.
In the Tizen IDE menu, go to Run > Debug As > Tizen Web Application.
In the Project Explorer view, right-click the project and select Debug As > Tizen Web application.
In the Tizen IDE menu, go to Run > Debug As > Tizen Web application.
On the Tizen IDE toolbar, click Debug.

The Remote Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Remote Inspector:

The Web Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Web Inspector:

Inspect styles
Inspect the DOM

The Remote Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Remote Inspector browser is not supported.

Installing Google Chrome on the device is mandatory for the Remote Inspector to work. When Google Chrome is installed on the device, the Tizen SDK automatically detects it. To select the browser path, go to Window > Preferences > Tizen SDK > Web > Chrome.

The Web Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Web Inspector browser is not supported.

Installing Google Chrome on the device is mandatory for the Web Inspector to work. When Google Chrome is installed on the device, the Tizen SDK automatically detects it. To select the browser path, go to Window > Preferences > Tizen SDK > Web > Chrome.

To debug the JavaScript code, click Sources in the Remote Inspector menu.

You must enable debugging before debugging JavaScript code.

You can also set a break point in the code by right-clicking in the marker bar area on the left side of the editor, and selecting Toggle Breakpoint.
To debug the JavaScript code, click Sources in the Web Inspector menu. +
You must enable debugging before debugging JavaScript code.

You can also set a break point in the code by right-clicking in the marker bar area on the left side of the editor, and selecting Toggle Breakpoint.

Once the break points are set, you can watch variables, expressions, and the current call stack. You can also control the debugging by using the following control buttons.

- + - + - + - + - + -

@@ -166,29 +167,29 @@
Description
		Resumes the current execution.
		Steps over the highlighted statement. Executes the current line, and if the line contains a method, executes the method without entering it.
		Steps into the highlighted statement. Executes the current line, and if the line contains a method, steps into the method.
		Steps out of the current method.
		Deactivates all break points.

Rapid Development Support (RDS) lets you develop a Tizen application rapidly by saving deployment time.

diff --git a/org.tizen.gettingstarted/html/process/setting_properties_w.htm b/org.tizen.gettingstarted/html/web/process/setting_properties_w.htm similarity index 72% rename from org.tizen.gettingstarted/html/process/setting_properties_w.htm rename to org.tizen.gettingstarted/html/web/process/setting_properties_w.htm index 2264b4c..672946a 100644 --- a/org.tizen.gettingstarted/html/process/setting_properties_w.htm +++ b/org.tizen.gettingstarted/html/web/process/setting_properties_w.htm @@ -3,36 +3,36 @@ - - - - - - - + + + + + + + Setting Project Properties -

+ @@ -56,13 +56,13 @@ Note - Only modify the widget configuration by using the configuration editor in the Tizen IDE. If you create or edit the config.xml file using any other text editor, your application may not work as expected. + Only modify the Web application configuration by using the configuration editor in the Tizen IDE. If you create or edit the config.xml file using any other text editor, your application may not work as expected. -

After you have finished setting the project properties, you are ready to design the UI.

You can check the source code in your project for any violation of API privileges. To enable the privilege check:

@@ -70,7 +70,7 @@

In the Properties window, select Project > Properties > Tizen SDK > Web > Privilege.

If you want to exclude JavaScript files in specified folders, you can do so in the Excluded Folder Settings panel.

This configuration helps to avoid unnecessary analysis for library files like jQuery.

To perform privilege checks automatically, select the required option in the Mode Settings panel. To check during the build process, select the Run privilege checks with build option.

You can also perform the checks manually in the IDE by selecting Project > Check Privilege from the context menu. The results are displayed in the Problems view.

@@ -88,18 +88,18 @@

Every application has a config.xml configuration file. The Tizen IDE provides a widget configuration editor for configuring the application.

Every application has a config.xml configuration file. The Tizen IDE provides a Web application configuration editor for configuring the application.

To edit the config.xml file, open it by double-clicking the file in the Project Explorer view.

You can edit widget properties using the tabs of the widget configuration editor.

You can edit Web application properties using the tabs of the Web application configuration editor.

You can define and edit general information of the widget in the Overview tab of the widget configuration editor.

You can define and edit general information of the Web application in the Overview tab of the Web application configuration editor.

The following table lists the widget properties you can edit in the Overview tab.

The following table lists the Web application properties you can edit in the Overview tab.

@@ -108,23 +108,23 @@ - + - + - + - + - - - + + - - - - - - - - - - + + + + + + + + + + - - - - - + + + + + @@ -658,16 +659,17 @@ the Tizen reference implementation. + + + + + + + + + + - - - - - - - - - @@ -896,7 +898,7 @@ the Tizen reference implementation. - +

- Table: Widget general information + Table: Web application general information

Identifier

Widget identifier

Web application identifier

Version

Current version of the widget

Current version of the Web application

Name

Widget name that is displayed in an application menu or in other contexts

Web application name that is displayed in an application menu or in other contexts

Content

Start-up file of the widget

Start-up file of the Web application

Icon

Custom icon for the widget, displayed in the main menu. +

Custom icon for the Web application, displayed in the main menu.

The following icon format and sizes can be used:

@@ -143,14 +143,14 @@

- + -

You can define license information and UI preferences of the widget in the Widget tab of the widget configuration editor.

You can define license information and UI preferences of the Web application in the Widget tab of the Web application configuration editor.

The following table lists the widget properties you can edit in the Widget tab.

The following table lists the Web application properties you can edit in the Widget tab.

@@ -158,11 +158,11 @@ - + - + @@ -170,11 +170,11 @@ - + - + @@ -182,10 +182,10 @@ - + - + @@ -208,42 +208,42 @@

To enable filtering for your mobile Web application:

In the Feature tab of the widget configuration editor, click Add.
In the Feature tab of the Web application configuration editor, click Add.
Select a feature from the list.
Click Save.

After setting the feature information with the widget configuration editor, you can see the added code in the Source tab.

After setting the feature information with the Web application configuration editor, you can see the added code in the Source tab.

The following example shows the setting in the config.xml file code:

 <tizen:feature name="http://tizen.org/feature/network.nfc"/>

For more information on the available requirements for an application package, see Feature Filtering for Web Applications.

You can use features and services provided by privileged APIs, which handle platform and user-sensitive data. You can specify an API, or API groups, accessed and used by the widget in the Privilege tab of the widget configuration editor. The tab serves as a standardized tool to request the binding of an IRI-identifiable runtime component for a widget to use at runtime.

You can use features and services provided by privileged APIs, which handle platform and user-sensitive data. You can specify an API, or API groups, accessed and used by the Web application in the Privilege tab of the Web application configuration editor. The tab serves as a standardized tool to request the binding of an IRI-identifiable runtime component for a Web application to use at runtime.

To add a privilege:

In the Privilege tab of the widget configuration editor, click Add.
In the Privilege tab of the Web application configuration editor, click Add.
In the Add privilege window, select an option: -
- Click Finish.

After setting the privilege information with the widget configuration editor, you can see the added code in the Source tab.

After setting the privilege information with the Web application configuration editor, you can see the added code in the Source tab.

The following example shows the setting in the config.xml file code:

<tizen:privilege name="http://tizen.org/privilege/application.launch"/>

According to the W3C Access Requests Policy (WARP), you cannot access external network resources by default. If you require access to an external network resource, you must request network resource permissions for the widget using the Policy tab of the widget configuration editor.

According to the W3C Access Requests Policy (WARP), you cannot access external network resources by default. If you require access to an external network resource, you must request network resource permissions for the Web application using the Policy tab of the Web application configuration editor.

@@ -289,7 +289,7 @@ @@ -298,11 +298,11 @@

- Table: Widget license and UI information + Table: Web application license and UI information
Description
Managing the Widget		Managing the Web Application
Author	Person or organization that created the widget	Person or organization that created the Web application
E-mail
Web Site	IRI associated with the widget, such as a homepage or a profile on a social network	IRI associated with the Web application, such as a homepage or a profile on a social network
License	Software license, which can include content, such as a usage agreement, redistribution statement, and copyright license terms, under which the content of the widget package is provided	Software license, which can include content, such as a usage agreement, redistribution statement, and copyright license terms, under which the content of the Web application package is provided
License URL
Description	Free-form widget description	Free-form Web application description
Managing the Widget UI		Managing the Web application UI
Width
access	Used to define network resource permissions. - To request network resource permissions, click Add and enter the resource URLs in the Network URL column. You can allow the widget to access the URL sub-domains by setting the Allow subdomain column value as true. + To request network resource permissions, click Add and enter the resource URLs in the Network URL column. You can allow the Web application to access the URL sub-domains by setting the Allow subdomain column value as true. The following example shows the setting in the config.xml file code: <access origin="http://www.tizen.org" subdomains="true"/>

After setting the policy information with the widget configuration editor, you can see the added code in the Source tab.

After setting the policy information with the Web application configuration editor, you can see the added code in the Source tab.

You can provide localization support for name, description, and license elements of the config.xml file in the Localization tab of the widget configuration editor.

You can provide localization support for name, description, and license elements of the config.xml file in the Localization tab of the Web application configuration editor.

To add localization:

In the Name panel, click Add. @@ -312,7 +312,7 @@ <name xml:lang="en-gb">Lee</name>
In the Description panel, click Add. -
Select a language and enter the description of the widget.
+
Select a language and enter the description of the Web application.

The following example shows the setting in the config.xml file:
```
 <description xml:lang="en-gb">Widget</description>
@@ -326,14 +326,14 @@
 </license>
 
```

After setting the localization information with the widget configuration editor, you can see the added code in the Source tab.

After setting the localization information with the Web application configuration editor, you can see the added code in the Source tab.

You can localize a Web application to adapt to various languages and cultural environments by creating different Web application versions for different languages.

To localize a Web application:

Launch the Localization Wizard by doing one of the following:
- In the Project Explorer view, right-click the widget and select Localization > Localization Wizard.
- In the Project Explorer view, right-click the Web application and select Localization > Localization Wizard.
- In the Tizen IDE menu, go to Project > Localization > Localization Wizard.
Click Finish.
In the Project Explorer view, a new locales folder is created containing separate sub-folders for each locale. The sub-folders contain a copy of the selected files. Use that copy to create a localized version of the file.

Figure: Locale folders

Locale folders

You can declare name-value pairs which can be set and retrieved using the Widget API (in mobile or wearable applications) in the Preferences tab of the widget configuration editor. These name-value pairs, or preferences, are used by the widget during execution.

You can declare name-value pairs which can be set and retrieved using the Widget Interface API (in mobile or wearable applications) in the Preferences tab of the Web application configuration editor. These name-value pairs, or preferences, are used by the Web application during execution.

To add preferences, click Add and enter values in the Name and Value columns. You can set a preference as read-only by setting the Read-only column value as true.

After setting the preference information with the widget configuration editor, you can see the added code in the Source tab.

After setting the preference information with the Web application configuration editor, you can see the added code in the Source tab.

The following example shows the setting in the config.xml file code:

 <preference name="key" value="value" readonly="false"/>    
@@ -359,7 +359,7 @@
 
 Configuring the Tizen Schema Extension in the Tizen Tab
 
-   The Tizen tab of the widget configuration editor shows the Tizen schema extension. Some of the attributes specified on this tab are mandatory and must be defined, whereas others are optional. 
+   The Tizen tab of the Web application configuration editor shows the Tizen schema extension. Some of the attributes specified on this tab are mandatory and must be defined, whereas others are optional. 
 
   The following table describes the schema extension properties that you can edit. 
    
@@ -391,7 +391,7 @@
      
-      
+      
@@ -422,14 +422,14 @@
      
-      
-     
+    
@@ -454,7 +454,7 @@
       
      
      src In Widget Packaging and XML Configuration, the Web application start page is a document within the widget package. The Tizen WRT allows the start page to be hosted on an external server.
 The <tizen:content /> element is used to point to the relevant document.
 In Widget Packaging and XML Configuration, the Web application start page is a document within the Web application package. The Tizen WRT allows the start page to be hosted on an external server.
 The <tizen:content /> element is used to point to the relevant document.
  
      
      
      setting 	
      
      app-control Describes the application control functionalities provided by the application. The operation, uri, and mime fields describe the functionalities that other applications can request and the src field describes the application page that handles the request.
 The following example shows the setting in the config.xml file code:
 +     Describes the application control functionalities provided by the application. The operation, uri, and mime fields describe the functionalities that other applications can request and the src field describes the application page that handles the request.
 The following example shows the setting in the config.xml file code:
  <tizen:app-control>
    <tizen:src name="edit.html"/>
    <tizen:operation name="http://tizen.org/appcontrol/operation/edit"/>
    <tizen:uri name="file"/>
    <tizen:mime name="image/jpeg"/>
 </tizen:app-control>
  	
 	 
      account
 	
The capabilities of the account provider defined in the IRI format:
 	 http://<vendor information>/accounts/capability/<name>
 	 The following predefined capabilities can be used:
-	 
+	 
 	 http://tizen.org/account/capability/contact
 	 Used when the account is related to contacts.
 	 http://tizen.org/account/capability/calendar
@@ -484,7 +484,7 @@
 
 Editing the config.xml File in the Source Tab
 
-  The Source tab of the widget configuration editor shows the code of the config.xml file. You can edit an XML document and immediately see how changes made on the other tabs are reflected in the raw XML source content. 
+  The Source tab of the Web application configuration editor shows the code of the config.xml file. You can edit an XML document and immediately see how changes made on the other tabs are reflected in the raw XML source content. 
 
    
@@ -498,11 +498,11 @@
    
     
 
  
-
-
+
+
 
 
-
+
 
 
 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.
@@ -519,4 +519,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
  
     
  
-
+
\ No newline at end of file
diff --git a/org.tizen.gettingstarted/index.xml b/org.tizen.gettingstarted/index.xml
index 2f874ee..a86d27c 100644
--- a/org.tizen.gettingstarted/index.xml
+++ b/org.tizen.gettingstarted/index.xml
@@ -4,43 +4,46 @@
 
 
 	
-		
-	
-		
-	
-	
-		
-			
-			
-			
-			
-			
+	
+	
+		
+		
+			
+			
+			
+			
 			
+		
 		
-		
-			
-			
-			
-			
-			
-			
-		
-	
-
-	
-		
-		
+		
+				
+			
+			
+			
+					
+			
 	
 	
-	
-			
-		
-		
-		
-		
-		
-					
+	
+		
+		
+			
+			
+			
+			
+			
+			
+		
+		
+		
+				
+			
+			
+			
+			
+						
+		
 	
-	
+	
 
 
\ No newline at end of file
diff --git a/org.tizen.guides/META-INF/MANIFEST.MF b/org.tizen.guides/META-INF/MANIFEST.MF
index 7b9f156..be4b85a 100644
--- a/org.tizen.guides/META-INF/MANIFEST.MF
+++ b/org.tizen.guides/META-INF/MANIFEST.MF
@@ -2,6 +2,6 @@ Manifest-Version: 1.0
 Bundle-ManifestVersion: 1
 Bundle-Name: Tizen Guides
 Bundle-SymbolicName: org.tizen.guides;singleton=true
-Bundle-Version: 2.3.1
+Bundle-Version: 2.4.0
 Bundle-Vendor: The Linux Foundation
 
diff --git a/org.tizen.guides/about.html b/org.tizen.guides/about.html
index a4c64b7..814330e 100644
--- a/org.tizen.guides/about.html
+++ b/org.tizen.guides/about.html
@@ -10,7 +10,7 @@
   
  
   About This Content 
-  Tizen 2.3.0 
+  Tizen 2.4.0 
 
   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.
diff --git a/org.tizen.guides/html/css/styles.css b/org.tizen.guides/html/css/styles.css
index 52c0ab9..4c8f5a8 100644
--- a/org.tizen.guides/html/css/styles.css
+++ b/org.tizen.guides/html/css/styles.css
@@ -217,14 +217,12 @@ p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep u
 	color: #ffffff;
 }
 
-#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
 #toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
 #toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
 #main {width: 75%; height: 90%;}
 #container {width:100%;}
 #container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
 body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #navigation {width: auto;}
 body.no-toc #toc-navigation {width: auto;}
 body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
 body.no-toc #profile {float: right;right: -32px;}
@@ -252,10 +250,10 @@ ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 7
 	ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
 	ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
 
-	ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-	ul.devicespecifications li div.devicespec-tit span a.bt-arr 	{display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-	ul.devicespecifications li div.devicespec-tit span a.bt-arr em 	{display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-	ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+	ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+	ul.devicespecifications li div.devicespec-tit > span a.bt-arr 	{display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+	ul.devicespecifications li div.devicespec-tit > span a.bt-arr em 	{display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+	ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
 
 	ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
 	ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
diff --git a/org.tizen.guides/html/images/align.png b/org.tizen.guides/html/images/align.png
index 720016f..2f8d1c0 100644
Binary files a/org.tizen.guides/html/images/align.png and b/org.tizen.guides/html/images/align.png differ
diff --git a/org.tizen.guides/html/images/app_group_behavior.png b/org.tizen.guides/html/images/app_group_behavior.png
new file mode 100644
index 0000000..2ef31a9
Binary files /dev/null and b/org.tizen.guides/html/images/app_group_behavior.png differ
diff --git a/org.tizen.guides/html/images/auth_code.png b/org.tizen.guides/html/images/auth_code.png
deleted file mode 100755
index d57afd0..0000000
Binary files a/org.tizen.guides/html/images/auth_code.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/bg_tree.png b/org.tizen.guides/html/images/bg_tree.png
index ab87495..23c70cb 100644
Binary files a/org.tizen.guides/html/images/bg_tree.png and b/org.tizen.guides/html/images/bg_tree.png differ
diff --git a/org.tizen.guides/html/images/bg_wn.png b/org.tizen.guides/html/images/bg_wn.png
new file mode 100644
index 0000000..f3d60d4
Binary files /dev/null and b/org.tizen.guides/html/images/bg_wn.png differ
diff --git a/org.tizen.guides/html/images/box.png b/org.tizen.guides/html/images/box.png
index 8446f9a..ff81c5f 100644
Binary files a/org.tizen.guides/html/images/box.png and b/org.tizen.guides/html/images/box.png differ
diff --git a/org.tizen.guides/html/images/button_bottom_o_wn.png b/org.tizen.guides/html/images/button_bottom_o_wn.png
new file mode 100644
index 0000000..e7ebfac
Binary files /dev/null and b/org.tizen.guides/html/images/button_bottom_o_wn.png differ
diff --git a/org.tizen.guides/html/images/button_default_wn.png b/org.tizen.guides/html/images/button_default_wn.png
new file mode 100644
index 0000000..af9cdbc
Binary files /dev/null and b/org.tizen.guides/html/images/button_default_wn.png differ
diff --git a/org.tizen.guides/html/images/button_green_wn.png b/org.tizen.guides/html/images/button_green_wn.png
new file mode 100644
index 0000000..4d66b7e
Binary files /dev/null and b/org.tizen.guides/html/images/button_green_wn.png differ
diff --git a/org.tizen.guides/html/images/button_next_wn.png b/org.tizen.guides/html/images/button_next_wn.png
new file mode 100644
index 0000000..5b061e3
Binary files /dev/null and b/org.tizen.guides/html/images/button_next_wn.png differ
diff --git a/org.tizen.guides/html/images/button_orange_wn.png b/org.tizen.guides/html/images/button_orange_wn.png
new file mode 100644
index 0000000..d84676c
Binary files /dev/null and b/org.tizen.guides/html/images/button_orange_wn.png differ
diff --git a/org.tizen.guides/html/images/button_red_wn.png b/org.tizen.guides/html/images/button_red_wn.png
new file mode 100644
index 0000000..c9a9e85
Binary files /dev/null and b/org.tizen.guides/html/images/button_red_wn.png differ
diff --git a/org.tizen.guides/html/images/button_titleicon_wn.png b/org.tizen.guides/html/images/button_titleicon_wn.png
new file mode 100644
index 0000000..c614744
Binary files /dev/null and b/org.tizen.guides/html/images/button_titleicon_wn.png differ
diff --git a/org.tizen.guides/html/images/button_tree.png b/org.tizen.guides/html/images/button_tree.png
index 0df481a..53bf1c7 100644
Binary files a/org.tizen.guides/html/images/button_tree.png and b/org.tizen.guides/html/images/button_tree.png differ
diff --git a/org.tizen.guides/html/images/button_wn.png b/org.tizen.guides/html/images/button_wn.png
new file mode 100644
index 0000000..f80fa01
Binary files /dev/null and b/org.tizen.guides/html/images/button_wn.png differ
diff --git a/org.tizen.guides/html/images/cairo.png b/org.tizen.guides/html/images/cairo.png
new file mode 100644
index 0000000..96e1a00
Binary files /dev/null and b/org.tizen.guides/html/images/cairo.png differ
diff --git a/org.tizen.guides/html/images/check_default_o_wn.png b/org.tizen.guides/html/images/check_default_o_wn.png
new file mode 100644
index 0000000..e2211d2
Binary files /dev/null and b/org.tizen.guides/html/images/check_default_o_wn.png differ
diff --git a/org.tizen.guides/html/images/check_default_wn.png b/org.tizen.guides/html/images/check_default_wn.png
new file mode 100644
index 0000000..f1fbc22
Binary files /dev/null and b/org.tizen.guides/html/images/check_default_wn.png differ
diff --git a/org.tizen.guides/html/images/check_onoff_o_wn.png b/org.tizen.guides/html/images/check_onoff_o_wn.png
new file mode 100644
index 0000000..c720feb
Binary files /dev/null and b/org.tizen.guides/html/images/check_onoff_o_wn.png differ
diff --git a/org.tizen.guides/html/images/check_onoff_wn.png b/org.tizen.guides/html/images/check_onoff_wn.png
new file mode 100644
index 0000000..30864d3
Binary files /dev/null and b/org.tizen.guides/html/images/check_onoff_wn.png differ
diff --git a/org.tizen.guides/html/images/check_small_o_wn.png b/org.tizen.guides/html/images/check_small_o_wn.png
new file mode 100644
index 0000000..9f783cb
Binary files /dev/null and b/org.tizen.guides/html/images/check_small_o_wn.png differ
diff --git a/org.tizen.guides/html/images/check_tree.png b/org.tizen.guides/html/images/check_tree.png
index e697606..8f582c6 100644
Binary files a/org.tizen.guides/html/images/check_tree.png and b/org.tizen.guides/html/images/check_tree.png differ
diff --git a/org.tizen.guides/html/images/check_wn.png b/org.tizen.guides/html/images/check_wn.png
new file mode 100644
index 0000000..028be34
Binary files /dev/null and b/org.tizen.guides/html/images/check_wn.png differ
diff --git a/org.tizen.guides/html/images/circle_datetime.png b/org.tizen.guides/html/images/circle_datetime.png
new file mode 100644
index 0000000..bc0c93d
Binary files /dev/null and b/org.tizen.guides/html/images/circle_datetime.png differ
diff --git a/org.tizen.guides/html/images/circle_genlist.png b/org.tizen.guides/html/images/circle_genlist.png
new file mode 100644
index 0000000..0ae73ab
Binary files /dev/null and b/org.tizen.guides/html/images/circle_genlist.png differ
diff --git a/org.tizen.guides/html/images/circle_progressbar.png b/org.tizen.guides/html/images/circle_progressbar.png
new file mode 100644
index 0000000..6dad7dc
Binary files /dev/null and b/org.tizen.guides/html/images/circle_progressbar.png differ
diff --git a/org.tizen.guides/html/images/circle_scroller.png b/org.tizen.guides/html/images/circle_scroller.png
new file mode 100644
index 0000000..fdc5847
Binary files /dev/null and b/org.tizen.guides/html/images/circle_scroller.png differ
diff --git a/org.tizen.guides/html/images/circle_slider.png b/org.tizen.guides/html/images/circle_slider.png
new file mode 100644
index 0000000..8e0892e
Binary files /dev/null and b/org.tizen.guides/html/images/circle_slider.png differ
diff --git a/org.tizen.guides/html/images/circular_support.png b/org.tizen.guides/html/images/circular_support.png
new file mode 100644
index 0000000..5055250
Binary files /dev/null and b/org.tizen.guides/html/images/circular_support.png differ
diff --git a/org.tizen.guides/html/images/client_credentials.png b/org.tizen.guides/html/images/client_credentials.png
deleted file mode 100755
index 487ef12..0000000
Binary files a/org.tizen.guides/html/images/client_credentials.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/colorselector_tree.png b/org.tizen.guides/html/images/colorselector_tree.png
index 9ab17f5..df44a3e 100644
Binary files a/org.tizen.guides/html/images/colorselector_tree.png and b/org.tizen.guides/html/images/colorselector_tree.png differ
diff --git a/org.tizen.guides/html/images/contextual_bottom_o_wn.png b/org.tizen.guides/html/images/contextual_bottom_o_wn.png
new file mode 100644
index 0000000..650a977
Binary files /dev/null and b/org.tizen.guides/html/images/contextual_bottom_o_wn.png differ
diff --git a/org.tizen.guides/html/images/contextual_select_o_wn.png b/org.tizen.guides/html/images/contextual_select_o_wn.png
new file mode 100644
index 0000000..99b84d1
Binary files /dev/null and b/org.tizen.guides/html/images/contextual_select_o_wn.png differ
diff --git a/org.tizen.guides/html/images/contextual_top_o_wn.png b/org.tizen.guides/html/images/contextual_top_o_wn.png
new file mode 100644
index 0000000..ffc6f73
Binary files /dev/null and b/org.tizen.guides/html/images/contextual_top_o_wn.png differ
diff --git a/org.tizen.guides/html/images/contextual_wn.png b/org.tizen.guides/html/images/contextual_wn.png
new file mode 100644
index 0000000..dbebbf6
Binary files /dev/null and b/org.tizen.guides/html/images/contextual_wn.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup_tree.png b/org.tizen.guides/html/images/ctxpopup_tree.png
index c40f6ca..af2db0c 100644
Binary files a/org.tizen.guides/html/images/ctxpopup_tree.png and b/org.tizen.guides/html/images/ctxpopup_tree.png differ
diff --git a/org.tizen.guides/html/images/ctxpopup_wn.png b/org.tizen.guides/html/images/ctxpopup_wn.png
new file mode 100644
index 0000000..51922f6
Binary files /dev/null and b/org.tizen.guides/html/images/ctxpopup_wn.png differ
diff --git a/org.tizen.guides/html/images/datetime_date_o_wn.png b/org.tizen.guides/html/images/datetime_date_o_wn.png
new file mode 100644
index 0000000..110d1c9
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_date_o_wn.png differ
diff --git a/org.tizen.guides/html/images/datetime_date_wn.png b/org.tizen.guides/html/images/datetime_date_wn.png
new file mode 100644
index 0000000..7bfa2bb
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_date_wn.png differ
diff --git a/org.tizen.guides/html/images/datetime_time_o_wn.png b/org.tizen.guides/html/images/datetime_time_o_wn.png
new file mode 100644
index 0000000..a1ae67f
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_time_o_wn.png differ
diff --git a/org.tizen.guides/html/images/datetime_time_wn.png b/org.tizen.guides/html/images/datetime_time_wn.png
new file mode 100644
index 0000000..14f6f7e
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_time_wn.png differ
diff --git a/org.tizen.guides/html/images/datetime_tree.png b/org.tizen.guides/html/images/datetime_tree.png
index 84ad43a..10146b6 100644
Binary files a/org.tizen.guides/html/images/datetime_tree.png and b/org.tizen.guides/html/images/datetime_tree.png differ
diff --git a/org.tizen.guides/html/images/datetime_wn.png b/org.tizen.guides/html/images/datetime_wn.png
new file mode 100644
index 0000000..1b40824
Binary files /dev/null and b/org.tizen.guides/html/images/datetime_wn.png differ
diff --git a/org.tizen.guides/html/images/entry2_wn.png b/org.tizen.guides/html/images/entry2_wn.png
new file mode 100644
index 0000000..ba6a882
Binary files /dev/null and b/org.tizen.guides/html/images/entry2_wn.png differ
diff --git a/org.tizen.guides/html/images/entry_default_wn.png b/org.tizen.guides/html/images/entry_default_wn.png
new file mode 100644
index 0000000..165237d
Binary files /dev/null and b/org.tizen.guides/html/images/entry_default_wn.png differ
diff --git a/org.tizen.guides/html/images/entry_tree.png b/org.tizen.guides/html/images/entry_tree.png
index 524dc4a..10ef4d2 100644
Binary files a/org.tizen.guides/html/images/entry_tree.png and b/org.tizen.guides/html/images/entry_tree.png differ
diff --git a/org.tizen.guides/html/images/entry_wn.png b/org.tizen.guides/html/images/entry_wn.png
new file mode 100644
index 0000000..72dc309
Binary files /dev/null and b/org.tizen.guides/html/images/entry_wn.png differ
diff --git a/org.tizen.guides/html/images/eom_mirror_mode.png b/org.tizen.guides/html/images/eom_mirror_mode.png
new file mode 100644
index 0000000..3494e00
Binary files /dev/null and b/org.tizen.guides/html/images/eom_mirror_mode.png differ
diff --git a/org.tizen.guides/html/images/eom_presentation_mode.png b/org.tizen.guides/html/images/eom_presentation_mode.png
new file mode 100644
index 0000000..ea64329
Binary files /dev/null and b/org.tizen.guides/html/images/eom_presentation_mode.png differ
diff --git a/org.tizen.guides/html/images/flip_tree.png b/org.tizen.guides/html/images/flip_tree.png
index 3888117..2e7927f 100644
Binary files a/org.tizen.guides/html/images/flip_tree.png and b/org.tizen.guides/html/images/flip_tree.png differ
diff --git a/org.tizen.guides/html/images/gengrid_tree.png b/org.tizen.guides/html/images/gengrid_tree.png
index fe01efb..8c2b7c3 100644
Binary files a/org.tizen.guides/html/images/gengrid_tree.png and b/org.tizen.guides/html/images/gengrid_tree.png differ
diff --git a/org.tizen.guides/html/images/genlist1_wn.png b/org.tizen.guides/html/images/genlist1_wn.png
new file mode 100644
index 0000000..acc1828
Binary files /dev/null and b/org.tizen.guides/html/images/genlist1_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist2_wn.png b/org.tizen.guides/html/images/genlist2_wn.png
new file mode 100644
index 0000000..3e34d3a
Binary files /dev/null and b/org.tizen.guides/html/images/genlist2_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist3_wn.png b/org.tizen.guides/html/images/genlist3_wn.png
new file mode 100644
index 0000000..456e35d
Binary files /dev/null and b/org.tizen.guides/html/images/genlist3_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_1text1icon1_o_wn.png b/org.tizen.guides/html/images/genlist_1text1icon1_o_wn.png
new file mode 100644
index 0000000..d504aa4
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_1text1icon1_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_1text1icon1_wn.png b/org.tizen.guides/html/images/genlist_1text1icon1_wn.png
new file mode 100644
index 0000000..4aa582b
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_1text1icon1_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_1text1icon_o_wn.png b/org.tizen.guides/html/images/genlist_1text1icon_o_wn.png
new file mode 100644
index 0000000..b247a12
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_1text1icon_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_1text1icon_wn.png b/org.tizen.guides/html/images/genlist_1text1icon_wn.png
new file mode 100644
index 0000000..161e967
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_1text1icon_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_1text1icondivider_o_wn.png b/org.tizen.guides/html/images/genlist_1text1icondivider_o_wn.png
new file mode 100644
index 0000000..2b09724
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_1text1icondivider_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_1text1icondivider_wn.png b/org.tizen.guides/html/images/genlist_1text1icondivider_wn.png
new file mode 100644
index 0000000..062f321
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_1text1icondivider_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_1text_o_wn.png b/org.tizen.guides/html/images/genlist_1text_o_wn.png
new file mode 100644
index 0000000..9804387
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_1text_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_1text_wn.png b/org.tizen.guides/html/images/genlist_1text_wn.png
new file mode 100644
index 0000000..ff4fc53
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_1text_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_2text1_wn.png b/org.tizen.guides/html/images/genlist_2text1_wn.png
new file mode 100644
index 0000000..135d952
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_2text1_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_2text1icon1_o_wn.png b/org.tizen.guides/html/images/genlist_2text1icon1_o_wn.png
new file mode 100644
index 0000000..7576d71
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_2text1icon1_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_2text1icon1_wn.png b/org.tizen.guides/html/images/genlist_2text1icon1_wn.png
new file mode 100644
index 0000000..9577ce9
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_2text1icon1_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_2text_o_wn.png b/org.tizen.guides/html/images/genlist_2text_o_wn.png
new file mode 100644
index 0000000..ba23175
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_2text_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_2text_wn.png b/org.tizen.guides/html/images/genlist_2text_wn.png
new file mode 100644
index 0000000..1f72dd1
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_2text_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_def_o_wn.png b/org.tizen.guides/html/images/genlist_def_o_wn.png
new file mode 100644
index 0000000..196de53
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_def_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_def_wn.png b/org.tizen.guides/html/images/genlist_def_wn.png
new file mode 100644
index 0000000..609087f
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_def_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_edit_o_wn.png b/org.tizen.guides/html/images/genlist_edit_o_wn.png
new file mode 100644
index 0000000..81c92bd
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_edit_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_group_o_wn.png b/org.tizen.guides/html/images/genlist_group_o_wn.png
new file mode 100644
index 0000000..f0a2483
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_group_o_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_group_wn.png b/org.tizen.guides/html/images/genlist_group_wn.png
new file mode 100644
index 0000000..8c6f296
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_group_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_htree.png b/org.tizen.guides/html/images/genlist_htree.png
index 8870413..f372587 100644
Binary files a/org.tizen.guides/html/images/genlist_htree.png and b/org.tizen.guides/html/images/genlist_htree.png differ
diff --git a/org.tizen.guides/html/images/genlist_multi1_wn.png b/org.tizen.guides/html/images/genlist_multi1_wn.png
new file mode 100644
index 0000000..e8406de
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_multi1_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_multi2_wn.png b/org.tizen.guides/html/images/genlist_multi2_wn.png
new file mode 100644
index 0000000..d40bd59
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_multi2_wn.png differ
diff --git a/org.tizen.guides/html/images/genlist_title_o_wn.png b/org.tizen.guides/html/images/genlist_title_o_wn.png
new file mode 100644
index 0000000..dd25c0c
Binary files /dev/null and b/org.tizen.guides/html/images/genlist_title_o_wn.png differ
diff --git a/org.tizen.guides/html/images/glview_tree.png b/org.tizen.guides/html/images/glview_tree.png
index e91309c..6c9f83d 100644
Binary files a/org.tizen.guides/html/images/glview_tree.png and b/org.tizen.guides/html/images/glview_tree.png differ
diff --git a/org.tizen.guides/html/images/glview_wn.png b/org.tizen.guides/html/images/glview_wn.png
new file mode 100644
index 0000000..9ea747b
Binary files /dev/null and b/org.tizen.guides/html/images/glview_wn.png differ
diff --git a/org.tizen.guides/html/images/icon_tree.png b/org.tizen.guides/html/images/icon_tree.png
index 7f43d66..26459ed 100644
Binary files a/org.tizen.guides/html/images/icon_tree.png and b/org.tizen.guides/html/images/icon_tree.png differ
diff --git a/org.tizen.guides/html/images/image_tree.png b/org.tizen.guides/html/images/image_tree.png
index 577469d..32da363 100644
Binary files a/org.tizen.guides/html/images/image_tree.png and b/org.tizen.guides/html/images/image_tree.png differ
diff --git a/org.tizen.guides/html/images/image_wn.png b/org.tizen.guides/html/images/image_wn.png
new file mode 100644
index 0000000..375b582
Binary files /dev/null and b/org.tizen.guides/html/images/image_wn.png differ
diff --git a/org.tizen.guides/html/images/implicit.png b/org.tizen.guides/html/images/implicit.png
deleted file mode 100755
index e78dee8..0000000
Binary files a/org.tizen.guides/html/images/implicit.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/index_circle_o_wn.png b/org.tizen.guides/html/images/index_circle_o_wn.png
new file mode 100644
index 0000000..40c0c50
Binary files /dev/null and b/org.tizen.guides/html/images/index_circle_o_wn.png differ
diff --git a/org.tizen.guides/html/images/index_tab_wn.png b/org.tizen.guides/html/images/index_tab_wn.png
new file mode 100644
index 0000000..1b8131a
Binary files /dev/null and b/org.tizen.guides/html/images/index_tab_wn.png differ
diff --git a/org.tizen.guides/html/images/index_thumb_o_wn.png b/org.tizen.guides/html/images/index_thumb_o_wn.png
new file mode 100644
index 0000000..075d81b
Binary files /dev/null and b/org.tizen.guides/html/images/index_thumb_o_wn.png differ
diff --git a/org.tizen.guides/html/images/index_thumb_wn.png b/org.tizen.guides/html/images/index_thumb_wn.png
new file mode 100644
index 0000000..8f946ed
Binary files /dev/null and b/org.tizen.guides/html/images/index_thumb_wn.png differ
diff --git a/org.tizen.guides/html/images/index_tree.png b/org.tizen.guides/html/images/index_tree.png
index aa7fb57..cb04855 100644
Binary files a/org.tizen.guides/html/images/index_tree.png and b/org.tizen.guides/html/images/index_tree.png differ
diff --git a/org.tizen.guides/html/images/index_wn.png b/org.tizen.guides/html/images/index_wn.png
new file mode 100644
index 0000000..b3aeb85
Binary files /dev/null and b/org.tizen.guides/html/images/index_wn.png differ
diff --git a/org.tizen.guides/html/images/label_tree.png b/org.tizen.guides/html/images/label_tree.png
index b571aca..99b8b97 100644
Binary files a/org.tizen.guides/html/images/label_tree.png and b/org.tizen.guides/html/images/label_tree.png differ
diff --git a/org.tizen.guides/html/images/label_wn.png b/org.tizen.guides/html/images/label_wn.png
new file mode 100644
index 0000000..779faba
Binary files /dev/null and b/org.tizen.guides/html/images/label_wn.png differ
diff --git a/org.tizen.guides/html/images/list_tree.png b/org.tizen.guides/html/images/list_tree.png
index 27a8248..f39e80d 100644
Binary files a/org.tizen.guides/html/images/list_tree.png and b/org.tizen.guides/html/images/list_tree.png differ
diff --git a/org.tizen.guides/html/images/list_wn.png b/org.tizen.guides/html/images/list_wn.png
new file mode 100644
index 0000000..7256069
Binary files /dev/null and b/org.tizen.guides/html/images/list_wn.png differ
diff --git a/org.tizen.guides/html/images/map_tree.png b/org.tizen.guides/html/images/map_tree.png
index c0d0a8d..eb1a0ba 100644
Binary files a/org.tizen.guides/html/images/map_tree.png and b/org.tizen.guides/html/images/map_tree.png differ
diff --git a/org.tizen.guides/html/images/mapbuf_tree.png b/org.tizen.guides/html/images/mapbuf_tree.png
index 64a63f6..20b3503 100644
Binary files a/org.tizen.guides/html/images/mapbuf_tree.png and b/org.tizen.guides/html/images/mapbuf_tree.png differ
diff --git a/org.tizen.guides/html/images/migrate_move_to_top.png b/org.tizen.guides/html/images/migrate_move_to_top.png
new file mode 100644
index 0000000..fbac392
Binary files /dev/null and b/org.tizen.guides/html/images/migrate_move_to_top.png differ
diff --git a/org.tizen.guides/html/images/migrate_padding.png b/org.tizen.guides/html/images/migrate_padding.png
new file mode 100644
index 0000000..f0df71d
Binary files /dev/null and b/org.tizen.guides/html/images/migrate_padding.png differ
diff --git a/org.tizen.guides/html/images/migrate_scrollable_circle.png b/org.tizen.guides/html/images/migrate_scrollable_circle.png
new file mode 100644
index 0000000..f3946bc
Binary files /dev/null and b/org.tizen.guides/html/images/migrate_scrollable_circle.png differ
diff --git a/org.tizen.guides/html/images/migrate_scrollable_rect.png b/org.tizen.guides/html/images/migrate_scrollable_rect.png
new file mode 100644
index 0000000..25fd803
Binary files /dev/null and b/org.tizen.guides/html/images/migrate_scrollable_rect.png differ
diff --git a/org.tizen.guides/html/images/mn_fold.png b/org.tizen.guides/html/images/mn_fold.png
deleted file mode 100644
index 1f8d62b..0000000
Binary files a/org.tizen.guides/html/images/mn_fold.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/mw_fold.png b/org.tizen.guides/html/images/mw_fold.png
deleted file mode 100644
index a96e013..0000000
Binary files a/org.tizen.guides/html/images/mw_fold.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/n_division.png b/org.tizen.guides/html/images/n_division.png
index df38a99..d687bc5 100644
Binary files a/org.tizen.guides/html/images/n_division.png and b/org.tizen.guides/html/images/n_division.png differ
diff --git a/org.tizen.guides/html/images/n_fold.png b/org.tizen.guides/html/images/n_fold.png
deleted file mode 100644
index 6336532..0000000
Binary files a/org.tizen.guides/html/images/n_fold.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/nfc_card_emulation.png b/org.tizen.guides/html/images/nfc_card_emulation.png
new file mode 100644
index 0000000..0370c0e
Binary files /dev/null and b/org.tizen.guides/html/images/nfc_card_emulation.png differ
diff --git a/org.tizen.guides/html/images/nfc_card_emulation_hce.png b/org.tizen.guides/html/images/nfc_card_emulation_hce.png
new file mode 100644
index 0000000..a5d1540
Binary files /dev/null and b/org.tizen.guides/html/images/nfc_card_emulation_hce.png differ
diff --git a/org.tizen.guides/html/images/nfc_hce_routing.png b/org.tizen.guides/html/images/nfc_hce_routing.png
new file mode 100644
index 0000000..7a5683f
Binary files /dev/null and b/org.tizen.guides/html/images/nfc_hce_routing.png differ
diff --git a/org.tizen.guides/html/images/notify_tree.png b/org.tizen.guides/html/images/notify_tree.png
index 8045806..e388ee2 100644
Binary files a/org.tizen.guides/html/images/notify_tree.png and b/org.tizen.guides/html/images/notify_tree.png differ
diff --git a/org.tizen.guides/html/images/panel_tree.png b/org.tizen.guides/html/images/panel_tree.png
index bb60e2e..be4a5e8 100644
Binary files a/org.tizen.guides/html/images/panel_tree.png and b/org.tizen.guides/html/images/panel_tree.png differ
diff --git a/org.tizen.guides/html/images/password.png b/org.tizen.guides/html/images/password.png
deleted file mode 100755
index 0bdd463..0000000
Binary files a/org.tizen.guides/html/images/password.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/photo_tree.png b/org.tizen.guides/html/images/photo_tree.png
index abbf3e2..781cdad 100644
Binary files a/org.tizen.guides/html/images/photo_tree.png and b/org.tizen.guides/html/images/photo_tree.png differ
diff --git a/org.tizen.guides/html/images/photocam_tree.png b/org.tizen.guides/html/images/photocam_tree.png
index 9ceb125..c34d171 100644
Binary files a/org.tizen.guides/html/images/photocam_tree.png and b/org.tizen.guides/html/images/photocam_tree.png differ
diff --git a/org.tizen.guides/html/images/plug_tree.png b/org.tizen.guides/html/images/plug_tree.png
index 5c27552..c8b420b 100644
Binary files a/org.tizen.guides/html/images/plug_tree.png and b/org.tizen.guides/html/images/plug_tree.png differ
diff --git a/org.tizen.guides/html/images/popup_circle_o_wn.png b/org.tizen.guides/html/images/popup_circle_o_wn.png
new file mode 100644
index 0000000..df2ee10
Binary files /dev/null and b/org.tizen.guides/html/images/popup_circle_o_wn.png differ
diff --git a/org.tizen.guides/html/images/popup_default_wn.png b/org.tizen.guides/html/images/popup_default_wn.png
new file mode 100644
index 0000000..4ab6bba
Binary files /dev/null and b/org.tizen.guides/html/images/popup_default_wn.png differ
diff --git a/org.tizen.guides/html/images/popup_toast_o_wn.png b/org.tizen.guides/html/images/popup_toast_o_wn.png
new file mode 100644
index 0000000..5e17f2f
Binary files /dev/null and b/org.tizen.guides/html/images/popup_toast_o_wn.png differ
diff --git a/org.tizen.guides/html/images/popup_toast_wn.png b/org.tizen.guides/html/images/popup_toast_wn.png
new file mode 100644
index 0000000..11d9597
Binary files /dev/null and b/org.tizen.guides/html/images/popup_toast_wn.png differ
diff --git a/org.tizen.guides/html/images/popup_tree.png b/org.tizen.guides/html/images/popup_tree.png
index 6c69a54..2ece57e 100644
Binary files a/org.tizen.guides/html/images/popup_tree.png and b/org.tizen.guides/html/images/popup_tree.png differ
diff --git a/org.tizen.guides/html/images/popup_wn.png b/org.tizen.guides/html/images/popup_wn.png
new file mode 100644
index 0000000..3cbd414
Binary files /dev/null and b/org.tizen.guides/html/images/popup_wn.png differ
diff --git a/org.tizen.guides/html/images/progressbar_default_wn.png b/org.tizen.guides/html/images/progressbar_default_wn.png
new file mode 100644
index 0000000..e2b676d
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_default_wn.png differ
diff --git a/org.tizen.guides/html/images/progressbar_group_wn.png b/org.tizen.guides/html/images/progressbar_group_wn.png
new file mode 100644
index 0000000..a736384
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_group_wn.png differ
diff --git a/org.tizen.guides/html/images/progressbar_pending_wn.png b/org.tizen.guides/html/images/progressbar_pending_wn.png
new file mode 100644
index 0000000..c880ddf
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_pending_wn.png differ
diff --git a/org.tizen.guides/html/images/progressbar_process_o_wn.png b/org.tizen.guides/html/images/progressbar_process_o_wn.png
new file mode 100644
index 0000000..87aa90d
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_process_o_wn.png differ
diff --git a/org.tizen.guides/html/images/progressbar_process_wn.png b/org.tizen.guides/html/images/progressbar_process_wn.png
new file mode 100644
index 0000000..f91b380
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_process_wn.png differ
diff --git a/org.tizen.guides/html/images/progressbar_small_o_wn.png b/org.tizen.guides/html/images/progressbar_small_o_wn.png
new file mode 100644
index 0000000..ebf668a
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_small_o_wn.png differ
diff --git a/org.tizen.guides/html/images/progressbar_tree.png b/org.tizen.guides/html/images/progressbar_tree.png
index c6593fe..61398d4 100644
Binary files a/org.tizen.guides/html/images/progressbar_tree.png and b/org.tizen.guides/html/images/progressbar_tree.png differ
diff --git a/org.tizen.guides/html/images/progressbar_wn.png b/org.tizen.guides/html/images/progressbar_wn.png
new file mode 100644
index 0000000..5def0f7
Binary files /dev/null and b/org.tizen.guides/html/images/progressbar_wn.png differ
diff --git a/org.tizen.guides/html/images/protocol_flow.png b/org.tizen.guides/html/images/protocol_flow.png
deleted file mode 100755
index c2c5860..0000000
Binary files a/org.tizen.guides/html/images/protocol_flow.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/radio_default_o_wn.png b/org.tizen.guides/html/images/radio_default_o_wn.png
new file mode 100644
index 0000000..519a88a
Binary files /dev/null and b/org.tizen.guides/html/images/radio_default_o_wn.png differ
diff --git a/org.tizen.guides/html/images/radio_default_wn.png b/org.tizen.guides/html/images/radio_default_wn.png
new file mode 100644
index 0000000..34b86f4
Binary files /dev/null and b/org.tizen.guides/html/images/radio_default_wn.png differ
diff --git a/org.tizen.guides/html/images/radio_tree.png b/org.tizen.guides/html/images/radio_tree.png
index 877f74d..9f1b945 100644
Binary files a/org.tizen.guides/html/images/radio_tree.png and b/org.tizen.guides/html/images/radio_tree.png differ
diff --git a/org.tizen.guides/html/images/radio_wn.png b/org.tizen.guides/html/images/radio_wn.png
new file mode 100644
index 0000000..6a44a11
Binary files /dev/null and b/org.tizen.guides/html/images/radio_wn.png differ
diff --git a/org.tizen.guides/html/images/scale_align_hint.png b/org.tizen.guides/html/images/scale_align_hint.png
new file mode 100644
index 0000000..54e22f9
Binary files /dev/null and b/org.tizen.guides/html/images/scale_align_hint.png differ
diff --git a/org.tizen.guides/html/images/scale_box.png b/org.tizen.guides/html/images/scale_box.png
new file mode 100644
index 0000000..97ba4a2
Binary files /dev/null and b/org.tizen.guides/html/images/scale_box.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_1.png b/org.tizen.guides/html/images/scale_effect_1.png
new file mode 100644
index 0000000..71d5088
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_1.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_10.png b/org.tizen.guides/html/images/scale_effect_10.png
new file mode 100644
index 0000000..4c43fa8
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_10.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_2.png b/org.tizen.guides/html/images/scale_effect_2.png
new file mode 100644
index 0000000..19a49ac
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_2.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_3.png b/org.tizen.guides/html/images/scale_effect_3.png
new file mode 100644
index 0000000..e0d3d52
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_3.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_4.png b/org.tizen.guides/html/images/scale_effect_4.png
new file mode 100644
index 0000000..9e6a4c7
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_4.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_5.png b/org.tizen.guides/html/images/scale_effect_5.png
new file mode 100644
index 0000000..6d1904e
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_5.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_6.png b/org.tizen.guides/html/images/scale_effect_6.png
new file mode 100644
index 0000000..7e94032
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_6.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_7.png b/org.tizen.guides/html/images/scale_effect_7.png
new file mode 100644
index 0000000..dd6af73
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_7.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_8.png b/org.tizen.guides/html/images/scale_effect_8.png
new file mode 100644
index 0000000..35b8048
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_8.png differ
diff --git a/org.tizen.guides/html/images/scale_effect_9.png b/org.tizen.guides/html/images/scale_effect_9.png
new file mode 100644
index 0000000..1eea1aa
Binary files /dev/null and b/org.tizen.guides/html/images/scale_effect_9.png differ
diff --git a/org.tizen.guides/html/images/scale_example_image.png b/org.tizen.guides/html/images/scale_example_image.png
new file mode 100644
index 0000000..84786d9
Binary files /dev/null and b/org.tizen.guides/html/images/scale_example_image.png differ
diff --git a/org.tizen.guides/html/images/scale_example_image_set.png b/org.tizen.guides/html/images/scale_example_image_set.png
new file mode 100644
index 0000000..a606ce3
Binary files /dev/null and b/org.tizen.guides/html/images/scale_example_image_set.png differ
diff --git a/org.tizen.guides/html/images/scale_example_part.png b/org.tizen.guides/html/images/scale_example_part.png
new file mode 100644
index 0000000..45eb275
Binary files /dev/null and b/org.tizen.guides/html/images/scale_example_part.png differ
diff --git a/org.tizen.guides/html/images/scale_example_part_aspect.png b/org.tizen.guides/html/images/scale_example_part_aspect.png
new file mode 100644
index 0000000..4bd6d91
Binary files /dev/null and b/org.tizen.guides/html/images/scale_example_part_aspect.png differ
diff --git a/org.tizen.guides/html/images/scale_example_text.png b/org.tizen.guides/html/images/scale_example_text.png
new file mode 100644
index 0000000..7582a86
Binary files /dev/null and b/org.tizen.guides/html/images/scale_example_text.png differ
diff --git a/org.tizen.guides/html/images/scale_example_text_fit.png b/org.tizen.guides/html/images/scale_example_text_fit.png
new file mode 100644
index 0000000..02daf4a
Binary files /dev/null and b/org.tizen.guides/html/images/scale_example_text_fit.png differ
diff --git a/org.tizen.guides/html/images/scale_fixed.png b/org.tizen.guides/html/images/scale_fixed.png
new file mode 100644
index 0000000..6e59df1
Binary files /dev/null and b/org.tizen.guides/html/images/scale_fixed.png differ
diff --git a/org.tizen.guides/html/images/scale_fixed_flexible.png b/org.tizen.guides/html/images/scale_fixed_flexible.png
new file mode 100644
index 0000000..07bc203
Binary files /dev/null and b/org.tizen.guides/html/images/scale_fixed_flexible.png differ
diff --git a/org.tizen.guides/html/images/scale_fixed_height.png b/org.tizen.guides/html/images/scale_fixed_height.png
new file mode 100644
index 0000000..e6fd152
Binary files /dev/null and b/org.tizen.guides/html/images/scale_fixed_height.png differ
diff --git a/org.tizen.guides/html/images/scale_flexible_height.png b/org.tizen.guides/html/images/scale_flexible_height.png
new file mode 100644
index 0000000..ed7a890
Binary files /dev/null and b/org.tizen.guides/html/images/scale_flexible_height.png differ
diff --git a/org.tizen.guides/html/images/scale_grid.png b/org.tizen.guides/html/images/scale_grid.png
new file mode 100644
index 0000000..7d629aa
Binary files /dev/null and b/org.tizen.guides/html/images/scale_grid.png differ
diff --git a/org.tizen.guides/html/images/scale_original_image.png b/org.tizen.guides/html/images/scale_original_image.png
new file mode 100644
index 0000000..9398ccb
Binary files /dev/null and b/org.tizen.guides/html/images/scale_original_image.png differ
diff --git a/org.tizen.guides/html/images/scale_relative.png b/org.tizen.guides/html/images/scale_relative.png
new file mode 100644
index 0000000..8a033c3
Binary files /dev/null and b/org.tizen.guides/html/images/scale_relative.png differ
diff --git a/org.tizen.guides/html/images/scale_relative_scaled.png b/org.tizen.guides/html/images/scale_relative_scaled.png
new file mode 100644
index 0000000..1eb7ff1
Binary files /dev/null and b/org.tizen.guides/html/images/scale_relative_scaled.png differ
diff --git a/org.tizen.guides/html/images/scale_weight_hint.png b/org.tizen.guides/html/images/scale_weight_hint.png
new file mode 100644
index 0000000..2678e8f
Binary files /dev/null and b/org.tizen.guides/html/images/scale_weight_hint.png differ
diff --git a/org.tizen.guides/html/images/scale_weight_hint_multiple.png b/org.tizen.guides/html/images/scale_weight_hint_multiple.png
new file mode 100644
index 0000000..0fd2c8b
Binary files /dev/null and b/org.tizen.guides/html/images/scale_weight_hint_multiple.png differ
diff --git a/org.tizen.guides/html/images/segment_control_tree.png b/org.tizen.guides/html/images/segment_control_tree.png
index be07254..0f8e3df 100644
Binary files a/org.tizen.guides/html/images/segment_control_tree.png and b/org.tizen.guides/html/images/segment_control_tree.png differ
diff --git a/org.tizen.guides/html/images/slider_hor_wn.png b/org.tizen.guides/html/images/slider_hor_wn.png
new file mode 100644
index 0000000..501718e
Binary files /dev/null and b/org.tizen.guides/html/images/slider_hor_wn.png differ
diff --git a/org.tizen.guides/html/images/slider_tree.png b/org.tizen.guides/html/images/slider_tree.png
index 5a08337..f3d4816 100644
Binary files a/org.tizen.guides/html/images/slider_tree.png and b/org.tizen.guides/html/images/slider_tree.png differ
diff --git a/org.tizen.guides/html/images/slider_wn.png b/org.tizen.guides/html/images/slider_wn.png
new file mode 100644
index 0000000..b998aa7
Binary files /dev/null and b/org.tizen.guides/html/images/slider_wn.png differ
diff --git a/org.tizen.guides/html/images/smartcard_architecture.png b/org.tizen.guides/html/images/smartcard_architecture.png
new file mode 100644
index 0000000..cee4642
Binary files /dev/null and b/org.tizen.guides/html/images/smartcard_architecture.png differ
diff --git a/org.tizen.guides/html/images/spinner_tree.png b/org.tizen.guides/html/images/spinner_tree.png
index 3f8d8d2..b26ac4c 100644
Binary files a/org.tizen.guides/html/images/spinner_tree.png and b/org.tizen.guides/html/images/spinner_tree.png differ
diff --git a/org.tizen.guides/html/images/toolbar_tree.png b/org.tizen.guides/html/images/toolbar_tree.png
index 8026f32..a23d45f 100644
Binary files a/org.tizen.guides/html/images/toolbar_tree.png and b/org.tizen.guides/html/images/toolbar_tree.png differ
diff --git a/org.tizen.guides/html/images/w_fold.png b/org.tizen.guides/html/images/w_fold.png
deleted file mode 100644
index 1967eb0..0000000
Binary files a/org.tizen.guides/html/images/w_fold.png and /dev/null differ
diff --git a/org.tizen.guides/html/images/win_tree.png b/org.tizen.guides/html/images/win_tree.png
index e17993a..d0fb590 100644
Binary files a/org.tizen.guides/html/images/win_tree.png and b/org.tizen.guides/html/images/win_tree.png differ
diff --git a/org.tizen.devtools/html/images/mn_fold.png b/org.tizen.guides/html/images/wn_division.png
similarity index 66%
rename from org.tizen.devtools/html/images/mn_fold.png
rename to org.tizen.guides/html/images/wn_division.png
index 1f8d62b..11a7876 100644
Binary files a/org.tizen.devtools/html/images/mn_fold.png and b/org.tizen.guides/html/images/wn_division.png differ
diff --git a/org.tizen.guides/html/images/ww_fold.png b/org.tizen.guides/html/images/ww_fold.png
deleted file mode 100644
index b3c1361..0000000
Binary files a/org.tizen.guides/html/images/ww_fold.png and /dev/null differ
diff --git a/org.tizen.guides/html/index.htm b/org.tizen.guides/html/index.htm
index 19f1a00..87dbb0b 100644
--- a/org.tizen.guides/html/index.htm
+++ b/org.tizen.guides/html/index.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 
 
 
@@ -36,6 +36,15 @@
 						
Data Control
 					
 				
+				Communication
+					
+						Bluetooth
+						NFC
+						Push
+						Secure Element
+						Messaging
+					
+								
 				Content
 					
 						Content
@@ -45,9 +54,9 @@
 				
 				Input/Output
 					
+						Archive
 						Filesystem
 						Message Port
-						Archive
 					
 				
 				Multimedia
@@ -56,7 +65,7 @@
 						
Media Key
 						Sound
 					
-				
+					
 				System
 					
 						Human Activity Monitor
@@ -65,8 +74,8 @@
 						System Information
 						System Setting
 						Time
-						FM Radio
-						Web Setting
+						FM Radio						
+						Web Setting						
 					
 				
 				User Interface
@@ -75,15 +84,6 @@
 						
Notification
 					
 				
-				Communication
-					
-						Bluetooth
-						Messaging
-						NFC
-						Push
-						Secure Element
-					
-				
 				Social
 					
 						Account
@@ -93,12 +93,12 @@
 						Contact
 						Data Synchronization
 					
-				
+								
 				Localization
-				Web UIFW
+				Web UIFW		
 				Service Application
-				IME Application
-            
+				IME Application				
+            		
 		
 		W3C/HTML5/Supplementary Features
 			
@@ -118,17 +118,17 @@
 						Media Queries
 						Selectors API Level 1 and Level 2
 						HTML5 session history of browsing contexts
-						CSS Multi-column Layout Module
+						CSS Multi-column Layout Module	
 					
 				
 				Device
 					
 						Battery Status
-						DeviceOrientation Event Specification
+						DeviceOrientation Event Specification		
 						Touch Events version 1
-						Vibration
+						Vibration	
 						HTML5 Browser state
-						Screen Orientation
+						Screen Orientation					
 					
 				
 				Graphics
@@ -156,7 +156,7 @@
 				
Storage
 					
 						File
-						Indexed Database
+						Indexed Database						
 						Web Storage
 						HTML5 Application caches
 						Web SQL Database
@@ -191,17 +191,17 @@
 						Clipboard API and events
 						HTML5 Drag and drop
 					
-				
+								
 				Useful Guides for W3C/HTML5 Features
 					
-						HTML Priorities
+						HTML Priorities						
 						Multiple Screen Support
-						Frame Flattening
+						Frame Flattening		
 						Tizen WebKit Tap Sound Policy
 						Performance Improvement
 						Multiple UI Layouts
 					
-				
+									
 				Supplementary Features
 					
 						Typed Array - Khronos
@@ -209,8 +209,8 @@
 						FullScreen API - Mozilla
 						Camera API (Tizen Extension)
 					
-				
-            
+								
+            		
 		
 	
 
@@ -219,6 +219,7 @@
 		Application Framework
 			
 				Application
+				Application Group
 				Application Manager
 				Badge
 				Bundle
@@ -227,7 +228,9 @@
 				Notification
 				Package Manager
 				Service Application
+				Widget				
 				Shortcut
+				Watch Application
 			
 		
 		Base
@@ -237,37 +240,38 @@
 		
 		Content
 			
-				Download
 				Media Content
 				MIME Type
-
+				Download
             
 		
 		Context
 			
 				Activity Recognition
 				Gesture Recognition
+				Contextual Trigger
+				Contextual History
 			
 		
 		Graphics
 			
 				OpenGL ES
 				TBM Surface
-				Cairo Integration
+				Cairo
 			
 		
 		Location
 			
 				Location
-				Geofence
-				Maps Service
+				Geofence	
+				Maps Service				
 			
 		
 		Messaging
 			
 				Messages
-				Email
 				Push
+				Email				
 			
 		
 		Multimedia
@@ -276,15 +280,19 @@
 				
Camera
 				Image Util
 				Media Codec
+				Media Controller
 				Media Tool
+				Metadata Editor
 				Metadata Extractor
 				Player
 				Radio
 				Recorder
+				Thumbnail Util
 				Tone Player
-				Video Util
 				WAV Player
 				Sound Manager
+				Screen Mirroring Sink
+				Video Util
 			
 		
 		Network
@@ -292,10 +300,12 @@
 				
Connection
 				Bluetooth
 				NFC
+				SmartCard
 				Wi-Fi
 				Wi-Fi Direct
 			
 		
+		OAuth2		
 		Security
 			
 				Key Manager
@@ -304,12 +314,12 @@
 		
 		Social
 			
+				Phonenumber-utils
 				Account Manager
 				Calendar
 				Contacts
 			
-		
-		Sync
+				
 		System
 			
 				Device
@@ -323,7 +333,7 @@
 			
 		
 		Telephony
-		UI
+		
UI Framework
 			
 				EFL
 				Eina
@@ -341,29 +351,49 @@
 				
Ecore
 					
 						Main Loop
-						Thread Usage
+						Thread Usage						
 					
-				
+								
 				Event and Effect
 					
 						Event Types
-						Animation and Effect Types
+						Animation and Effect Types						
 					
-				
-				UI Control
+						
+				UI Components
 					
-						Elementary Widgets
+						Mobile Native
 							
-								Container Widgets
-								UI Widgets
+								Elementary
+									
+										Containers
+										Components
+										UI Component Styles
+									
+								
 							
-						
Widget Preferences
+						
+						Wearable Native
+							
+								Elementary
+									
+										Containers
+										Components
+										UI Component Styles
+									
+								
+								Circle Components	
+							
+												
+						UI Component Preferences	
 					
-				
+								
 				Efl Extension
 				Font Setting
 				EFL UTIL
 				Multiple Screen Support
+				Scalability Support
+				EOM
 			
 		
 		UIX
@@ -373,6 +403,7 @@
 			
 		
 		Web
+		Sync		
 		Porting
 			
 				API Comparison
diff --git a/org.tizen.guides/html/native/app/app_guide_n.htm b/org.tizen.guides/html/native/app/app_guide_n.htm
index 91bdcf8..4ff8624 100644
--- a/org.tizen.guides/html/native/app/app_guide_n.htm
+++ b/org.tizen.guides/html/native/app/app_guide_n.htm
@@ -14,16 +14,17 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Application Framework Tutorials  
-			Application Framework API
+			Application Framework API for Mobile Native
+			Application Framework API for Wearable Native
 			
 	
 	
@@ -34,8 +35,8 @@
   The main application framework features are:
    
 	Application Enables you to manage application state change or system events and control mechanisms that launch other applications.
-	Application Manager
-	 Allows you to retrieve information about an application. 
+	Application Group Enables you to manage application launch mode and grouping.
+	Application Manager	 Allows you to retrieve information about an application. 
 	Badge Allows you to create badges.
 
 	Bundle Enables you to manage bundles and their content.
     Data Control Allows your applications to exchange data.    
@@ -43,8 +44,16 @@
 	Notification Allows you to create and manage notifications.
 
    Package Manager Allows you to install, unistall, and update packages, and store their information. 
    Service Application Allows you to create and manage native service applications.
+   Widget Allows you to create and manage widget applications.
+   
+The following guides apply in mobile applications only:
+	
    Shortcut Allows you to add a shortcut for the Home application.  
    
+  The following guides apply in wearable applications only:
+	
+   Watch Application Allows you to manage a watch application and display the current date and time accurately.  
+   
  
 
 
diff --git a/org.tizen.guides/html/native/app/app_manager_n.htm b/org.tizen.guides/html/native/app/app_manager_n.htm
index 1355598..cab7089 100644
--- a/org.tizen.guides/html/native/app/app_manager_n.htm
+++ b/org.tizen.guides/html/native/app/app_manager_n.htm
@@ -14,16 +14,17 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Application Manager Tutorial 
-			Application Manager API
+			Application Manager API for Mobile Native
+			Application Manager API for Wearable Native 
 			
 	
 
diff --git a/org.tizen.guides/html/native/app/appgroup_n.htm b/org.tizen.guides/html/native/app/appgroup_n.htm
new file mode 100644
index 0000000..456b6f3
--- /dev/null
+++ b/org.tizen.guides/html/native/app/appgroup_n.htm
@@ -0,0 +1,78 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+  Application Group 
+  
+ 
+ 
+ 
+	
+		 
+	
+	
+	
+		Related Info
+		
+			Application Group Tutorial 
+			Application Group API for Mobile Native
+			Application Group API for Wearable Native
+			
+	
+
+
+
+
+Application Group
+You can define the application launch mode and group your applications into entities that can be managed together.
+
+  The main features of the Application Group API include:
+  
+	Defining the application launch mode
+	When an application is launched through an app control, its launch mode defines its behavior:
+		The single launch mode means that the application is launched as a main application (in a new group).
+		The caller launch mode means that the application is launched as a sub application belonging to the same group as the caller application who is causing the application to be launched.
+	You can set the application launch mode in the manifest file using the launch_mode attribute of the <ui-application> element. If the launch mode is set to caller, the application that calls the app control can define the launch mode for the called application using the app_control_set_launch_mode() function. However, if the called application has set its launch mode in its manifest file to single, that setting overrides the caller application's launch mode request.
+	
+	Managing the application group
+	Applications in a same group act as if they are in 1 stack. For example, if an application A wants to send an email using an email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the home button, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.
+	If an application is launched in a group, it can be terminated by the main (first) application in the group. If the main application is terminated or killed, the sub applications in the group are terminated automatically (they can be terminated by the framework even if they are hidden).
+
+	Figure: Group behavior 
+ 
+	
+	
+
+
+
+
+
+
+
+
+
+
+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.guides/html/native/app/application_n.htm b/org.tizen.guides/html/native/app/application_n.htm
index c609440..a5c89dd 100644
--- a/org.tizen.guides/html/native/app/application_n.htm
+++ b/org.tizen.guides/html/native/app/application_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -32,7 +32,8 @@
 		Related Info
 		
 			Application Tutorial
-			Application API   
+			Application API for Mobile Native   
+			Application API for Wearable Native 
 			
 	
 
@@ -211,7 +212,7 @@ int main(int argc, char *argv[])
    }
  
    if (ad->win)
-      elm_win_activate(ad->win);
+      elm_win_activate(ad->win);
 }
 
 Application Controls
@@ -458,13 +459,13 @@ static void app_control(app_control_h app_control, void *user_data)
 		application ID and operation ID when resolving the application control.
 	
 	
-		You can specify the application control information of your application in the application project settings in the IDE; an
+		You can specify the application control information of your application in the application project settings in the IDE; an
 		operation ID must be specified for the application control.
 	  
 
 Using Platform Application Controls
 
-Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the App Control module, you can take advantage of the Tizen base application functionalities. 
+Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the App Control module (in mobile and wearable applications), you can take advantage of the Tizen base application functionalities. 
 
 The Tizen platform provides the platform application controls for the following base applications:
 
@@ -570,7 +571,7 @@ static void app_control(app_control_h app_control, void *user_data)
   
   Handling Alarms
 
-The Alarm API provides functions to launch an application at a specific time. The mechanism involved in launching the application is the AppControl API.
+The Alarm API (in mobile and wearable applications) provides functions to launch an application at a specific time. The mechanism involved in launching the application is the App Control API (in mobile and wearable applications).
 The AppControl API allows launching an application explicitly, giving its package name, or providing certain criteria that the application must meet. For example, the criteria can include the type of data on which the application must be able to operate. The structure containing the criteria is called an appcontrol.
 For more information, see the Launching Applications guide.
   
@@ -579,7 +580,7 @@ static void app_control(app_control_h app_control, void *user_data)
 The Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. As the application is starting, the app_create_cb() callback is executed and the main event loop starts. The application now normally becomes the frontmost window, with focus. When the application loses the frontmost or focus status, the app_pause_cb() callback is invoked and your application goes into a pause state. The pause state means that the application is not terminated but is running in the background. The application can go into a pause state because:
 
   A new application is launched from the request of your application.
-  The user requests to go to the Home screen.
+  The user requests to go to the home screen.
   A system event occurs and causes a resident application with a higher priority (such as an incoming phone call) to become active and hide your application temporarily.
   An alarm is triggered for another application, which becomes the top-most window and hides your application.
  
@@ -597,8 +598,8 @@ static void app_control(app_control_h app_control, void *user_data)
 
 The application state changes are managed by the underlying framework. The following figure and table illustrate the application states.
 
-    Figure: Application states 
-    
+  Figure: Application states 
+    
   
    
    
@@ -634,11 +635,11 @@ static void app_control(app_control_h app_control, void *user_data)
   
   The Application API defines 5 states with corresponding transition handlers. The state transition is notified through a state transition callback function, whether the application is created, running, paused, resumed, or terminated. The application must react to each state change appropriately.
   
-     Figure: Application state transitions 
-  
+  Figure: Application state transitions 
+  
   
   Localizing Application Strings 
-	Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API, which makes strings translatable and places them  in .po (portable object) files. 
+	Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in mobile and wearable applications), which makes strings translatable and places them  in .po (portable object) files. 
 
 
@@ -683,9 +684,9 @@ elm_object_item_translatable_part_text_set(Elm_Object_Item *it, const char *part
 
 Translating Texts Directly
 
-The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary widgets.
+The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary UI components.
 
-It is possible to retrieve the translation for a given text through the i18n_get_text() API from app_i18n.h.
+It is possible to retrieve the translation for a given text through the i18n_get_text() function from app_i18n.h.
 char *i18n_get_text(const char *msgid);
@@ -757,7 +758,7 @@ msgstr[2] "%d Komentarzy"
 
 Handling Language Changes at Runtime
 
-The user can change the system language settings at any time. When that is done, appcore notifies the application, which changed the language used in the Elementary. The widgets receive a "language,changed" signal and reset their text.
+The user can change the system language settings at any time. When that is done, appcore notifies the application, which changed the language used in the Elementary. The UI components receive a "language,changed" signal and reset their text.
 
 This is how to handle the appcore event:
 
diff --git a/org.tizen.guides/html/native/app/badge_n.htm b/org.tizen.guides/html/native/app/badge_n.htm
index 6b58d7f..26821fc 100644
--- a/org.tizen.guides/html/native/app/badge_n.htm
+++ b/org.tizen.guides/html/native/app/badge_n.htm
@@ -14,16 +14,17 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Badge Tutorial 
-			Badge API
+			Badge API for Mobile Native
+			Badge API for Wearable Native
 			
 	
 
@@ -34,7 +35,7 @@
 A badge is an image displayed on the application icon, which informs the user about notifications and events.
 
    Figure: Badge 
-   
+    
 
 
 To create a badge, use the badge_new() method with a writable application ID on your application. The writable application ID enables another application to control your application to manage the badge. You can also configure your application to handle the badge itself.
diff --git a/org.tizen.guides/html/native/app/bundle_n.htm b/org.tizen.guides/html/native/app/bundle_n.htm
index 148d5cd..8bef6eb 100644
--- a/org.tizen.guides/html/native/app/bundle_n.htm
+++ b/org.tizen.guides/html/native/app/bundle_n.htm
@@ -14,16 +14,17 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Bundle Tutorial 
-			Bundle API
+			Bundle API for Mobile Native
+			Bundle API for Wearable Native
 			
 	
 
diff --git a/org.tizen.guides/html/native/app/data_control_n.htm b/org.tizen.guides/html/native/app/data_control_n.htm
index 600dcca..2cb7a33 100644
--- a/org.tizen.guides/html/native/app/data_control_n.htm
+++ b/org.tizen.guides/html/native/app/data_control_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -29,7 +29,8 @@
 		Related Info
 		
 			Data Control Tutorial 
-			Data Control API
+			Data Control API for Mobile Native
+			Data Control API for Wearable Native
 			
 	
 
@@ -39,8 +40,8 @@
 Data Control
 Data control is a standard mechanism for exchanging specific data between applications.
  
-      Figure: Data control mechanism 
-  
+  Figure: Data control mechanism 
+  
  
 All applications can request data shared by other applications using a data control. However, only service applications can provide their own data.
 There are 2 types of data controls:
@@ -118,9 +119,9 @@
 	
 	Exporting DataControl Functionality 
 
-You can export functionalities of your Tizen native application in the application project settings in the IDE. The provider ID, type, and accessibility must be specified for the data control. 
+You can export functionalities of your Tizen native application in the application project settings in the IDE. The provider ID, type, and accessibility must be specified for the data control. 
   Figure: Exporting data control 
-   
+   
   Data Model 
   The data model must be opened to the public to help other applications to use the exported data controls. The data model consists of the following data: 
   
diff --git a/org.tizen.guides/html/native/app/message_port_n.htm b/org.tizen.guides/html/native/app/message_port_n.htm
index 417b3dd..ce535dd 100644
--- a/org.tizen.guides/html/native/app/message_port_n.htm
+++ b/org.tizen.guides/html/native/app/message_port_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -24,7 +24,8 @@
 		Related Info
 		
 			Message Port Tutorial 
-			Message Port API			
+			Message Port API for Mobile Native	
+			Message Port API for Wearable Native
 			
 	
 
@@ -42,19 +43,19 @@
 Check whether the message port of a remote application is registered with the message_port_check_remote_port() function.
 A Tizen application can send messages to another application using the message_port_send_message() function. 
 Another application can receive the messages using the message_port_register_local_port() function.
-    Figure: Uni-directional communication 
-   
+  Figure: Uni-directional communication 
+   
 Bi-directional communication 
 Check whether the trusted message port of a remote application is registered with the message_port_check_remote_port() function.
 A Tizen application can send messages and local message port information to another application using the message_port_send_message_with_local_port() function. This local message port information can be used to send the response messages from the other application which receives these messages. 
 Another application can receive the messages using the message_port_register_local_port() function. The remote message port information can be used to send response messages to the application which sends the messages.
-    Figure: Bi-directional communication 
-  
 
+  Figure: Bi-directional communication 
+   
 
 Trusted Communication
 You can send and receive trusted messages through message port APIs. The trusted message port instance can be retrieved using the message_port_register_trusted_local_port() function. Communication over the trusted message port is allowed only if both applications are signed with a certificate that is uniquely assigned to its developer. 
-     Figure: Trusted message port communication 
-  
+  Figure: Trusted message port communication 
+  
 
 
 
diff --git a/org.tizen.guides/html/native/app/notification_n.htm b/org.tizen.guides/html/native/app/notification_n.htm
index 4958ac0..5ee3dce 100644
--- a/org.tizen.guides/html/native/app/notification_n.htm
+++ b/org.tizen.guides/html/native/app/notification_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -24,7 +24,8 @@
 		Related Info
 		
 			Notification Tutorial
-			Notification API
+			Notification API for Mobile Native
+			Notification API for Wearable Native
 			
 	
 
@@ -36,26 +37,26 @@
 The Tizen Notification API requires the http://tizen.org/privilege/notification privilege.
 
 To use the notification feature:
-To post a simple notification, use the notification_post() function, which accepts a notification handle as a parameter.
+To post a simple notification, use the notification_post() function, which accepts a notification handle as a parameter.
 The posted notification has a default notification icon and the application name as the title.
 To control the detailed behavior of the notification or to show the progress bar in the on-going activity area, use the notification_create() function to get a notification handle and set the details.
 
 Notification Types
 Tizen provides notifications by using a combination of any of the following notification types:
 
-Ticker 
+Ticker 
 Quick panel 
 Badge number 
 Sound 
 
 You can specify the message for the ticker or quick panel, and the badge number for the notification. The display area for quick panel notifications can be one of the following:
-Notification area 
+Notification area 
 The notification area is the reserved space for displaying all notifications, except the on-going notifications.
 On-going area 
 The on-going area is the application screen area and is only used to display notifications for the currently running application.
 
    Figure: Notification and on-going areas 
-  
+   
 
 
 
diff --git a/org.tizen.guides/html/native/app/package_n.htm b/org.tizen.guides/html/native/app/package_n.htm
index 89e1cf6..da65446 100644
--- a/org.tizen.guides/html/native/app/package_n.htm
+++ b/org.tizen.guides/html/native/app/package_n.htm
@@ -14,16 +14,17 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Package Manager Tutorial
-			Package Manager API
+			Package Manager API for Mobile Native
+			Package Manager API for Wearable Native
 			
 	
 
diff --git a/org.tizen.guides/html/native/app/service_app_n.htm b/org.tizen.guides/html/native/app/service_app_n.htm
index 6cf290f..fca9ddc 100644
--- a/org.tizen.guides/html/native/app/service_app_n.htm
+++ b/org.tizen.guides/html/native/app/service_app_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -28,7 +28,8 @@
 		Related Info
 		
 			Service Application Tutorial
-			Service Application API   
+			Service Application API for Mobile Native 
+			Service Application API for Wearable Native
 			
 	
 
@@ -44,7 +45,7 @@
 The following figure and table describe the service application states.
 
     Figure: Running service applications
-  
+    
 
     

   
 
 

    
@@ -137,7 +138,7 @@
       <icon>org.tizen.message.png</icon>
       <label>Message</label>
    </service-application>
-   <!-- Consumer -->
+   <!--Consumer-->
    <service-application component-type="svcapp" auto-restart="true" on-boot="true"
                    appid="org.tizen.message.consumer"
                    exec="/usr/apps/org.tizen.message/bin/msg-consumer-service"
@@ -151,9 +152,29 @@
 component-type
 Set your service application component type to svcapp to define the application as a service application.
 auto-restart
-If set to true, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.
+If set to true, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.
+   
+    
+     
+      
+     
+     
+      
+     
+    
+  Note
This attribute is not supported in Tizen wearable devices.  
 on-boot
-If set to true, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.
+If set to true, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.
+   
+    
+     
+      
+     
+     
+      
+     
+    
+  Note
This attribute is not supported in Tizen wearable devices.  
 
 The following table defines the behaviors resulting from the attribute combinations:
 
diff --git a/org.tizen.guides/html/native/app/shortcut_n.htm b/org.tizen.guides/html/native/app/shortcut_n.htm
index ac0dbd8..4e8d513 100644
--- a/org.tizen.guides/html/native/app/shortcut_n.htm
+++ b/org.tizen.guides/html/native/app/shortcut_n.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		
 	
@@ -23,7 +23,7 @@
 		Related Info
 		
 			Shortcut Tutorial   
-			Shortcut API
+			Shortcut API for Mobile Native
 			
 	
 
@@ -33,6 +33,16 @@
   
 You can add your shortcut for the Home application. The Tizen Shortcut API requires the http://tizen.org/privilege/shortcut privilege.
 
+   
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
 
 To use the shortcut feature:
 To add a shortcut, use the shortcut_add_to_home() function, which requests the Home application to add a new shortcut.
diff --git a/org.tizen.guides/html/native/app/watch_n.htm b/org.tizen.guides/html/native/app/watch_n.htm
new file mode 100644
index 0000000..9c415c5
--- /dev/null
+++ b/org.tizen.guides/html/native/app/watch_n.htm
@@ -0,0 +1,88 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+  Watch Application 
+  
+ 
+ 
+ 
+	
+		
+	
+	
+	
+		Related Info
+		
+			Watch Application Tutorial 
+			Watch Application API for Wearable Native
+			
+	
+
+
+
+
+Watch Application
+Tizen allows you to create a watch application and manage its life-cycle to display the current date and time accurately on the screen.
+
+  
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in wearable applications only.
+  The main features of the Watch Application API include:
+  
+	Managing the application life-cycle
+	You can create and initialize a watch application with the main() function.
+	To start an event loop, use the watch_app_main() function. Before calling this function, set up the watch_app_lifecycle_callback_s structure variable, which contains the required event callbacks.
+	Managing the time handle and displaying the time 
+	To draw an accurate clock in various formats on the screen, use the Watch Application getter APIs with the watch_time_h time handle. You can get the handle with the watch_time_get_current_time() function.
+	Managing the ambient mode
+	In a low-powered wearable device, an ambient mode is available. In this mode, the watch application shows a limited UI and receives only the ambient tick event every minute to reduce power consumption.
+	The details of the limited UI drawn in the ambient mode depend on the device. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 20% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the ambient-support attribute to false in the watch application tizen-manifest.xml file to allow the platform to show a default ambient mode UI:
++<watch-application appid="org.tizen.watch.app" exec="app" ambient-support="true|false">
+
+To use the ambient mode, the user must enable it in the device settings.
+
+
+
+  When a watch application is successfully installed on a device, its UI is visible in the clock menu of the watch settings.
+  
+
+
+
+
+
+
+
+
+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.guides/html/native/app/widget_n.htm b/org.tizen.guides/html/native/app/widget_n.htm
new file mode 100644
index 0000000..51fe887
--- /dev/null
+++ b/org.tizen.guides/html/native/app/widget_n.htm
@@ -0,0 +1,77 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+  Widget 
+  
+ 
+ 
+ 
+	
+		 
+	
+	
+	
+		Related Info
+		
+			Widget Tutorial
+			Widget API for Mobile Native
+			Widget API for Wearable Native
+
+			
+	
+
+
+
+
+Widget
+You can manage the life-cycle of widget applications and show them on the home screen.
+
+  The main features of the Widget API include:
+  
+	Managing the application life-cycle
+	The widget application starts with the main() function, which initializes the application. The widget_app_main() function is used to start the application event loop. Before calling this function, set up the widget_app_lifecycle_callback_s structure variable, which is passed to the function.
+	When initializing the application, edit the manifest file to define the widget settings.
+	
+	Managing multiple widget instances
+	Each widget application can create multiple widget instances that can share the same resources.
+	To get and set customized widget instances, use the widget_app_context_set_tag() and widget_app_context_get_tag() functions. To get the ID of a widget instance, use the widget_app_get_id() function.
+	
+	Creating the widget UI
+	The widget application can draw a UI on the home screen. To do this, you must get the window object of the home screen and draw the UI on it.
+	
+
+  When a widget application is successfully installed on a device, you can see it in the widget list in the Add Widget menu.
+  
+
+
+
+
+
+
+
+
+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.guides/html/native/base/base_guide_n.htm b/org.tizen.guides/html/native/base/base_guide_n.htm
index 35542f6..2e5f921 100644
--- a/org.tizen.guides/html/native/base/base_guide_n.htm
+++ b/org.tizen.guides/html/native/base/base_guide_n.htm
@@ -16,16 +16,17 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Base Tutorials
-			Base API
+			Base API for Mobile Native
+			Base API for Wearable Native
 		
 	
 	
diff --git a/org.tizen.guides/html/native/base/i18n_n.htm b/org.tizen.guides/html/native/base/i18n_n.htm
index 6dcf5bb..b794ec0 100644
--- a/org.tizen.guides/html/native/base/i18n_n.htm
+++ b/org.tizen.guides/html/native/base/i18n_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -38,7 +38,8 @@
 		Related Info
 		
 			i18n Tutorial
-			i18n API
+			i18n API for Mobile Native
+			i18n API for Wearable Native
 		
 	
 	
@@ -51,7 +52,7 @@
 
 Ucalendar
 
-The Ucalendar API is used for converting between a Udate object and a set of integer fields such as I18N_UCALENDAR_YEAR, I18N_UCALENDAR_MONTH, I18N_UCALENDAR_DAY, and I18N_UCALENDAR_HOUR. A Udate object represents a specific instant in time with one millisecond precision.
+The Ucalendar API (in mobile and wearable applications) is used for converting between a Udate object and a set of integer fields such as I18N_UCALENDAR_YEAR, I18N_UCALENDAR_MONTH, I18N_UCALENDAR_DAY, and I18N_UCALENDAR_HOUR. A Udate object represents a specific instant in time with one millisecond precision.
 The types of Ucalendar interpret a Udate according to the rules of a specific calendar system, such as the gregorian or traditional system.
 A Ucalendar object can produce all the time field values needed to implement the date-time formatting for a particular language and calendar style (for example, Japanese-Gregorian, Japanese-Traditional).
 
@@ -107,16 +108,16 @@
 	   
 
 Uchar
-The Uchar API provides a low-level access to the Unicode Character Database.
+The Uchar API (in mobile and wearable applications) provides a low-level access to the Unicode Character Database.
 Unicode assigns each code point (not just the assigned character) values for several properties. Most of them are simple boolean flags, or constants from a small enumerated list. For some properties, values are strings or other relatively more complex types.
 For more information, see About the Unicode Character Database and ICU User Guide chapter on Properties.
 
 
 Ucollator
-The Ucollator API performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the CLDR root sort order. The sorting order can be customized by providing your own set of rules. For more information, see the ICU Collation Customization section of the User Guide.
+The Ucollator API (in mobile and wearable applications) performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the CLDR root sort order. The sorting order can be customized by providing your own set of rules. For more information, see the ICU Collation Customization section of the User Guide.
 
 Udate
-The Udate API consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (i18n_udate_format_h), which can handle practically all normal date formatting and parsing actions.
+The Udate API (in mobile and wearable applications) consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (i18n_udate_format_h), which can handle practically all normal date formatting and parsing actions.
 The Udate format helps you to format and parse dates for any locale. Your code can be completely independent of the locale conventions for months, days of the week, or even the lunar or solar calendar format.
 You can pass in different options for the arguments for date and time style to control the length of the result; you can select from SHORT, MEDIUM, LONG, and FULL. The exact result depends on the locale.
 
@@ -140,13 +141,13 @@
 The date and time formats are specified by the date and time pattern strings. Within the date and time pattern strings, all unquoted ASCII letters (A-Z and a-z) are reserved as pattern letters representing calendar fields. The i18n_udate_format_h handle supports the date and time formatting algorithm and pattern letters defined by the UTS#35 Unicode Locale Data Markup Language (LDML). It is further documented in the ICU User Guide.
 
 Udatepg
-The Udatepg API enables flexible generation of date format patterns, such as "yy-MM-dd". The user can build up the generator by adding successive patterns. After this, a query can be made using a pattern that includes only the desired fields and lengths. The generator returns the a pattern that is most similar to it.
+
The Udatepg API (in mobile and wearable applications) enables flexible generation of date format patterns, such as "yy-MM-dd". The user can build up the generator by adding successive patterns. After this, a query can be made using a pattern that includes only the desired fields and lengths. The generator returns the a pattern that is most similar to it.
 
 The main method is the i18n_udatepg_get_best_pattern() function, since normally the Udatepg API is pre-built with data from a particular locale. However, generators can be built directly from other data as well.
 
 
 Ulocale
-The Ulocale API represents a specific geographical, political, or cultural region. Locale-sensitive operations use the Ulocale functions to tailor information for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user's native country, region, or culture.
+
The Ulocale API (in mobile and wearable applications) represents a specific geographical, political, or cultural region. Locale-sensitive operations use the Ulocale functions to tailor information for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user's native country, region, or culture.
 
 You create a locale with one of the options listed below. Each component is separated by an underscore in the locale string:
 
@@ -179,17 +180,17 @@
 
 Unormalization
 
- The Unicode normalization API is for the standard unicode normalization. All instances of i18n_unormalizer_s are unmodifiable and immutable. Instances returned by i18n_unormalization_get_instance() are singletons that must not be deleted by the caller.
+ The Unicode normalization API (in mobile and wearable applications) is for the standard unicode normalization. All instances of i18n_unormalizer_s are unmodifiable and immutable. Instances returned by i18n_unormalization_get_instance() are singletons that must not be deleted by the caller.
 
 
 Unumber
-The Unumber API helps you to format and parse numbers for any locale. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.
+The Unumber API (in mobile and wearable applications) helps you to format and parse numbers for any locale. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.
 
 Usearch
-The Usearch API provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct.
+The Usearch API (in mobile and wearable applications) provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct.
 
 Ustring
-The Ustring API provides general unicode string handling. Some functions are similar in name, signature, and behavior to the ANSI C <string.h> functions, and other functions provide more Unicode-specific functionality.
+The Ustring API (in mobile and wearable applications) provides general unicode string handling. Some functions are similar in name, signature, and behavior to the ANSI C <string.h> functions, and other functions provide more Unicode-specific functionality.
 The i18n uses 16-bit Unicode (UTF-16) in the form of arrays of i18n_uchar code units. UTF-16 encodes each Unicode code point with either 1 or 2 i18n_uchar code units. This is the default form of Unicode, and a forward-compatible extension of the original, fixed-width form that was known as UCS-2. UTF-16 superseded UCS-2 with Unicode 2.0 in 1996.
 The i18n also handles 16-bit Unicode text with unpaired surrogates. Such text is not well-formed UTF-16. Code-point-related functions treat unpaired surrogates as surrogate code points, such as separate units.
 Although UTF-16 is a variable-width encoding form, such as some legacy multi-byte encodings, it is much more efficient even for random access because the code unit values for single-unit characters versus lead units versus trail units are completely disjoint. This means that it is easy to determine character (code point) boundaries from random offsets in the string.
diff --git a/org.tizen.guides/html/native/content/content_guide_n.htm b/org.tizen.guides/html/native/content/content_guide_n.htm
index 1d01944..52c6026 100644
--- a/org.tizen.guides/html/native/content/content_guide_n.htm
+++ b/org.tizen.guides/html/native/content/content_guide_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
         Content Tutorials
-		Content API
+		Content API for Mobile Native
+		Content API for Wearable Native
             
     
 
@@ -38,12 +39,14 @@
 
 The main content features are:
   
-	 Download  Enables you to download files from the Internet and monitor the download progress and status.
 	 Media Content Provides functions and interfaces that allow you to handle content management and content search.
 	 MIME type Enables you to get the MIME type of a file extension and get a list of associated extensions.
 	 
   
-  
+  The following guides apply in mobile applications only:
+	
+	 Download  Enables you to download files from the Internet and monitor the download progress and status.
+	
    
    
    
diff --git a/org.tizen.guides/html/native/content/download_n.htm b/org.tizen.guides/html/native/content/download_n.htm
index 1cf10d7..e771827 100644
--- a/org.tizen.guides/html/native/content/download_n.htm
+++ b/org.tizen.guides/html/native/content/download_n.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
@@ -28,7 +28,7 @@
         Related Info
         
         Download Tutorial
-		Download API
+		Download API for Mobile Native
             
     
 
@@ -38,13 +38,24 @@
    Download
  You can create and manage one or more download requests. Tizen allows you to create a new download process, configure the download URL or destination, and launch the process.
  
+    
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+ 
  Download States
  
  The following figure illustrates the download states (such as READY and DOWNLOADING), and API functions (such as download_start()) which cause transitions between those states. Functions can be called only from specific states. Every possible scenario must be handled in the code to avoid undefined behavior in the application.
  
 
   Figure: Download states 
-   
+   
 
   The following table defines the download state enumerator values.
  
@@ -102,7 +113,7 @@
  
 
   Figure: User scenario 
-   
+  
Stopping and Destroying a Download
 
diff --git a/org.tizen.guides/html/native/content/media_content_n.htm b/org.tizen.guides/html/native/content/media_content_n.htm
index 15a2f6f..5798c59 100644
--- a/org.tizen.guides/html/native/content/media_content_n.htm
+++ b/org.tizen.guides/html/native/content/media_content_n.htm
@@ -36,14 +36,14 @@
    
    You can get information about media content from the metadata in the content, such as an ID3 or MP4 tag. You can obtain or update data from the media database, which stores metadata for the media files (such as images, videos, and audio) in the device.
   
-    Figure: Media content of the device 
-     
+  Figure: Media content of the device 
+  
The media files are updated using an application (by calling the Content API) or a media scanner. When updating the files in the media scanner, the following limitations apply:
SD card insertion and removal: Media files are updated only in the SD card.
 Rebooting the device: Media files are updated in the internal memory and SD card in the device.
 
-Media content is available to only use the files located in the specific paths. You can get the paths by using the int storage_get_directory(int storage_id, storage_directory_e type, char **path); function. For more information, see the Storage API Reference (in mobile and wearable applications).
+Media content is available to only use the files located in the specific paths. You can get the paths by using the int storage_get_directory(int storage_id, storage_directory_e type, char **path); function. For more information, see the Storage API (in mobile and wearable applications).
The main features of the Content module include:
diff --git a/org.tizen.guides/html/native/content/mime_type_n.htm b/org.tizen.guides/html/native/content/mime_type_n.htm
index a988c29..27e91bb 100644
--- a/org.tizen.guides/html/native/content/mime_type_n.htm
+++ b/org.tizen.guides/html/native/content/mime_type_n.htm
@@ -14,16 +14,17 @@
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
         MIME Type Tutorial
-		MIME Type API
+		MIME Type API for Mobile Native
+		MIME Type API for Wearable Native
             
     
 
@@ -36,7 +37,7 @@
   The MIME Type API obtains a file's MIME types or file extensions using xdgmime. xdgmime reads the MIME information from the /usr/local/share/mime directory, which is updated with the update-mime-database() function in the shared-mime-info package.
   
     Figure: MIME type management 
-  
+    
   
 The main features of the MIME Type API include:
  
diff --git a/org.tizen.guides/html/native/context/activity_recognition_n.htm b/org.tizen.guides/html/native/context/activity_recognition_n.htm
index 092ff2c..bbcd18f 100644
--- a/org.tizen.guides/html/native/context/activity_recognition_n.htm
+++ b/org.tizen.guides/html/native/context/activity_recognition_n.htm
@@ -14,16 +14,17 @@
 
 
 
-
+
     
-        
+         
     
 
     
         Related Info
         
             Activity Recognition Tutorial
-			Activity Recognition API
+			Activity Recognition API for Mobile Native
+			Activity Recognition API for Wearable Native
             
     
 
diff --git a/org.tizen.guides/html/native/context/gesture_recognition_n.htm b/org.tizen.guides/html/native/context/gesture_recognition_n.htm
index 2747178..d5c547a 100644
--- a/org.tizen.guides/html/native/context/gesture_recognition_n.htm
+++ b/org.tizen.guides/html/native/context/gesture_recognition_n.htm
@@ -14,16 +14,17 @@
 
 
 
-
+
     
-        
+         
     
 
     
         Related Info
         
             Gesture Recognition Tutorial
-			Gesture Recognition API
+			Gesture Recognition API for Mobile Native
+			Gesture Recognition API for Wearable Native
             
     
 
@@ -55,7 +56,7 @@
 Move to ear
 The device is moved near to an ear. The event is detected using the acceleration and proximity sensors.
 Figure: Move-to-ear event 
-  
+
 No move
 The device is not moved for a while.
 Pick-up
@@ -63,16 +64,16 @@
 
Shake
 The device is quickly moved back and forth.
 Figure: Shake event 
-  
+
 Snap
 The device is moved along a particular axis.
 Figure: Axes of the device 
-  
+
 The movement is measured with 6 discrete events: +X, -X, +Y, -Y, +Z, and -Z:
 With the display in the portrait mode, the +X, -X, +Z, and -Z snaps are active.
 With the display in the landscape mode, the +Y, -Y, +Z, and -Z snaps are active.
 Figure: Snap events +X, +Y, and +Z 
-  
+
   
 
 
       
  
 
 
 
 
 
   
@@ -87,15 +88,15 @@
 Tilt
 The device is tilted. The event provides changes of the slopes on the X and Y axes, not the current angle of each axis.
 Figure: Tilt event 
-  
+
Turn face down
 The device is turned over and the screen is facing downwards.
 Figure: Face-down event 
-  
+
Wrist up
 The event occurs when wrist-up gesture is performed (in case of a watch device).
 Figure: Wrist-up event
-  
+
diff --git a/org.tizen.guides/html/native/context/history_n.htm b/org.tizen.guides/html/native/context/history_n.htm
index 6d01a14..abb4866 100644
--- a/org.tizen.guides/html/native/context/history_n.htm
+++ b/org.tizen.guides/html/native/context/history_n.htm
@@ -39,15 +39,15 @@
 
 The Tizen platform collects data on the device usage. Based on this data, the applications can take advantage of the user's application usage patterns through statistical analysis.
 
- 
     
     
 
  
      
  
 
-
-    
-     
-    
-    
-     
-    
-   
+Note
This feature is supported in mobile applications only. 
+ 
+     
+      
+     
+     
+      
+     
+   Note
This feature is supported in mobile applications only. 
   
 
 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.
@@ -76,6 +76,7 @@ Once the context_hist
 		
 		
 			Application usage history:
+			
 					CONTEXT_HISTORY_RECENTLY_USED_APP
 					CONTEXT_HISTORY_FREQUENTLY_USED_APP
 					CONTEXT_HISTORY_RARELY_USED_APP
@@ -87,7 +88,7 @@ Once the context_hist
 				
 					Most recently or frequently used applications, in a descending order of the application use counts.
 					Most rarely used applications in removable applications, in an ascending order of the application use counts.
-					Peak time for applications, or the time period when the user most frequently uses an application during the day.
+					
Peak time for applications, or the time period when the user most frequently uses an application during the day. 
 						The result is a sorted list of hours of the day, in a descending order of the application use count in each one-hour time slot.
 					Common settings for applications, or the most common setting values regarding an application or any applications.
 				
diff --git a/org.tizen.guides/html/native/context/trigger_n.htm b/org.tizen.guides/html/native/context/trigger_n.htm
index 85762d2..8e60518 100644
--- a/org.tizen.guides/html/native/context/trigger_n.htm
+++ b/org.tizen.guides/html/native/context/trigger_n.htm
@@ -58,7 +58,7 @@
 Once a rule is composed and registered successfully into the system, a unique rule ID is assigned to it. You can use the rule ID to enable, disable, or permanently remove the rule.
 
 Figure: Rule states
-
+
 
 
@@ -90,7 +90,7 @@
 The following figure illustrates the rule components and their relations.
 
Figure: Rule components
-
+
Event and Conditions
@@ -330,9 +330,8 @@ context_trigger_rule_entry_destroy(condition);
 			
-			
@@ -380,7 +379,7 @@ context_trigger_rule_entry_destroy(condition);
 
 Options
 
-Certain events or conditions require the specification of some option values to clarify their monitoring or computation objective. For example, if an event is defined using CONTEXT_TRIGGER_EVENT_PLACE, the target location must be specified by the place ID that can be retrieved using the Location Manager, as in the following example:
+Certain events or conditions require the specification of some option values to clarify their monitoring or computation objective. For example, if an event is defined using CONTEXT_TRIGGER_EVENT_PLACE, the target location must be specified by the place ID that can be retrieved using the Location Manager, as in the following example:
 // Getting the target place ID through the Location Manager API
@@ -430,7 +429,7 @@ context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_RANK, C
 			
@@ -525,7 +524,7 @@ context_trigger_rule_set_action_notification(disjunction_rule, ...);
 Combining attributes into an event or condition
 
 Some event and condition items provide multiple attributes. The logical connection between attributes must be set properly to fulfill the requirement. For example, when you use CONTEXT_TRIGGER_EVENT_ON_TIME to define a rule "at 4 PM every Monday", the comparisons regarding the 2 attributes, CONTEXT_TRIGGER_TIME_OF_DAY and CONTEXT_TRIGGER_DAY_OF_WEEK must be satisfied together.
-On the contrary, using CONTEXT_TRIGGER_APP_USE_FREQUENCY, if you want to check whether a specific application belongs to the 5 most frequently used applications, or the application was used at least 10 times, the both comparisons against CONTEXT_TRIGGER_RANK and CONTEXT_TRIGGER_TOTAL_COUNT need to be connected by logical disjunction. 
+On the contrary, using CONTEXT_TRIGGER_APP_USE_FREQUENCY, if you want to check whether a specific application belongs to the 5 most frequently used applications, or the application was used at least 10 times, both comparisons against CONTEXT_TRIGGER_RANK and CONTEXT_TRIGGER_TOTAL_COUNT must be connected by a logical disjunction.
 The following example illustrates the cases described above:
 
 diff --git a/org.tizen.guides/html/native/graphics/cairo_n.htm b/org.tizen.guides/html/native/graphics/cairo_n.htm
index 13806e2..525d272 100644
--- a/org.tizen.guides/html/native/graphics/cairo_n.htm
+++ b/org.tizen.guides/html/native/graphics/cairo_n.htm
@@ -10,106 +10,149 @@
     
     
     
-  Cairo Integration
+  Cairo
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Content
         
             Creating an Evas_Object Image
-			Linking Evas_Object Image to Cairo
-			Painting with Cairo
+			Linking Evas_Object Images to Cairo
+			Drawing with Cairo
         
         Related Info
         
-            Cairo Integration Tutorial
-			Cairo API
+            Cairo Tutorial
+			Cairo API for Mobile Native
+			Cairo API for Wearable Native
             
     
 
 
 
  
-  Cairo Integration
+  Cairo
   
-Evas Cairo is the connection between the Cairo buffer and the Evas buffer.
-EFL and more especially Evas are optimized and designed with bitmaps in mind, and it is more complicated to display vector images with EFL. There is an svg loader for evas, which loads a vectorial file as an evas object image, in other words as pixels. But if you want to create graphs, for example to display the evolutions of stocks during time, you need an external library, and this programming guide explains how to link this external library to evas.
-This library is the Cairo API. It is one of the most famous open source libraries for 2D graphics. Evas and EFL already have most of Cairo features, but if you want to display Bezier curves on screen it is advisable to use Cairo.
-The Evas API and Cairo have completely different concepts. Evas knows the state of each object on screen and manipulates the state. So when you create, for example, a rectangle with evas_object_rectangle_add, it is not rendered on screen. After the render is launched, the rectangle may be overlayed by an opaque image and never be rendered on canvas. This is how evas manages the surfaces. Cairo works as a person draws on a paper sheet. Once something is painted on the surface it is rendered on the screen.
+Cairo is an open source library for 2D vector graphics with support for multiple output devices. In Tizen, Cairo can support output to 2 different backends, such as the image and evas-gl (similar to gl) backend. This guide explains how you can link the Cairo image backend with Evas (in mobile and wearable applications), so that Cairo can draw on the image surface and an Evas object can get the image data from the Cairo image buffer. 
+
 
 Creating an Evas_Object Image
 
-This is how to create an Evas_Object. We use an Image object as it is displayed as pixels on the screen.
-Evas_Object *image;
+Cairo and Evas have completely different concepts:
+Evas knows the state of each object on the screen and manipulates the state. So when you create, for example, a rectangle with the evas_object_rectangle_add() function, it is not rendered on the screen when the function is called. In the rendering stage, the rectangle can be overlaid by an opaque image and never be rendered on the canvas.
+Cairo draws as a person on a paper sheet. Once something is drawn on the Cairo surface, it is rendered on the screen.
 
-image = evas_object_image_add(evas);
+First, as shown in the following code snippet, you can define the appdata structure, which contains all the pointers to the objects to be manipulated:
+ 
++typedef struct appdata 
+{
+   Evas_Object *win;
+   Evas_Object *img;
+   cairo_surface_t *surface;
+   cairo_t *cairo;
+   unsigned char *pixels;
+} appdata_s;
 
 
-To have transparent values enabled, we use ARGB8888 colorspace for the pixels. To do that, use the following code:
-evas_object_image_alpha_set(image, EINA_TRUE);
-evas_object_image_colorspace_set(image, EVAS_COLORSPACE_ARGB8888);
+To create a new Evas_Object image, use the evas_object_image_add() function. The image object can be used for displaying as pixels on the screen:
+ 
++appdata_s * ad;
+ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+evas_object_show(ad->win);
+ad->img = evas_object_image_add(evas_object_evas_get(ad->win));
+evas_object_show(ad->img);
 
 
-The image is now ready to be linked to Cairo.
+Linking Evas_Object Images to Cairo
 
-Linking Evas_Object Image to Cairo
+You can now create a Cairo image surface for the provided pixel and other data by using the cairo_image_surface_create_for_data() function. The pixel data is a pointer to a buffer supplied by the application in which you want to write content.
+The size of the row stride is called by the cairo_format_stride_for_width() function. The function provides a stride value that respects all alignment requirements of the accelerated image-rendering code within Cairo.
 
-Now we create the real pixels Cairo uses for painting and EFL for displaying. We allocate the pixels for both Cairo and evas. The size of the row stride is called by cairo_format_stride_for_width. To set the size of the pixels to be allocated, use the following code.
-cairo_format_t image_format;
-cairo_t *cairo;
-cairo_surface_t *surface;
-unsigned char *pixels;
-
-image_format = CAIRO_FORMAT_ARGB32;
-row_stride = cairo_format_stride_for_width(image_format, WIDTH);
-// Create the pixels here
-pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
++int row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);
+ad->pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
+ad->surface = cairo_image_surface_create_for_data(ad->pixels,CAIRO_FORMAT_ARGB32, WIDTH, HEIGHT, row_stride);
 
 
-This is how to create a Cairo structure which uses these pixels:
-surface = cairo_image_surface_create_for_data(pixels, image_format,
-                                              WIDTH, HEIGHT, row_stride);
-
 To create the Cairo context used for all operations, use the following code.
-cairo = cairo_create(surface);
++cairo = cairo_create(ad->surface);
 
 
-This is how to associate the pixels to the Evas_Object Image and set the size of the image to be the same as the one on the Cairo canvas.
-evas_object_image_size_set(image, WIDTH, HEIGHT);
-evas_object_image_fill_set(image, 0, 0, WIDTH, HEIGHT);
-evas_object_image_data_set(image, pixels);
+Associate the pixels (as raw data) to given image object. The pixels must be of the same size and colorspace as the image object.
++evas_object_image_data_set(ad->img, ad->pixels);
 
 
-Each time we finish painting with Cairo, evas renders the pixels on screen with the following code.
-evas_object_image_data_update_add(image, 0, 0, WIDTH, HEIGHT);
+Once you finish painting by using Cairo, Evas renders a particular rectangular region to be redrawn on the screen:
++evas_object_image_data_update_add(ad->img, 0, 0, WIDTH, HEIGHT);
 
 
-Painting with Cairo
+Drawing with Cairo
 
-All painting operations use the Cairo object created previously. To place the pencil at a specific position, use cairo_move_to. To paint a line between the current position and a point on the surface, use cairo_line_to. Here we paint a line with the current style from the point (x, y) 10, 10 to the point 10, 110.
-cairo_move_to(cairo, 10, 10);
-cairo_line_to(cairo, 10, 110);
-
+Before drawing a line, set the current line width or color as a style. For example, you can set the line width as 2 and the line color as opaque red:
++cairo_set_line_width(ad->cairo, 2);
+cairo_set_source_rgba(ad->cairo, 1.0, 0.0, 0.0, 1.0);
 
-Create a rectangle by using the cairo_rectangle API. This call draws a rectangle from position 10,10 and with 100px width and height.
-cairo_rectangle(cairo, 10, 10, 110, 110);
-
+You can draw various lines:
+ 
+To set the start position with a user-specific offset, use the cairo_translate() function. It modifies the current transformation matrix (CTM) by translating the user-space origin by (x, y).
++cairo_translate(ad->cairo, 40, 40);
 
-Change the color of the pen by using the API cairo_set_source_rgba or cairo_set_source_rgb. This call changes the  color to red with half transparency.
-cairo_set_source_rgba(cairo, 1.0, 0.0, 0.0, 0.5);
-
+Cairo uses a connect-the-dots style system when creating a path. To draw a line between 2 points (100,100 and 200,150) on the surface, use the cairo_move_to() and cairo_line_to() functions:
++cairo_move_to(ad->cairo, 100, 100);
+cairo_line_to(ad->cairo, 200, 150);
 
-Changing the size of the pen is done by calling cairo_set_line_width. For a two pixel width use the following code.
-cairo_set_line_width(cairo, 2);
-
+To draw a line from the endpoint of the current path, use the cairo_rel_line_to() function. The offset by (dx, dy) must be specified as (100, -50).
++cairo_rel_line_to(ad->cairo, 100, -50);
+
+To draw a circular arc of the given radius (100 * sqrt(2)) to the current path, use the cairo_arc() function.
+The arc is centered at (200, 200), begins at angle1 (-0.25 * M_PI) and proceeds in the direction of increasing angles to end at angle2 (0.25 * M_PI). If angle2 is less than angle1, it is progressively increased by 2*M_PI until it is greater than angle1.
++cairo_arc(ad->cairo, 200, 200, 100 * sqrt(2), -0.25 * M_PI, 0.25 * M_PI);
+
+To draw a cubic BÃ©zier spline to the path from the end position of the previous path, use the cairo_rel_curve_to() function. You can use the points offset by (-100, -50) and (-100, 50) as the control points. After the call, the current point is offset by (-200, 0).
++cairo_rel_curve_to(ad->cairo, -100, -50, -100, 50, -200, 0);
+
+You can add a line segment to the path from the current point to the beginning of the current sub-path. After this call, the current point is at the joined endpoint of the sub-path. The cairo_close_path() function differs from simply calling the cairo_line_to() function with the equivalent coordinate in the case of stroking: there is a line join connecting the final and initial segments of the sub-path.
++cairo_close_path(ad->cairo);
+
+To create a rectangle, use the cairo_rectangle() function. This call draws a rectangle with 400 px in width and height from point (0, 0).
++cairo_rectangle(ad->cairo, 0, 0, 400, 400);
+
+To stroke the paths, use the cairo_stroke() function. It is a drawing operator that strokes the current path according to the current line width, line join, line cap, and dash settings. After the function call, the current path is cleared from the cairo context.
++cairo_stroke(ad->cairo);
+
+To ensure that any pending Cairo operation are drawn, use the cairo_surface_flush() function after finishing the Cairo drawing:
+
++cairo_surface_flush(ad->surface);
+
+You need to destroy Cairo objects before terminating your application: 
++cairo_destroy(ad->cairo);
+cairo_surface_destroy(ad->surface);
+
+  Figure: Drawing paths and a rectangle with Cairo 
+  
 
-For the complete official Cairo documentation, see http://cairographics.org/documentation/.  
   
 
 
diff --git a/org.tizen.guides/html/native/graphics/graphics_guide_n.htm b/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
index cf12835..0dcb928 100644
--- a/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
+++ b/org.tizen.guides/html/native/graphics/graphics_guide_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Graphics Tutorials
-			UI API
+			UI Framework API for Mobile Native
+			UI Framework API for Wearable Native
             
     
 
@@ -36,7 +37,7 @@
   
    OpenGL ES Enables you to create OpenGL ES applications in Tizen with the EGL layer.
    TBM Surface Provides Tizen Buffer Manager (TBM) surface functions for the graphic buffer in Tizen.
-   Cairo Integration Allows you to integrate Evas images and Cairo surfaces to display vector graphics.
+   Cairo Allows you to use Cairo to draw on the image surface and Evas objects to get the image data.
    
   
 
diff --git a/org.tizen.guides/html/native/graphics/opengles_n.htm b/org.tizen.guides/html/native/graphics/opengles_n.htm
index a4d7b75..466ce70 100644
--- a/org.tizen.guides/html/native/graphics/opengles_n.htm
+++ b/org.tizen.guides/html/native/graphics/opengles_n.htm
@@ -14,9 +14,9 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
@@ -29,7 +29,8 @@
         Related Info
         
             OpenGL ES Tutorial
-			OpenGL ES API
+			OpenGL ES API for Mobile Native
+			OpenGL ES API for Wearable Native
             
     
 
@@ -40,12 +41,12 @@
  
 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 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 (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.)
 
 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.
 
-     Figure: OpenGL ES structure 
-     
+  Figure: OpenGL ES structure 
+     
 
 OpenGL ES in Tizen
 
@@ -53,10 +54,10 @@
 
 Tizen native applications do not depend on the Window system, because the Window system is an internal Tizen module, which can be enhanced or replaced. EFL provides a method that draws the OpenGL ES content and encapsulates the EGL and the native Window system.
 
-      Figure: OpenGL ES and EFL 
-     
+  Figure: OpenGL ES and EFL 
+     
 
-A GLView creates a drawable GL surface for the application, and sets up all the required callbacks. The application can use GLView with various widgets, such as toolbar or button.
+A GLView creates a drawable GL surface for the application, and sets up all the required callbacks. The application can use GLView with various UI components, such as toolbar or button.
 
 GLView internally uses EvasGL. It is an abstraction layer on top of EGL, which provides the necessary features for most applications in a platform-independent way. Since the goal of EvasGL is to abstract the underlying platform, only a subset of the features can be used by applications.
 
@@ -70,13 +71,13 @@
 
 Setting up an OpenGL ES Surface
 
-The easiest way to use OpenGL ES within a Tizen application is to rely on the GLView widget.
+The easiest way to use OpenGL ES within a Tizen application is to rely on the GLView component.
 
-GLView is a simple Elementary widget that sets up an OpenGL ES target surface and a context, and allows you to embed it in any Tizen application. GLView is basically a wrapper around EvasGL, the OpenGL-ES/EGL abstraction layer of EFL.
+GLView is a simple Elementary UI component that sets up an OpenGL ES target surface and a context, and allows you to embed it in any Tizen application. GLView is basically a wrapper around EvasGL, the OpenGL-ES/EGL abstraction layer of EFL.
 
 To create a basic application:
 
-To develop a GL application, you have to call elm_config_accel_preference_set before creating a window. It makes an application to use GPU.
+To develop a GL application, you have to call elm_config_accel_preference_set before creating a window. It makes an application to use GPU. To use the Direct Rendering mode, you have to set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the elm_config_accel_preference_set() function  and to a GLView object using the elm_glview_mode_set() function. If the GLView object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.
 
 First, you should declare the global variable using ELEMENTARY_GLVIEW_GLOBAL_DEFINE(), then create a GLView object and use ELEMENTARY_GLVIEW_GLOBAL_USE(glview). Now, you can call GL functions.
 
@@ -126,7 +127,7 @@ static Evas_Object *glview_create(Evas_Object *win)
 {
    Evas_Object *glview;
 
-   // This creates the widget itself
+   // This creates the UI component itself
    glview = elm_glview_add(win);
    elm_win_resize_object_add(win, glview);
 
@@ -171,7 +172,7 @@ static void init_gl(Evas_Object *glview)
 }
 	
Callback for resizing
-	The resize callback is called whenever the GLView widget is resized. A common action to take here is to reset the viewport.
+	The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport.
 
 	 // GLView resize function
@@ -361,7 +362,7 @@ ad->ctx = evas_gl_context_create(ad->evasgl, NULL);
 
 Callbacks
 
-Now that we have configured the EvasGL environment, we declare a widget in which all the OpenGL ES transformation takes place. In the example below, we selected the image widget because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.
+Now that we have configured the EvasGL environment, we declare a UI component in which all the OpenGL ES transformation takes place. In the example below, we selected the image component because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.
 
  ad->img = evas_object_image_filled_add(evas_object_evas_get(ad->win));
diff --git a/org.tizen.guides/html/native/graphics/tbm_n.htm b/org.tizen.guides/html/native/graphics/tbm_n.htm
index 181a802..61525ea 100644
--- a/org.tizen.guides/html/native/graphics/tbm_n.htm
+++ b/org.tizen.guides/html/native/graphics/tbm_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             TBM Surface Tutorial
-			TBM Surface API
+			TBM Surface API for Mobile Native
+			TBM Surface API for Wearable Native
             
     
 
diff --git a/org.tizen.guides/html/native/guides_n.htm b/org.tizen.guides/html/native/guides_n.htm
index d65be96..5ec7c7e 100644
--- a/org.tizen.guides/html/native/guides_n.htm
+++ b/org.tizen.guides/html/native/guides_n.htm
@@ -60,20 +60,21 @@
 	Enables you to obtain an access token by using the oauth2 authorization.
Security
 	Enables you to increase the security of your application through cryptography, encryption, and request control.
-	Sync
-	Enables you to provide your application with notification for syncing operation between server and device.	
+	Social
+	Enables you to manage the user's personal data, such as contacts, calendars, and accounts.
System
 	Enables you to handle log messages, device and system information, and manage system settings, sensors, and system storage.
Telephony
 	Enables you handle call, SIM, network, and modem information.
-	UI
+	
UI Framework
 	Enables you to create a visual outlook for your application to ensure the best possible user experience.
UIX
 	Enables you to handle UI extensions, which include managing sound data, such as voice commands, speech-to-text (STT), and text-to-speech (TTS).
Web
 	Enables you to access Web content.
-	Social in mobile applications only
-	Enables you to manage the user's personal data, such as contacts, calendars, and accounts.	
+	Sync in mobile applications only
+	Enables you to receive notifications in your application about syncing operations between a server and the device.	
+
 For information about features not implemented by a specific API:
diff --git a/org.tizen.guides/html/native/location/geofence_n.htm b/org.tizen.guides/html/native/location/geofence_n.htm
index 04bcdac..ad80222 100644
--- a/org.tizen.guides/html/native/location/geofence_n.htm
+++ b/org.tizen.guides/html/native/location/geofence_n.htm
@@ -77,7 +77,7 @@
 Geofence Settings
Tizen provides the user a way of managing the geofence places and fence through the My places application. The following figure shows the default places and supported fences.
Figure: My places 
-   
+  
My places controls the adding, removing, and updating of places and fences. Home, Office, and Car are the default places, and Map, Wi-Fi, and Bluetooth are the supported fence methods. Car supports only Wi-Fi and Bluetooth for a fence method.
diff --git a/org.tizen.guides/html/native/location/location_guide_n.htm b/org.tizen.guides/html/native/location/location_guide_n.htm
index 1b0f1da..56f32a0 100644
--- a/org.tizen.guides/html/native/location/location_guide_n.htm
+++ b/org.tizen.guides/html/native/location/location_guide_n.htm
@@ -20,7 +20,6 @@
     
-        
         Related Info
         
             Location Tutorials
@@ -42,18 +41,15 @@
 	Provides the geographical location of the device.
 
 
-
-Maps Service
-	Allows you to create and use maps service such as geocoder, place, and route.
-
 
 The following guides apply in mobile applications only:
 
 Geofence
 	Allows you to create and use geofences.
+Maps Service
+    Allows you to create and use the maps services, such as geocoder, place searching, and routing.
 
 
-
  
 
 
@@ -76,4 +72,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/location/location_n.htm b/org.tizen.guides/html/native/location/location_n.htm
index 50b47ad..d96cb60 100644
--- a/org.tizen.guides/html/native/location/location_n.htm
+++ b/org.tizen.guides/html/native/location/location_n.htm
@@ -110,13 +110,13 @@
    Location indicator on the screen When the application uses the current location of the user, a location indicator is shown at the top of the screen to explicitly notify the user that the current location data is being used.
  
    
   Figure: Location setting and indicator 
-   
+   
   The location-related functions work differently based on whether the location settings are used.  
   
 Location Settings 
   Tizen provides the user a robust way of controlling the usage of their location data through the device location settings. The following figure shows the various options for enabling or disabling specific positioning technologies and controlling application permissions. 
   Figure: Location settings 
-   
+   
    The GPS setting controls the Global Positioning System usage. It takes GPS satellite signals and provides accurate positioning services generally outdoors. The Network position setting enables the usage of network-based positioning technology, which includes Wi-Fi- and cell tower-based positioning, and improves the coverage of positioning services to indoors. 
   To ensure privacy, all location settings are initially disabled. To enable them, the user must manually toggle the buttons. The manual task required from the user is understood as an implicit user consent. 
   

 	
 
 
 
 CONTEXT_TRIGGER_IN, CONTEXT_TRIGGER_OUT
 		
 		
-				CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY
-				CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY
+			 CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY
+			CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY
 			
 			CONTEXT_TRIGGER_RANK
 			Integer
 
 CONTEXT_TRIGGER_PLACE_ID
 			Integer
 			
-				Place ID. For more information, see the Location guide.
+				Place ID. For more information, see the Location guide.
 			
 		
 		
 		
 		
 	
 	
 	
 	
 
 
    
    
    
  
 
 
      
diff --git a/org.tizen.guides/html/native/location/maps_n.htm b/org.tizen.guides/html/native/location/maps_n.htm
index 32d9699..8308ddf 100644
--- a/org.tizen.guides/html/native/location/maps_n.htm
+++ b/org.tizen.guides/html/native/location/maps_n.htm
@@ -10,11 +10,11 @@
 
-Maps
+Maps Service
-	
+	
 		
 			
 		
@@ -22,142 +22,148 @@
 			
 				Related Info
 				
-					Maps Tutorial
+					Maps Service Tutorial
 					Maps Service API for Mobile Native
 				
 			
 		
 	
 
-	
-		
-			
-				Maps
-				
Maps features include geocoding, reverse geocoding, place searching and route calculation.
-				The main maps features are:
-				
-					Instantiating the Maps Service

-					Allows you to issue an instance of Maps Service, discover and select a Maps Provider and set basic maps	preferences
-					Geocoding and Reverse Geocoding

-					Allows you to determine the geographical location (latitude, longitude) of a specified address and, vise versa, an address of a specified geographical location
-					Place Searching

-					Allows you to find place information
-					Route Searching

-					Allows you to query a route between a pair of geographical points
-				
-				

-				Two Maps Providers are supported:
-					

-						HERE Maps based on HERE REST API
-						MapQuest based on Open MapQuest API
-					
-					A user have to get access key of Maps Providers from developer sites
-					Note that Maps Service must be used under "Term of Use" of Maps Service Providers.
-				
-					Maps Service
-				
-				
-					Using Maps Service allows your Tizen Native Application to:
-					
-						Discover and select a Maps Provider as well as specify basic maps preferences
-						Get geocode (geographical coordinates: latitude and longitude) of a place, specified with address
-						Get reverse geocode (address) of a place, specified with geographical coordinates: latitude and longitude
-						Query the place information, corresponding to specified search keys and filters
-						Query the route that defines a path between a start and destination, passing optionally through
-						specific intermediate location and calculated regarding to specified transportation preferences
-					
-					

-					Asynchronous Maps Service responses are implemented with callback interfaces (functions whose names end with âcbâ)
-					You can use the Maps Service response states as follows:
-					
-						If the Maps Service is working correctly, the response state is set
-						to MAPS_SERVICE_ERROR_NONE
-						If the user revokes a permission for the application to use the Maps Service, the response state is set
-						to MAPS_ERROR_PERMISSION_DENIED
-						If the maps request or maps feature you are trying to use is not supported in the Maps Provider, the response state is set
-						to MAPS_ERROR_NOT_SUPPORTED
-						If the Maps Provider faces problems with accessing the maps server, the response state is set
-						to MAPS_ERROR_NETWORK_UNREACHABLE
-						, MAPS_ERROR_SERVICE_NOT_AVAILABLE
-						or MAPS_ERROR_CONNECTION_TIME_OUT
-					
-				
-
-				
-					Maps Features
-				
-				
-					The following types of geocode requests are provided:
-					
-						Get place coordinates by a free text address
-						Get place coordinates by a free text address within a specified geographical area
-						Get place coordinates by a structured address (the structure with fields such as city, street, building number)
-					
-					The response of geocode request is a geographical location, specified with latitude and longitude values.
-					

-					The only one form of reverse geocode is provided:
-					
-						Get structured address by place coordinates
-					
-					The response of reverse geocode request is structured address information, comprising street, building number, city, postal code, district, state, country, etc.
-					

-					The following types of place search requests are provided:
-					
-						Query place information within a distance around a specified geographical location
-						Query place information within a specified geographical area
-						Query place information by a free text address within a specified geographical area
-					
-					The response of place search request is structured place information, comprising place id, name and URL,
-					address, geographical location and distance from the center of search area, place category, rating, review, image, etc.
-					Note: dependently to Maps Provider, some types of place information may be unavailable.
-					

-					The following types of route search requests are provided:
-					
-						Query route from a start to a destination specified as geographical location
-						Query route passing through a number of geographical locations
-					
-					The response of route calculation request is structured route information, comprising route id,
-					geographical coordinates of start and destination, route bounding box, transportation mode, total distance and duration.
-					Note: dependently to Maps Provider, the route may be present as a list of geographical points or as a list of
-					segments which, in turn, may be present also as a list of geographical points or as a list of maneuvers.
-				
-
-				
-					Privacy Policy
-				
-				
-					TBD
-				
-
-				
-					Maps Settings
-				
-				
-					TBD
-				
+	
 
+Maps Service
+Map service features include geocoding, reverse geocoding, place searching, and route calculation.
 
-			
-		
-	
+

 
 
 
 
  
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+  
+The main Maps Service API features are:
+
+	Discovering and selecting a map provider
+	You can also specifying basic maps preferences.
+	Geocoding and reverse geocoding
+	You can get the geocode (geographical coordinates) of a place based on an address, or the reverse geocode (address) based on the geographical coordinates (latitude and longitude).
+	Searching places
+	You can query place information, corresponding to specified search keys and filters.
+	Searching routes
+	You can query a route that defines a path between a start and destination point, passing optionally through  specific intermediate locations and calculated using a specified transportation method.
+	Handling map service responses
+	You can receive responses from the map service through various callbacks.	
+
 
-	
-	
-	
-	
-		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.
-	
+The following map providers are supported:
+	
+		HERE Maps based on the HERE REST API.
+		MapQuest based on the Open MapQuest API.
+	
+
+ 
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
To use the map service, you must get an access key to the map provider from the provider developer site. The service must be used according to the provider's Term of Use.
+
+Geocodes
+	The following geocode request types are provided:
+	
+		Get place coordinates based on a free text address.
+		Get place coordinates based on a free text address within a specified geographical area.
+		Get place coordinates based on a structured address (a structure with fields, such as city, street, and building number).
+	
+	The geocode response is a geographical location, specified with latitude and longitude values.
+	Only 1 type of reverse geocode request is provided:
+	
+		Get a structured address based on place coordinates.
+	
+	The reverse geocode response is structured address information, comprising, for example, of a street name, building number, city name, postal code, district name, state name, and country.
+	
+
+Place Search
+	The following place search request types are provided:
+	
+		Query place information within a specific distance around a specified geographical location.
+		Query place information within a specified geographical area.
+		Query place information based on a free text address within a specified geographical area.
+	
+	The place search response is structured place information, comprising, for example, of a place ID, name and URL, address, geographical location and distance from the center of the search area, place category, rating, review, and image.
+	
+	 
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
Depending on the map provider, some types of place information can be unavailable.
+
+Route Search
+	The following route search request types are provided:
+	
+		Query a route from a starting point to a destination specified as a geographical location.
+		Query a route passing through a number of geographical locations.
+	
+	The route calculation response is structured route information, comprising, for example, of a route ID,	geographical coordinates of the start and destination point, route bounding box, transportation mode, and total distance and duration.
+	
+	
+	 
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
Depending on the map provider, the route can be presented as a list of geographical points or segments. The segment list can also be presented as a list of geographical points or maneuvers.
+
+
+
+Map Service Responses
+
+	The asynchronous map service responses are implemented with callback interfaces (functions whose names end with cb).
+	To handle the responses, you can use the map service response states:
+	
+		MAPS_SERVICE_ERROR_NONE: The map service is working correctly.
+		MAPS_ERROR_PERMISSION_DENIED: The user has revoked a permission for the application to use the map service.
+		MAPS_ERROR_NOT_SUPPORTED: The map request or feature you are trying to use is not supported in the map provider.
+		MAPS_ERROR_NETWORK_UNREACHABLE, MAPS_ERROR_SERVICE_NOT_AVAILABLE, or  MAPS_ERROR_CONNECTION_TIME_OUT: The map provider cannot access the map server for various reasons.
+		
+
+
+
+
+
+
+
+
+	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.
+
 
-	
+
 
 
 
diff --git a/org.tizen.guides/html/native/messaging/email_n.htm b/org.tizen.guides/html/native/messaging/email_n.htm
index e758683..a647c6e 100644
--- a/org.tizen.guides/html/native/messaging/email_n.htm
+++ b/org.tizen.guides/html/native/messaging/email_n.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
@@ -23,7 +23,7 @@
         Related Info
         
             Email Tutorial
-			Email API
+			Email API for Mobile Native
             
     
 
@@ -33,13 +33,23 @@
 	Email
 Email is a method of exchanging digital messages. Email systems are based on a store-and-forward model, in which email server computer systems accept, forward, deliver, and store messages on behalf of users, who only need to connect to the email infrastructure, typically an email server, with a network-enabled device for the duration of a message submission or retrieval.
 
+   
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
   
 Email provides features for composing, saving, and sending email messages using an SMTP (SMTP used for sending emails through the Internet is described in the RFC5321/5322 standards). It provides services to applications that make use of the email service.
 
 The Email API can be utilized by any component in the application layer which facilitates the end user to perform email messaging. For example, the Email APIs can be invoked by a multimedia module when the user wants to send a media file through email, or by an email application when the user tries to send an email message.
   
-     Figure: Email service architecture 
-     
+  Figure: Email service architecture 
+     
   
 
 The main features of the Email API include:
diff --git a/org.tizen.guides/html/native/messaging/messages_n.htm b/org.tizen.guides/html/native/messaging/messages_n.htm
index 9d53b46..63acb27 100644
--- a/org.tizen.guides/html/native/messaging/messages_n.htm
+++ b/org.tizen.guides/html/native/messaging/messages_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Messages Tutorial
-			Messages API
+			Messages API for Mobile Native
+			Messages API for Wearable Native
             
     
 
diff --git a/org.tizen.guides/html/native/messaging/messaging_guide_n.htm b/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
index bec9e62..6d5f543 100644
--- a/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
+++ b/org.tizen.guides/html/native/messaging/messaging_guide_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Messaging Tutorials
-			Messaging API
+			Messaging API for Mobile Native
+			Messaging API for Wearable Native
             
     
 
@@ -35,9 +36,12 @@
   The main messaging features are:
   
 	Messages Provides you with access to the device text and multimedia messaging capabilities.
-	EmailAllows you to create and send emails.
 	PushAllows you to push events from an application server to your application on a Tizen device.
   
+  The following guides apply in mobile applications only:
+	
+	EmailAllows you to create and send emails.
+	
   
 
 
diff --git a/org.tizen.guides/html/native/messaging/push_n.htm b/org.tizen.guides/html/native/messaging/push_n.htm
index ac0e4d4..4d3b7b6 100644
--- a/org.tizen.guides/html/native/messaging/push_n.htm
+++ b/org.tizen.guides/html/native/messaging/push_n.htm
@@ -14,9 +14,9 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
@@ -24,7 +24,8 @@
         Related Info
         
             Push Tutorial
-			Push API
+			Push API for Mobile Native
+			Push API for Wearable Native
             
     
 
@@ -34,7 +35,7 @@
 
 Push enables you to push events from an application server to your application on a Tizen device. 
   Figure: Push messaging service 
-   
+   
   Once your application is successfully registered in the push server through the push daemon on the device, your application server can send push messages to the application in that particular device. 
   When a push message arrives when the application is running, it is automatically delivered to the application. If not, the daemon makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a LAUNCH option. In this case, the daemon forcibly launches the application and hands over the message to the application as an app control.
 
@@ -107,7 +108,7 @@
   Service Architecture 
   The following figure illustrates the service architecture of the Tizen push messaging service. 
   Figure: Service architecture 
-   
+   
   The following steps illustrate a typical scenario for using the push messaging service on a Tizen device: 
    
    The application on the device registers for the push messaging service. 
diff --git a/org.tizen.guides/html/native/multimedia/camera_n.htm b/org.tizen.guides/html/native/multimedia/camera_n.htm
index 58d51d1..65f191c 100644
--- a/org.tizen.guides/html/native/multimedia/camera_n.htm
+++ b/org.tizen.guides/html/native/multimedia/camera_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Camera Tutorial
-			Camera API
+			Camera API for Mobile Native
+			Camera API for Wearable Native
         
     
 
@@ -34,7 +35,7 @@
  Tizen offers basic camera features, including preview and capture. It allows you to capture still images with the device's internal camera and keep images on your target device. 
  
  Figure: Camera image examples 
-  
+ 
  
   The main features of the Camera API include: 
    
@@ -79,7 +80,7 @@
 
   The following figure illustrates the camera state changes in the normal mode: 
   Figure: Camera states in the normal mode 
-   
+   
   
   To display the camera preview, use the StartPreview() function. 
   
diff --git a/org.tizen.guides/html/native/multimedia/image_util_n.htm b/org.tizen.guides/html/native/multimedia/image_util_n.htm
index 2dc49e3..481d65c 100644
--- a/org.tizen.guides/html/native/multimedia/image_util_n.htm
+++ b/org.tizen.guides/html/native/multimedia/image_util_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Image Util Tutorial
-			Image Util API
+			Image Util API for Mobile Native
+			Image Util API for Wearable Native
         
     
 
diff --git a/org.tizen.guides/html/native/multimedia/media_codecs_n.htm b/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
index 7851a04..ed8fda8 100644
--- a/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
+++ b/org.tizen.guides/html/native/multimedia/media_codecs_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Media Codec Tutorial
-			Media Codec API
+			Media Codec API for Mobile Native
+			Media Codec API for Wearable Native
         
     
 
@@ -47,7 +48,7 @@
   
   The following figures illustrate the general media state changes. 
   Figure: Media state changes 
-   
+   
 
 
 
diff --git a/org.tizen.guides/html/native/multimedia/media_tools_n.htm b/org.tizen.guides/html/native/multimedia/media_tools_n.htm
index e5d0153..e37639e 100644
--- a/org.tizen.guides/html/native/multimedia/media_tools_n.htm
+++ b/org.tizen.guides/html/native/multimedia/media_tools_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Media Tool Tutorial
-			Media Tool API
+			Media Tool API for Mobile Native
+			Media Tool API for Wearable Native
         
     
 
diff --git a/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm b/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
index 9ca82d2..b3f0469 100644
--- a/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
+++ b/org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
         Metadata Extractor Tutorials
-		Metadata Extractor API
+		Metadata Extractor API for Mobile Native
+		Metadata Extractor API for Wearable Native
             
     
 
@@ -34,7 +35,7 @@
 Media files, such as mp3 and mp4 files, contain metadata. Metadata extractor enables you to extract metadata from the media files.
  
  Figure: Getting metadata 
-  
+ 
  
   The metadata extractor can only be used with video and audio files only. It is not supported in the image files.
   The following table lists the extractable metadata.
diff --git a/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm b/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
index 742e8b2..0171954 100644
--- a/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
+++ b/org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm
@@ -62,6 +62,8 @@
 	Enables you to play WAV files.	
 	Sound Manager 
 	Enables you to control the audio behavior of your application.
+	Screen Mirroring Sink 
+	Enables you to mirror the device screen and sound to another device wirelessly.	
 
  
 The following guides apply in mobile applications only:
diff --git a/org.tizen.guides/html/native/multimedia/player_n.htm b/org.tizen.guides/html/native/multimedia/player_n.htm
index ed04a53..97a8858 100644
--- a/org.tizen.guides/html/native/multimedia/player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/player_n.htm
@@ -14,9 +14,9 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
@@ -30,7 +30,8 @@
         Related Info
         
             Player Tutorial
-			Player API
+			Player API for Mobile Native
+			Player API for Wearable Native
         
     
 
@@ -49,7 +50,7 @@
 	Enables you to set specific URLs for streaming media playback.	
 
    
-The Player API enables your application to play video and sound. It supports 3 content formats: file, network stream, and memory. It also provides the following features:
+The Player API (in mobile and wearable applications) enables your application to play video and sound. It supports 3 content formats: file, network stream, and memory. It also provides the following features:
 
 Operating general controls for the audio or video content, such as play, pause, resume, and stop 
 Moving the audio or video content based on time
@@ -59,7 +60,7 @@
 Playing multiple audio streams
 
 The maximum count of a player instance is limited by the system and multimedia resources. The maximum count is a system-wide count and it can be applied depending on the CPU model, CPU speed, CPU core number, CPU load from other applications, and the available memory. Thus, the exact count can be smaller than the maximum count, in which case the prepare functions fail. A reasonable working player count is under 10.
-The player works based on the audio session manager policy. This means that an application can be interrupted by another application if a resource is in conflict or it has an audio policy rule to follow. You can change the session's property directly by using the Sound Manager API.
+The player works based on the audio session manager policy. This means that an application can be interrupted by another application if a resource is in conflict or it has an audio policy rule to follow. You can change the session's property directly by using the Sound Manager API (in mobile and wearable applications).
 The callback interface specifies the functions used to notify the player status during playback events. Since the player engine works asynchronously, you must implement this listener to ensure that the player flows correctly. When each player operation is completed, an event is generated, and the player_completed_cb() function is called. If an error occurs in the player engine, you are notified if you have registered the player_error_cb() callback.
 If the player state is changed to ready, the multimedia resource is available and you can get content information of the media. You can also get content information in a playing state in some cases of playback streaming.
 
@@ -76,10 +77,10 @@
 
   The following figure illustrates the general player state changes: 
   Figure: Player state changes 
-   
+   
   The following figure illustrates what happens when the player gets interrupted by the system: 
   Figure: Player states when interrupted by system 
-   
+   
   
   Handling Video 
   Tizen enables your application to play video, and it uses its own user surface. The surface requires a drawing area, so you have to get an overlay region and set it to the player instance to display the drawing area: 
@@ -98,8 +99,8 @@
   In case of a video interruption, the state can be READY due to the resource restriction in the system.  
   
   The following figure illustrates what happens when the player gets interrupted by the system. 
-  Figure: Player states when interrupted by system 
-
+Figure: Player states when interrupted by system 
+
 Features
 The main features of the Player API include:
 
diff --git a/org.tizen.guides/html/native/multimedia/radio_n.htm b/org.tizen.guides/html/native/multimedia/radio_n.htm
index bba5647..3add0fb 100644
--- a/org.tizen.guides/html/native/multimedia/radio_n.htm
+++ b/org.tizen.guides/html/native/multimedia/radio_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Radio Tutorial
-			Radio API
+			Radio API for Mobile Native
+			Radio API for Wearable Native
         
     
 
@@ -49,7 +50,7 @@
 The following figure illustrates the general radio state changes.
 
   Figure: Radio state changes 
-   
+   
 
 
 
diff --git a/org.tizen.guides/html/native/multimedia/recorder_n.htm b/org.tizen.guides/html/native/multimedia/recorder_n.htm
index f4f90dd..4f9a14a 100644
--- a/org.tizen.guides/html/native/multimedia/recorder_n.htm
+++ b/org.tizen.guides/html/native/multimedia/recorder_n.htm
@@ -14,9 +14,9 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
@@ -24,8 +24,10 @@
         Related Info
         
             Recorder Tutorial
-			Recorder API
-			Camera API
+			Recorder API for Mobile Native
+			Camera API for Mobile Native
+			Recorder API for Wearable Native
+			Camera API for Wearable Native
         
     
 
@@ -54,7 +56,7 @@
 
   The following figure illustrates the general recorder state changes. 
   Figure: Recorder states 
-   
+   
   
      
diff --git a/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm b/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
index 7d25dcd..95c78e1 100755
--- a/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
+++ b/org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm
@@ -10,7 +10,7 @@
     
-  Screen Mirroring
+  Screen Mirroring Sink
 
@@ -20,43 +20,39 @@
     
-		Content
-		
-			Screen Mirroring sink
-        
         Related Info
         
-            Screen Mirroring Tutorial
-			Screen Mirroring sink API
+            Screen Mirroring Sink Tutorial
+			Screen Mirroring Sink API for Mobile Native
+			Screen Mirroring Sink API for Wearable Native
         
     

-Screen Mirroring
+Screen Mirroring Sink
 
- Screen Mirroring enables your application to mirror deviceâs screen and sound to other device wirelessly. It follows Wi-Fi Display Technical Specification and supports a feature as sink.
-  The main features of Screen Mirroring API include :
+ You can mirror the device screen and sound to another device wirelessly using the screen mirroring feature. It follows the Wi-Fi Display Technical Specification and supports the feature as a sink, which receives shared data from a source device that supports the Wi-Fi Display, and displays it.
+  The main features of the Screen Mirroring Sink API include:
   
-   Screen Mirroring sink
-	The screen mirroring sink receives shared data from the source device which support Wi-Fi Display and display it.
-  
-  Screen Mirroring sink
-  The screen mirroring sink receives shared data from the source device which support Wi-Fi Display and display it.
-  The screen mirroring sink API gives you the ability to connect / disconnect with screen mirroring source, start / pause / resume screen mirroring sink, set resolution or display, register callback function to check state change.
-  You should register the callback function using scmirroring_sink_set_state_changed_cb() to check screen mirroring state. The callback is called for state and error of screen mirroring.
-  All functions that change the state are synchronous except scmirroring_sink_connect(), scmirroring_sink_start(), scmirroring_sink_pause(), and scmirroring_sink_resume(). 
-  Thus the result is passed to the application via the callback mechanism.
-  

-
-  The following figure illustrates the state diagram of screen mirroring sink:
-  Figure 1 The state diagram of screen mirroring sink
-  
+   Managing the connection to the screen mirroring source
+   You can connect to and disconnect from a screen mirroring source, and start, pause, and resume the screen mirroring sink.
+   
+   Setting the properties
+   You can set the resolution or display for the mirror.
+   
+   Monitoring state changes in the screen mirroring source
+   To track state changes, you can register a callback with the scmirroring_sink_set_state_changed_cb() function. The callback is triggered when the screen mirroring state changes or an error occurs.
+   Since all functions that change the state are synchronous (except for scmirroring_sink_connect(), scmirroring_sink_start(), scmirroring_sink_pause(), and scmirroring_sink_resume()) most function results are passed to the application through the callback mechanism.
+   
+   
 
+  The following figures illustrates the state and function call diagrams of the screen mirroring sink.
+  Figure: State diagram
+  
 
-  The following figure illustrates the function call diagram of screen mirroring sink:
-  Figure 2 The function call diagram of screen mirroring sink
-  
+  Figure: Function call diagram
+  
 
 
 
diff --git a/org.tizen.guides/html/native/multimedia/sound_manager_n.htm b/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
index 82a9392..8ce710a 100644
--- a/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
+++ b/org.tizen.guides/html/native/multimedia/sound_manager_n.htm
@@ -14,9 +14,9 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
@@ -29,7 +29,8 @@
         Related Info
         
             Sound Manager Tutorial
-			Sound Manager API
+			Sound Manager API for Mobile Native
+			Sound Manager API for Wearable Native
         
     
 
@@ -75,9 +76,9 @@
 
 The alarm, notification, emergency, and VOIP sessions are prioritized over the media session. For example, when an alarm is activated while you are playing a media file, the system pauses the media session, and the alarm session gets the permission to play its sound.
 
-You can set options for how to start a new media session or respond to an audio interruption during an active media session using the sound_session_option_for_start_e and sound_session_option_for_during_play_e enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.
+You can set options for how to start a new media session or respond to an audio interruption during an active media session using the sound_session_option_for_start_e (in mobile and wearable applications) and sound_session_option_for_during_play_e (in mobile and wearable applications) enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.
 
-You can also set options for resuming the media session when the interruption ends by using the sound_session_option_for_resumption_e enumerator. The sound system notifies the media session when the interruption ends, and you are able to resume your session.
+You can also set options for resuming the media session when the interruption ends by using the sound_session_option_for_resumption_e enumerator (in mobile and wearable applications). The sound system notifies the media session when the interruption ends, and you are able to resume your session.
 
 Sound Device Query
 The audio behavior of your application must differ in accordance with the various sound devices that are connected.
@@ -93,7 +94,7 @@
 
 To get a notification when the sound device connection or information has changed, register the sound_manager_set_device_connected_cb() and sound_manager_set_device_information_changed_cb() callbacks. The initial state of the connected sound device is deactivated.
 
-When getting a sound device list or setting callbacks, use the sound_device_mask_e enumerator to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need.   
+When getting a sound device list or setting callbacks, use the sound_device_mask_e enumerator (in mobile and wearable applications) to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need.   
 
 
 
diff --git a/org.tizen.guides/html/native/multimedia/tone_player_n.htm b/org.tizen.guides/html/native/multimedia/tone_player_n.htm
index d0fec28..4576ef1 100644
--- a/org.tizen.guides/html/native/multimedia/tone_player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/tone_player_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Tone Player Tutorial
-			Tone Player API
+			Tone Player API for Mobile Native
+			Tone Player API for Wearable Native
         
     
 
@@ -40,7 +41,7 @@
 
   The following figures illustrate the general tone player states, and how the state changes when your application calls the Tone player API. 
   Figure: Tone player states 
-      
+      
 
   
 
diff --git a/org.tizen.guides/html/native/multimedia/video_util_n.htm b/org.tizen.guides/html/native/multimedia/video_util_n.htm
index ae5a1e1..bb09088 100644
--- a/org.tizen.guides/html/native/multimedia/video_util_n.htm
+++ b/org.tizen.guides/html/native/multimedia/video_util_n.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
@@ -23,7 +23,7 @@
         Related Info
         
             Video Util Tutorial
-			Video Util API
+			Video Util API for Mobile Native
         
     
 
@@ -40,10 +40,21 @@
 Trim
 A trim chapter is available in the video editor. 
 
+  
 
    
     
     
  
  
 
     
 
 
  
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+
 The following figure shows the result of the video file size change (due to scaling and container and codec format change).
 
  Figure: Transcoder 
-  
+ 
 
  
  The following table lists the supported audio and video codecs (decoder).
diff --git a/org.tizen.guides/html/native/multimedia/wav_player_n.htm b/org.tizen.guides/html/native/multimedia/wav_player_n.htm
index 31a4ecf..dcf5875 100644
--- a/org.tizen.guides/html/native/multimedia/wav_player_n.htm
+++ b/org.tizen.guides/html/native/multimedia/wav_player_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             WAV Player Tutorial
-			WAV Player API
+			WAV Player API for Mobile Native
+			WAV Player API for Wearable Native
         
     
 
@@ -57,7 +58,7 @@
   
   The following figure illustrates the general WAV player state changes. 
   Figure: WAV player state changes 
-   
+   
   
 
 
diff --git a/org.tizen.guides/html/native/network/bluetooth_n.htm b/org.tizen.guides/html/native/network/bluetooth_n.htm
index 0d10a44..8944d95 100644
--- a/org.tizen.guides/html/native/network/bluetooth_n.htm
+++ b/org.tizen.guides/html/native/network/bluetooth_n.htm
@@ -69,7 +69,7 @@
 		
 	Controlling remote audio and video devices with Bluetooth AVRCP
 	The Bluetooth AVRCP API (in mobile and wearable applications) provides functions for remotely controlling audio and video devices.
-	Bluetooth AVRCP is used with A2DP. You can handle remote controls(such as play, pause, stop, equalizer, repeat, shuffle, and scan) through AVRCP.	
+	Bluetooth AVRCP is used with A2DP. You can handle remote controls (such as play, pause, stop, equalizer, repeat, shuffle, and scan) through AVRCP.	
 
 
 Bluetooth use is based on profiles. Tizen Bluetooth features support the Audio, GATT, HDP, HID, and OPP client and server profiles.
diff --git a/org.tizen.guides/html/native/network/connection_n.htm b/org.tizen.guides/html/native/network/connection_n.htm
index e14c00c..f48d866 100644
--- a/org.tizen.guides/html/native/network/connection_n.htm
+++ b/org.tizen.guides/html/native/network/connection_n.htm
@@ -14,9 +14,9 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
@@ -29,7 +29,8 @@
         Related Info
         
             Connection Tutorial
-			Connection API
+			Connection API for Mobile Native
+			Connection API for Wearable Native
             
     
 
@@ -51,9 +52,9 @@
     
 
 Connection Manager
-The Connection Manager API provides functions for managing data connections. It allows you to get a state of the connection interface such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.
+The Connection Manager API (in mobile and wearable applications) provides functions for managing data connections. It allows you to get a state of the connection interface such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.
 
-The Connection Manager API is related with libcurl and sockets. After a network connection is established, you can create a socket on the kernel Linux stack to be used directly or by libcurl or any other network library.
+The Connection Manager API is related with libcurl and sockets. After a network connection is established, you can create a socket on the kernel Linux stack to be used directly or by libcurl or any other network library. If you want to create a socket directly without libcurl, you must check whether you are using the IPv4 or IPv6 environment, and create an applicable IP socket.
 
 The Connection Manager provides the following typedefs and enumerators for managing data connections:
 
@@ -71,7 +72,7 @@
 Enumeration for the address family. It provides IPv4 and IPv6. You can use it as a parameter when you get the IP address of the current connection or proxy.
 
 Connection Profile
-The Connection Profile API provides functions for mapping a connection profile. It allows you to use a connection_profile_h handle for getting details about the connection.
+The Connection Profile API (in mobile and wearable applications) provides functions for mapping a connection profile. It allows you to use a connection_profile_h handle for getting details about the connection.
 
 Each profile is defined by a set of configuration information defined in the connection_profile_h handle. The profile provides different information according to the connection type (such as Bluetooth, cellular, ethernet, and Wi-Fi).
 
@@ -216,7 +217,7 @@
 
 Connection Statistics
 
-Use the Connection Statistics API to gather and reset statistics on the network usage, such as the amount of sent or received data. The statistics also provide functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).
+Use the Connection Statistics API (in mobile and wearable applications) to gather and reset statistics on the network usage, such as the amount of sent or received data. The statistics also provide functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).
 
    
diff --git a/org.tizen.guides/html/native/network/network_guide_n.htm b/org.tizen.guides/html/native/network/network_guide_n.htm
index f90f41c..442d745 100644
--- a/org.tizen.guides/html/native/network/network_guide_n.htm
+++ b/org.tizen.guides/html/native/network/network_guide_n.htm
@@ -14,16 +14,17 @@
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Network Tutorials
-			Network API
+			Network API for Mobile Native
+			Network API for Wearable Native
             
     
 
@@ -37,7 +38,11 @@
 	Connection Enables you to get information about the connected network, set up and configure network connections, and track information, such as sent and received size.
 	BluetoothEnables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices.
 	NFCEnables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card.
+	SmartCardEnables you to access secure elements (SE) through smart card features.
 	Wi-FiEnables you to connect to a Wireless Local Area Network (WLAN) and transfer data over the network.
+	
+The following guides apply in mobile applications only:
+	
 	Wi-Fi DirectEnables you to connect to Wi-Fi Direct™ devices and manage Wi-Fi Direct™ connections.
   
 
diff --git a/org.tizen.guides/html/native/network/nfc_n.htm b/org.tizen.guides/html/native/network/nfc_n.htm
index 053d234..f1055bc 100644
--- a/org.tizen.guides/html/native/network/nfc_n.htm
+++ b/org.tizen.guides/html/native/network/nfc_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             NFC Tutorial
-			NFC API
+			NFC API for Mobile Native
+			NFC API for Wearable Native
             
     
 
@@ -37,7 +38,7 @@
 
 
     NFC management
-		The Manager API provides functions, for example, for:
+		The Manager API (in mobile and wearable applications) provides functions, for example, for:
 
     Initializing and deinitializing NFC
     Enabling and disabling NFC
@@ -49,7 +50,7 @@
 		
 The NFC Data Exchange Format (NDEF) is a packet message format used in the reader/writer and peer-to-peer modes.
 
-The NDEF API provides functions for:
+The NDEF API (in mobile and wearable applications) provides functions for:
 
 
     Creating NDEF records
@@ -59,7 +60,7 @@
 
     
     Reader/writer mode
-	The TAG API provides functions, for example, for:
+	The TAG API (in mobile and wearable applications) provides functions, for example, for:
 
 
     Retrieving the tag type
@@ -70,7 +71,7 @@
 	
     
     Peer-to-peer mode
-	The Peer to Peer API provides functions for:
+	The Peer to Peer API (in mobile and wearable applications) provides functions for:
 
 
     Sending an NDEF message to a peer device
@@ -79,8 +80,12 @@
     
     Card emulation mode
 		The card emulation mode allows an NFC device to function as a smart card. The mode provides access to secure elements (SEs).
+The NFC controller in the device routes all data from the reader directly to the secure element, and an applet handles all of the data in the SE. The user does not participate at all in the operation.
 
-The Card Emulation API provides functions for:
+Figure: Traditional card emulation 
+   
+		
+The Card Emulation API (in mobile and wearable applications) provides functions for:
 
 
     Enabling and disabling the card emulation mode
@@ -104,8 +109,47 @@
     
 
    
  
 
     
+	Host-based card emulation (HCE) 
+HCE is on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element (SE). The data is routed to the user space on which Tizen applications reside, instead of routing the data to a secure element. 
+ 
+Figure: Card emulation with HCE 
+    
+HCE allows you to create your own card emulation system and bypass the SE. This approach brings 2 advantages:
+
+
+In case of UICC type SE, the mobile service provider is involved in the card emulation behavior. With HCE, you are free from the provider influence.
+You do not need SE hardware chips within the device.
+
+The understand HCE behavior, mainly how data is internally routed to the correct application, consider how Tizen handles NFC routing:
+
+Assume that the user has an HCE application or installs one.
+The application has a "AID" value, which is stored in NFC routing table (blue arrow in the following figure).
+When the NFC reader attempts card emulation, the NFC controller checks the routing table to find the application to which the data is sent for emulation (red arrows in the following figure). 
+When the application is uninstalled, the AID value is deleted from the routing table.
+
+Figure: HCE routing 
+   
+	
 
 
+NFC applications can be launched by a card emulation transaction using the application control functionalities. NFC devices can communicate with the point of sales (POS) terminals using the card emulation functionality to, for example, make a payment. 
+If an application control with a following operation is defined in the configuration file and an event caused by the card emulation functionality occurs, the NFC application is launched:
+
+http://tizen.org/appcontrol/operation/nfc/transaction
+A transaction caused by the card emulation functionality occurs.
+
+http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed
+The user selects a default wallet in Tap&Pay.
+
+http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service
+A host APDU service (HCE) APDU event occurs.
+
+http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service
+An off-host APDU service (eSE, UICC) APDU event occurs.
+
+
+
+
 
 
 
diff --git a/org.tizen.guides/html/native/network/smartcard_n.htm b/org.tizen.guides/html/native/network/smartcard_n.htm
new file mode 100644
index 0000000..071b94f
--- /dev/null
+++ b/org.tizen.guides/html/native/network/smartcard_n.htm
@@ -0,0 +1,89 @@
+
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  SmartCard
+ 
+ 
+
+ 
+    
+         
+    
+
+    
+        Related Info
+        
+            SmartCard Tutorial
+			SmartCard API for Mobile Native
+			SmartCard API for Wearable Native
+            
+    
+
+
+
+SmartCard
+
+Tizen enables you to use smart card functionalities, such as accessing a secure element (SE). Before using the SmartCard API, make sure you have a secure element on the device. The smart card service allow you to open a session on an SE, open a channel to the applet in the SE, send a command to the channel, and finally receive a response to the command.
+
+The main components of the SmartCard API include:
+
+
+    SE service
+		The SE Service API (in mobile and wearable applications) allows you to initialize and deinitialize the smart card features, and get the available readers. The SE service functions as a connector to the SE framework system.
+    
+    Reader
+The Reader API (in mobile and wearable applications) allows you to access the SE connected with the selected reader. You can get the reader name and open and close sessions.		
+    
+    Session
+	A session is an open connection between an application on the device and a SE. The Session API (in mobile and wearable applications) allows you to open and close basic and logical channels, and get ATR (answer to reset).
+    
+    Channel
+	A channel is an open connection between an application on the device and an applet on the SE. The Channel API (in mobile and wearable applications) allows you to close channels and transmit application protocol data units (APDU).
+    
+
+
+The following figure illustrates the smart card service architecture in Tizen. The smart card service sends and receives data through the terminal of each SE.
+Figure: Smart card service architecture 
+    
+
+The SmartCard API is a reference implementation of the SIMalliance Open Mobile 3.0 API specification that enables Tizen applications to communicate with secure elements. For more information, see the SimAlliance. The Tizen implementation differs from the original as follows:
+
+Only the transport layer is provided. There is no service layer support in Tizen.
+The "get version" function does not exist. In Tizen, version management is not performed through a function.
+Allocation style differs dramatically. 
+The Open Mobile API can facilitate the memory management by calling the API twice (for an example, see section 6.3.1, Usage pattern, in the SIMalliance Open Mobile 3.0 API specification). However, Tizen SmartCard API does not follow this allocation style.
+For the SE Service object management, Tizen provides functions for initialization and deinitialization.
+
+
+
+
+
+
+
+
+
+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.guides/html/native/network/wifi_direct_n.htm b/org.tizen.guides/html/native/network/wifi_direct_n.htm
index e7c3f73..ca256c0 100644
--- a/org.tizen.guides/html/native/network/wifi_direct_n.htm
+++ b/org.tizen.guides/html/native/network/wifi_direct_n.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
@@ -23,7 +23,7 @@
         Related Info
         
             Wi-Fi Direct Tutorial
-			Wi-Fi Direct API
+			Wi-Fi Direct API for Mobile Native
             
     
 
@@ -33,6 +33,17 @@
 
 Wi-Fi Direct™ (synonym for Wi-Fi P2P (Peer-to-Peer)) is a technology that allows you to find nearby Wi-Fi Direct™ devices and form a Wi-Fi Direct™ group to communicate over a peer-to-peer link without wireless access points (base stations) in the infrastructure mode.
 
+   
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+
 In a Wi-Fi Direct™ group, the group owner works as an access point in the Wi-Fi infrastructure mode and the other devices join the group as clients. A group can be created either by negotiation between 2 devices or in an autonomous mode by a single group owner device. In a negotiation-based group creation, 2 devices compete based on the group owner intent value and the higher intent device becomes a group owner, while the other device becomes a group client. In an autonomous group creation, a device becomes a group owner by itself without any group client.
 
 A Wi-Fi Direct™ device can join an existing group by associating itself with the group owner, as long as the allowed number of clients is not exceeded.
diff --git a/org.tizen.guides/html/native/network/wifi_n.htm b/org.tizen.guides/html/native/network/wifi_n.htm
index 98030ea..1b1e66a 100644
--- a/org.tizen.guides/html/native/network/wifi_n.htm
+++ b/org.tizen.guides/html/native/network/wifi_n.htm
@@ -14,9 +14,9 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
@@ -29,7 +29,8 @@
         Related Info
         
             Wi-Fi Tutorial
-			Wi-Fi API
+			Wi-Fi API for Mobile Native
+			Wi-Fi API for Wearable Native
             
     
 
@@ -60,7 +61,7 @@
   
 Wi-Fi Manager  
 
-The Tizen Wi-Fi Manager API provides functions for managing Wi-Fi connection. 
+The Tizen Wi-Fi Manager API (in mobile and wearable applications) provides functions for managing Wi-Fi connection. 
 Using the Wi-Fi Manager, you can implement features that allow the users of your application to:
 
 Activate and deactivate a Wi-Fi device
@@ -76,14 +77,14 @@
  
   Access Point 
 
-The Access Point API provides functions for managing access points (AP). You need to create an AP handle (wifi_ap_h) for using the API functions. 
+The Access Point API (in mobile and wearable applications) provides functions for managing access points (AP). You need to create an AP handle (wifi_ap_h) for using the API functions. 
 
 The Access Point API supports the following main features:
 Creating and destroying an AP handle
 Getting the network information
 Getting the security information
 
-The following table lists the network information details you can access with the Network Information API.
+The following table lists the network information details you can access with the Network Information API (in mobile and wearable applications).
  
    
      Table: Network information details
@@ -145,7 +146,7 @@
    
 
 
-The following table lists the security information details you can access with the Security Information API.
+The following table lists the security information details you can access with the Security Information API (in mobile and wearable applications).
  
    
      Table: Security information details
@@ -213,7 +214,7 @@
 
 Wi-Fi Monitor 
 
-The Wi-Fi Monitor API provides functions for monitoring the Wi-Fi connection state.
+The Wi-Fi Monitor API (in mobile and wearable applications) provides functions for monitoring the Wi-Fi connection state.
 
 The Wi-Fi Monitor allows you to get the state of the Wi-Fi connection. The state can be:
 
diff --git a/org.tizen.guides/html/native/oauth2/oauth2_guide_n.htm b/org.tizen.guides/html/native/oauth2/oauth2_guide_n.htm
index 63c3679..174647a 100644
--- a/org.tizen.guides/html/native/oauth2/oauth2_guide_n.htm
+++ b/org.tizen.guides/html/native/oauth2/oauth2_guide_n.htm
@@ -22,7 +22,7 @@
     
         Related Info
         
-		OAuth2 Tutorial
+		OAuth2 Tutorial
 		OAuth2 API for Mobile Native
 		OAuth2 API for Wearable Native
             
@@ -32,7 +32,7 @@
 
     
 OAuth2 
-  The OAuth 2.0 authorization framework enables a 3^rd-party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing the 3^rd-party application to obtain access on its own behalf. 
+  The OAuth 2.0 authorization framework enables a 3^rd party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing the 3^rd party application to obtain access on its own behalf. 
   
 Figure: Protocol flow 
   
diff --git a/org.tizen.guides/html/native/porting/api_comparison_n.htm b/org.tizen.guides/html/native/porting/api_comparison_n.htm
index 42e02de..b5dba73 100644
--- a/org.tizen.guides/html/native/porting/api_comparison_n.htm
+++ b/org.tizen.guides/html/native/porting/api_comparison_n.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		
 	
@@ -24,7 +24,7 @@
 	
 		Content
 		
-			Content
+			Content
 			Locales
 			Locations
 			Media
@@ -46,6 +46,18 @@
 API Comparison 
 
 The following table shows where to find information related to the 2.2.1 and 2.3 version APIs.
+
+   
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+
 
@@ -157,7 +169,7 @@
   Guide: Tizen Native App Programming > Programming Guide > UI: Creating the Application UI
Tutorial: Tizen Native App Programming > Tutorials > UI Tutorial
+  UI Framework Tutorials
@@ -177,7 +189,7 @@
  
 Table: API Comparison
 
   
   Graphics Tutorials
-  UI Tutorials
  
   
   Uix: Interaction for Advanced UX
  
 
-Content
+Content
 The Content API has the same functionality as earlier, providing features to manage the local device content. However, the API model has changed.
 
 Creating Content
@@ -257,11 +269,11 @@ _database_updated_cb(media_content_error_e error, int pid, media_content_db_upda
    if (MEDIA_CONTENT_ERROR_NONE == error) 
    { 
       // Database was successfully updated
-      if(path) 
+      if (path) 
          dlog_print(DLOG_INFO, LOG_TAG, "path : %s", path);
-      if(uuid) 
+      if (uuid) 
          dlog_print(DLOG_INFO, LOG_TAG, "uuid : %s", uuid);
-      if(mime_type) 
+      if (mime_type) 
          dlog_print(DLOG_INFO, LOG_TAG, "mime_type : %s", mime_type);
    }
 }
@@ -298,7 +310,7 @@ download_start(download_id);
 
 _state_changed_cb(int download_id, download_state_e state, void *user_data)
 {
-   // The state of the downloading process can be checked here. 
+   // The state of the downloading process can be checked here
 }
 
 
@@ -484,7 +496,7 @@ location_manager_set_position_updated_cb(manager, position_updated, 2, NULL); //
  static void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data)
 {
-   // You can manipulate the obtained location information here. For example:
+   // You can manipulate the obtained location information here, for example:
    dlog_print(DLOG_INFO, LOG_TAG, "The latitude value is: %d", latitude);
 }
 
@@ -706,7 +718,7 @@ messages_set_message_incoming_cb(message_service, _messages_incoming_cb, NULL);
 
 static void _messages_incoming_cb(messages_message_h incoming_message, void *user_data)
 {
-   // Manage the received message here.
+   // Manage the received message here
 }
 
 
@@ -725,7 +737,7 @@ messages_foreach_message(message_service, MESSAGES_MBOX_ALL,  MESSAGES_TYPE_UNKN
 static void _search_messages_cb(messages_message_h message, int index, int result_count, int total_count, void *user_data)
 {
    // Manage the found matching message here
-   return true; // To continue the iteration. To stop the iteration, return false
+   return true; // To continue the iteration, return true; otherwise, return false
 }
 
 
@@ -743,7 +755,7 @@ email_send_message(email, false);
 
 static void email_send_status(email_h email, email_sending_e result, void *user_data)
 {
-   if(EMAIL_SENDING_SUCCEEDED == result) 
+   if (EMAIL_SENDING_SUCCEEDED == result) 
    {
       dlog_print(DLOG_INFO, LOG_TAG, "Email was sent successfully");
    }
@@ -795,13 +807,13 @@ static void _noti_cb(push_service_notification_h notification, void *user_data)
    char *message = NULL;
    long long int time_stamp;
 
-// Retrieve the application data stored in the notification
+   // Retrieve the application data stored in the notification
    push_service_get_notification_data(notification, &data); 
 
-// Retrieve the message carried by the notification
+   // Retrieve the message carried by the notification
    push_service_get_notification_message(notification, &message); 
 
-// Retrieve the time of the notification creation
+   // Retrieve the time of the notification creation
    push_service_get_notification_time(noti, &time_stamp); 
 }
 
@@ -847,7 +859,7 @@ static void app_control(app_control_h app_control, void *data)
 
    app_control_get_operation(app_control, &operation);
 
-// Retrieve notification data
+   // Retrieve notification data
    notification_data = push_service_app_control_to_noti_data(app_control, operation);  from the bundle.
 }
 
@@ -1007,7 +1019,7 @@ account_query_account_by_package_name(account_callback, "The package name o
 
 static bool account_callback(account_h account, void* user_data)
 {
-   // Called once for each account in the database matching the given package name.
+   // Called once for each account in the database matching the given package name
 }
 
 The GetAccountProvidersByCapabilityN() method is covered by the account_type_query_by_provider_feature() function. It does not return the list of account providers, but it invokes the callback specified as the first parameter for each account type that supports the mentioned capability. It takes the capability type as its second parameter. For example, the "http://tizen.org/account/capability/contact" or ACCOUNT_SUPPORTS_CAPABILITY_CONTACT can be used.
@@ -1016,7 +1028,7 @@ account_type_query_by_provider_feature(account_type_callback, "http://tizen
 
 static bool account_type_callback(account_type_h account_type, void* user_data)
 {
-   // Called once for each account type in the database matching given provider capability.
+   // Called once for each account type in the database matching given provider capability
 }
 
 
@@ -1425,7 +1437,7 @@ device_haptic_stop(device, effect);
  In 2.2.1 API, it was done this way: 
 
 	Create the Tizen::Web::Controls::Web *__pWeb object.
-	Set the shape with the __pWeb->Construct() function.
+	Set the shape with the __pWeb->Construct() function.
 	Add the control to a window with the form->AddControl(__pWeb) function.
  
 Initializing in 2.3 is vastly different. A very brief outline is below. For more information, see the tutorial.
diff --git a/org.tizen.guides/html/native/porting/porting_n.htm b/org.tizen.guides/html/native/porting/porting_n.htm
index 87fef0b..3c9034e 100644
--- a/org.tizen.guides/html/native/porting/porting_n.htm
+++ b/org.tizen.guides/html/native/porting/porting_n.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		
 	
@@ -45,6 +45,18 @@
 Porting 
 
 The Tizen 2.3 release comes with a new version of the native API, created to give you a possibility to make fast and lightweight native applications. It replaces the native API used in the previous versions of Tizen (2.2.1). Combined with the Enlightenment Foundation libraries (EFL), the new native API provides powerful tools to create fantastic applications for Tizen. 
+
+   
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+
 The purpose of this guide is to allow all the current Tizen application developers to port their current 2.2.1 native API-based applications to the new 2.3 native API as simply and quickly as possible. This guide contains basic guides on how to port your 2.2.1 native API application to the 2.3 native API. To fully understand the new API, familiarize yourself with the specifications and tutorials. This guide helps you to understand the main differences and start porting your applications.
 For information about the differences between each module of the 2.2.1 and 2.3 version APIs, see API Comparison.
 
@@ -67,18 +79,18 @@
 
 The following figure shows the old 2.2.1 application life-cycle model.
   Figure: 2.2.1 life-cycle model 
-   
+   
  
 The following figure shows the current application life-cycle model.
   Figure: 2.3 life-cycle model 
-   
+   
  
 The following figures show the 2.2.1 and 2.3 state models.
   Figure: 2.2.1 state model 
-    
+    
 
   Figure: 2.3 state model 
-    
+    
   
 The models have some differences, but basically they work very similarly. In both models, there are specific callbacks called during specific application states.
 The main difference is that the old model has 2 life-cycles, one for the backend of the application and another one for the UI. The current model is more unified, so the backend code and the UI of the application are executed in the same callback functions.
@@ -94,7 +106,7 @@
 The installation process in the new Native API is very similar to the one in the old API. The following figure shows the scheme.
 
   Figure: Installation process 
-   
+   
  
 The installation process looks similar to the one from the 2.2.1 Native API. In the new API, the Package Manager is still responsible for managing packages. Use this API for installing, uninstalling, and updating the packages.
 
@@ -102,10 +114,10 @@
 In comparison with the 2.2.1 application package, the 2.3 native application package has fewer directories.
  
    Figure: 2.2.1 package structure 
-   
+   
 
    Figure: 2.3 package structure 
-   
+   
   
 In the current package structure, there are no separate info, setting, and shared directories. Despite this change, the rest of the directories are the same. The file extension remains .tpk.
 
@@ -160,7 +172,7 @@ data directory.
The tutorial for the new 2.3 version is here.
I/O Overview
-In the old Tizen 2.2.1 applications, the operations related to accessing the file system and managing input and output were all defined in the Tizen::Io namespace. Now, all the functionalities of this namespace have been discarded in favor of open source libraries and other modules of the native API. To provide the same functionality as the previous Tizen::Io namespace, the current version of Tizen uses sqlite3 and EGlibc open libraries. It also uses the Message Port and Storage (a System submodule) from the native API, so handle I/O operations using these libraries and API modules.
+In the old Tizen 2.2.1 applications, the operations related to accessing the file system and managing input and output were all defined in the Tizen::Io namespace. Now, all the functionalities of this namespace have been discarded in favor of open source libraries and other modules of the native API. To provide the same functionality as the previous Tizen::Io namespace, the current version of Tizen uses sqlite3 and EGlibc open libraries. It also uses the Message Port and Storage (a System submodule) from the native API, so handle I/O operations using these libraries and API modules.
Object Ownership Policy
In the native API, the 'N' postfix for functions that return a new instance of an object with its ownership is no more supported. In this API, use the object_create() function, and free the memory with a function, such as object_destroy(). The following example is taken from the App Control module:
@@ -178,7 +190,7 @@ char *uri;
 
 error_code = app_control_get_uri(app_control, &uri);
 
-if(uri != NULL)
+if (uri != NULL)
 {
    free(uri);
    uri = NULL;
@@ -191,11 +203,11 @@ if(uri != NULL)
 When the memory levels in the system are extremely low, the system terminates the application and removes it from the memory. However, it is possible to save the application state or context right before this happens. In the 2.2.1 version, it was done using the Tizen::App::IAppCheckpointEventListener interface. In the new native API, every time when the low level memory situation occurs on the device and the system wants to terminate some application, the app_event_cb() callback in that application is called. When you create your application, remember to place the code that must be executed in case of a low memory level in this callback and set the callback using the ui_app_add_event_handler() function.
Scene Transitions
-In the old 2.2.1 model, the UI scene transitions were handled by specific listeners, such as the Tizen::Ui::Controls::IFormBackEventListener and its OnFormBackRequested() event handler to listen to the Back key events for a backward scene transition. In the 2.3 model, all such actions are handled using the EFL and EFL Extension. The EFL has its own view manager for applications, called naviframe. A naviframe is a stack which holds views or pages as its items. When another view is launched, it is pushed on the top of the stack. Only the topmost view is displayed. The old views are stored on the stack. The EFL Extension provides functions to send key events to the naviframe top item or to pop it. Every time the user presses the Back key, the current view is removed from the stack and the view that was right under it becomes the topmost view and is displayed. The transition animation between views is handled by the EFL and depends on the theme applied to the widget.
+In the old 2.2.1 model, the UI scene transitions were handled by specific listeners, such as the Tizen::Ui::Controls::IFormBackEventListener and its OnFormBackRequested() event handler to listen to the Back key events for a backward scene transition. In the 2.3 model, all such actions are handled using the EFL and EFL Extension. The EFL has its own view manager for applications, called naviframe. A naviframe is a stack which holds views or pages as its items. When another view is launched, it is pushed on the top of the stack. Only the topmost view is displayed. The old views are stored on the stack. The EFL Extension provides functions to send key events to the naviframe top item or to pop it. Every time the user presses the Back key, the current view is removed from the stack and the view that was right under it becomes the topmost view and is displayed. The transition animation between views is handled by the EFL and depends on the theme applied to the UI component.
Hardware Keys
-With the arrival of the EFL, handling the hardware key events has changed. Until now, the 2.2.1 model provided the Tizen::Ui::Controls::IFormMenuEventListener interface. This interface delivered the OnFormMenuRequested() event handler to listen to the hardware Menu key events. Now, all this functionality is obtained using the EFL. In the EFL Extension documentation, find functions which enable you to manipulate the key modifiers. Use them to add handling for the hardware key events.
-  
+With the arrival of the EFL, handling the hardware key events has changed. Until now, the 2.2.1 model provided the Tizen::Ui::Controls::IFormMenuEventListener interface. This interface delivered the OnFormMenuRequested() event handler to listen to the hardware Menu key events. Now, all this functionality is obtained using the EFL. In the EFL Extension documentation, find functions which enable you to manipulate the key modifiers. Use them to add handling for the hardware key events.
+
 Exceptions
Normally in the 2.3 API version, the exceptions model functions return an integer which indicates an error value. Usually, the value is 0 if there are no errors and the name format for this value is MODULE_NAME_ERROR_NONE. As in 2.2.1, the current API provides functions to get and set the last error value in the thread. In the 2.3 version, this functionality and the error enumerations are in the Base module. The following example shows how the current native API returns errors.
diff --git a/org.tizen.guides/html/native/security/key_manager_n.htm b/org.tizen.guides/html/native/security/key_manager_n.htm
index 2f886d8..b303d1a 100644
--- a/org.tizen.guides/html/native/security/key_manager_n.htm
+++ b/org.tizen.guides/html/native/security/key_manager_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Key Manager Tutorial
-			 Key Manager API
+			Key Manager API for Mobile Native
+			Key Manager API for Wearable Native
             
     
 
@@ -34,7 +35,7 @@
 The key manager provides functions to securely store keys, certificates, and sensitive data related to users and their password-protected APPs. Additionally, it provides secure cryptographic operations for non-exportable keys without revealing the key values to clients.
 
    Figure: Key manager process 
-   
+    
 
  A key manager stores keys, certificates, and sensitive user data in a central secure repository. The central secure repository is protected by a password.
 
@@ -75,7 +76,7 @@
 
 
 
-The key manager provides 2 types of APIs:
+The key manager provides 2 types of APIs (in mobile and wearable applications):
 
 Secure repository APIs All APPs can use the secure repository APIs to:
 
diff --git a/org.tizen.guides/html/native/security/privilege_n.htm b/org.tizen.guides/html/native/security/privilege_n.htm
index 5a11783..72f84b4 100644
--- a/org.tizen.guides/html/native/security/privilege_n.htm
+++ b/org.tizen.guides/html/native/security/privilege_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Privilege Info Tutorial
-			Privilege Info API
+			Privilege Info API for Mobile Native
+			Privilege Info API for Wearable Native
             
     
 
@@ -31,7 +32,7 @@
 
 Privilege Info
 
-Tizen provides privilege information for user notification.
+Tizen provides privilege information for user notification.
 
 The following information can be retrieved:
 
diff --git a/org.tizen.guides/html/native/security/security_guide_n.htm b/org.tizen.guides/html/native/security/security_guide_n.htm
index 9086bcf..fbab149 100644
--- a/org.tizen.guides/html/native/security/security_guide_n.htm
+++ b/org.tizen.guides/html/native/security/security_guide_n.htm
@@ -14,16 +14,17 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Security Tutorials 
-			Security API
+			Security API for Mobile Native
+			Security API for Wearable Native
 			
 	
 	
diff --git a/org.tizen.guides/html/native/social/account_manager_n.htm b/org.tizen.guides/html/native/social/account_manager_n.htm
index 48228b9..f68405f 100644
--- a/org.tizen.guides/html/native/social/account_manager_n.htm
+++ b/org.tizen.guides/html/native/social/account_manager_n.htm
@@ -14,7 +14,7 @@
 
 
 
-
+
     
         
     
@@ -28,7 +28,7 @@
         Related Info
         
             Account Manager Tutorial
-			Account Manager API
+			Account Manager API for Mobile Native
             
     
 
@@ -39,6 +39,18 @@
   Account Manager
 	
  An account is a collection of information representing the user of a specific provider. 
+ 
+   

 
 
 
 
 
 
 
 
 
 
 
  
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+ 
   The main features of the Account Manager API include:
  
    
diff --git a/org.tizen.guides/html/native/social/calendar_n.htm b/org.tizen.guides/html/native/social/calendar_n.htm
index da97656..ac42b74 100644
--- a/org.tizen.guides/html/native/social/calendar_n.htm
+++ b/org.tizen.guides/html/native/social/calendar_n.htm
@@ -14,7 +14,7 @@
 
 
 
-
+
     
         
     
@@ -35,7 +35,7 @@
         Related Info
         
             Calendar Tutorial
-			Calendar API
+			Calendar API for Mobile Native
             
     
 
@@ -46,9 +46,20 @@
   Calendar
 	
 A calendar is a system of organizing days for social purposes. It is composed of records, such as events and todos. The records consist of subrecords, such as alarms, attendees, or extensions. For example, if an event has a recurrence rule (meaning that it happens multiple times), separate instances are generated for each time the event occurs.
+
+   
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
  
-    Figure: Calendar model 
-  
+  Figure: Calendar model 
+  
   
   The Calendar Service supports vCalendars.
 
@@ -78,8 +89,8 @@
 
 The following figure illustrates the different Calendar entities and their relationships. 
 
-    Figure: Calendar entities 
-    
+  Figure: Calendar entities 
+    
 
 vCalendar supports ver1.0 (vcs) and 2.0 (ics). For more information about vCalendar, see rfc2445.
 
@@ -158,8 +169,8 @@ calendar_db_add_changed_cb(_calendar_event._uri, __event_changed_cb, NULL);An event record describes various properties, such as description, categories, and priority. It also contains information on when the event takes place. In a recurring event, there are more than one instance of the event. Each instance has its corresponding instance record.
 If an event is inserted with rrule (recurrence rule), alarm, and attendee, its data is saved to each database. Generated instances based on the rrule are also stored in the instance database.
  
-    Figure: Views and databases 
-    
+  Figure: Views and databases 
+    
 
 The following table illustrates and example of a recurring event and its instances.
 
@@ -473,8 +484,8 @@ calendar_record_destroy(event, true);
 
 The following figure illustrates how the alarm process works.
  
-    Figure: Alarm process 
-  
+  Figure: Alarm process 
+  
 
 After you add a receiver, the registered alarm is triggered at the reserved time if you insert the alarm as a child to an event record:
 // Set alarm
@@ -637,8 +648,8 @@ calendar_record_set_caltime(event, _calendar_event.end_time, et);
 The record types that have *_id as their property hold identifiers of other records. For example, the attendee and alarm views hold the ID of their corresponding events or todos in the event_id or todo_id property (as children of the corresponding event or todo records).
 The record type properties are other records. For example, an event record has attendee and alarm properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a calendar_view.h header file.
  
-    Figure: Properties 
-    
+  Figure: Properties 
+    
 
 // Create an event with _calendar_event view
 calendar_record_h event = NULL;
diff --git a/org.tizen.guides/html/native/social/contact_n.htm b/org.tizen.guides/html/native/social/contact_n.htm
index 08a1cf3..7cdf609 100644
--- a/org.tizen.guides/html/native/social/contact_n.htm
+++ b/org.tizen.guides/html/native/social/contact_n.htm
@@ -14,7 +14,7 @@
 
 
 
-
+
     
         
     
@@ -34,7 +34,7 @@
         Related Info
         
             Contacts Tutorial
-			Contacts API
+			Contacts API for Mobile Native
             
     
 
@@ -45,12 +45,24 @@
   Contacts
 
 Contact features provide functions for managing contact information, such as address books, groups, persons, and phone logs.
+
+   
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+
 A contact object is always associated with a specific address book. A person object is an aggregation of one or more contacts associated with the same person.
 
 The following figure illustrates the contact structure. There are 3 instances of the same contact in different address books. Person1 is an aggregation of those instances (Contact1, Contact2, and Contact3).
 
-     Figure: Contact structure
-  
+  Figure: Contact structure
+  
 
 The Contact Service supports vCards.
 
@@ -89,8 +101,8 @@
 
 The following figure illustrates the different entities in the Contact Service, and their relationships.
 
-      Figure: Contact entities
-  
+  Figure: Contact entities
+  
 
   Batch Operations
 
@@ -427,21 +439,21 @@ contacts_list_destroy(list, true);
 
 The following figure illustrates the process of creating a person record.
  Figure: Creating a person
-  
+ 
 
 A person record can be linked to another person. Linking is possible even though the contacts have different address books.
 
   The following figure illustrates the process of linking a person.
 
    Figure: Linking a person
-  
+   
 
 A contact record can also be separated from the person record. As a result of unlinking the contact record, a new person is created.
 
  The following figure illustrates the process of unlinking a contact.
 
    Figure: Unlinking a contact
-  
+   
 
   Records
 
@@ -566,7 +578,7 @@ contacts_record_get_str_p(record, _contacts_person.display_name, &display_na
 A record can have properties of the record type - called child records. A record can contain several records of a given type. For example, a contact record (parent) can contain many address records (children).
 
 Figure: Children
-
+
 
 The following code example inserts an address record into a contact record. Note that it is not necessary to insert or destroy all records - just the parent record needs to be inserted into the database to store all the information, and when the parent record is destroyed, the child records are also destroyed automatically.
 
@@ -657,8 +669,8 @@ contacts_record_destroy(contact, true);
 
 The property type record means that the parent record can have child records. For example, a contact record has name, number, and email properties, which means that records of those types can be children of the contact type records. The following figure illustrates macros in a contacts_view.h header file.
 
-    Figure: Properties
-  
+  Figure: Properties
+  
 
 For more information, see the View/Property API.
 
diff --git a/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm b/org.tizen.guides/html/native/social/phonenumber_util_n.htm
similarity index 97%
rename from org.tizen.guides/html/native/telephony/phonenumber_util_n.htm
rename to org.tizen.guides/html/native/social/phonenumber_util_n.htm
index 0cac351..d32a4b4 100644
--- a/org.tizen.guides/html/native/telephony/phonenumber_util_n.htm
+++ b/org.tizen.guides/html/native/social/phonenumber_util_n.htm
@@ -22,7 +22,7 @@
     
         Related Info
         
-            Phonenumber-utils Tutorial
+            Phonenumber-utils Tutorial
 			Phonenumber-utils API for Mobile Native
 			Phonenumber-utils API for Wearable Native
             
diff --git a/org.tizen.guides/html/native/social/social_guide_n.htm b/org.tizen.guides/html/native/social/social_guide_n.htm
index 34ceb09..657d5a4 100644
--- a/org.tizen.guides/html/native/social/social_guide_n.htm
+++ b/org.tizen.guides/html/native/social/social_guide_n.htm
@@ -14,16 +14,17 @@
 
 
 
-
+
     
-        
+         
     
 
     
         Related Info
         
             Social Tutorials
-			Social API
+			Social API for Mobile Native
+			Social API for Wearable Native
             
     
 
@@ -37,6 +38,13 @@
 
   The main social features are:
   
+	Phonenumber-utils 
+	Allows you to parse and format phone numbers.
+  
+  
+ The following guides apply in mobile applications only: 
+  
+  
    Account Manager 
    Allows you to work with accounts in your application by creating, managing and removing individual accounts.
    Calendar Allows you to work with personal scheduling data by managing calendars, events, and todos, and setting reminders and recurrence properties. You can also search for calendar book entries and receive calendar book change notifications.
diff --git a/org.tizen.guides/html/native/sync/sync_guide_n.htm b/org.tizen.guides/html/native/sync/sync_guide_n.htm
index b564a35..8ed398f 100644
--- a/org.tizen.guides/html/native/sync/sync_guide_n.htm
+++ b/org.tizen.guides/html/native/sync/sync_guide_n.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		
 	
@@ -26,156 +26,109 @@
 		Related Info
 		
 			Sync Tutorial
-			Sync Adapter API
-			Sync Manager API
+			Sync API for Mobile Native
 		
 	
 
 
 
 Sync
-Sync Manager provides notification for service application for maintaining consistency of application's data between server and device. The Sync API enables to manage synchronization schedule for apps.
+Tizen provides notifications for a service application to maintain data consistency between a server and the device. You can manage the synchronization schedule for applications.
 
-

-The main features of the Sync Adapter API include:
-
-Register callbacks for notification of a time to start / cancel sync job
-Use app control to start or cancel sync operation, then an application's daemon doesn't need to stay awake
-
- 
-   
-    
-     
-    
-    
-     
-    
-   
- Note
You can test the Sync Adapter functionality only on mobile device and SDK. The wearable device does not support this feature.
-

-
-The main features of the Sync Manager API include:
-
-Add / Remove On demand sync job schedule
-Add / Remove Periodic sync job schedule
-
  
-     
+     
    
     
      Note
     
     You can test the Sync Manager functionality only on mobile device and SDK. The wearable device does not support this feature. The Sync API domain is supported in mobile applications only.
     
    
  
-

-
 
-Sync Rules
+On the device, you can receive notifications when the data changes in the calendar or contacts. To receive the notifications, you must define the applicable capabilities (http://tizen.org/account/capability/calendar for the calendar changes and http://tizen.org/account/capability/contact for the contact changes). If you use the Bundle API, you can deliver the change data to the callback function in the form of user_data by using a key-value pair.
 
-Sync Manager operates sync job based on following five rules:
-Table: Five rules for sync job scheduling
-  
+The main sync features are:
+ 
+ Sync adapter
+ The Sync Adapter API allows you to:
+
+Register callbacks for notifications about the sync job start and cancellation.
+Use an app control to start or cancel the sync operation, so that the application daemon does not need to stay awake.
+
+With the app control mechanism, you can use specific operations exported by other Tizen applications. The mechanism allows you to receive notifications when starting or canceling a sync job without using the App Control API separately. When an app control is used, the application does not need to be in the running state to receive the notifications.
+The following table defines the app control operation details related to a sync operation. The applications does not need to know about them, because the operations are set primitively in the daemon.
+  

+  
-     
-     
-    
-    
-     
-     
-    
-    
-     
-     
+     
+     
+     
-     
-     
+     
+	 
+     
-     
-     
-    
-    
-     
-     
+     
+	 
+     
-  Table: App control operations
+  
    
     Rules Descriptions

Data on server changes When data changed on server, a push message arrives from a server. The server sends the push message to Account Provider Service and service applications.

Data on device changes It is based on capabilities. Data Change Listener notices changes by using Calendar / Contacts API. If there are any changes of Calendar / Contacts data, Sync Manager notices the changes and scheduls a sync job. 
Changing data on Calendar DB includes in the case of Book, Event, and Todo changes. Changing data on Contacts DB includes add, remove, and modify a contacts. Operation Value Description
     
     
Network availability When a change in network status detected, a sync job occurs in the case of changing status of BT, WiFi, and Data Network. APP_CONTROL_OPERATION_START_SYNC http://tizen.org/appcontrol/operation/start_sync Start a sync operation by invoking the service application callback.
     
     
On demand 
Sync schedule on demand is provided through the Sync Manager API. For using this feature, you can use the API, 'sync_manager_add_sync_job(account_h account, const char *capability, bundle *extra)' function. It provides feature for scheduling sync job just one time.

Sync schedule intervals Sync schedule intervals is provided through the Sync Manager API. For using this feature, you can use the API, 'sync_manager_add_periodic_sync_job(account_h account, const char *capability, bundle *extra, sync_period_e sync_period)' function.
-It provides feature for scheduling sync job regularly. Also, you can appoint intervals with using several enum values which provided through the Sync Manager API. 'sync_period'. APP_CONTROL_OPERATION_CANCEL_SYNC http://tizen.org/appcontrol/operation/cancel_sync Cancel a sync operation by invoking the service application callback.
     
    


-
+  
 
-Sync Capabilities
+
+
 
-There are two capabilities. Those can receive data changed notifications of calendar, contacts by setting these capabilities. Also, if you use bundle API, you can deliver in the form of user_data to callback function by using key value pair.
-Table: The kind of sync job options
-  
+Sync manager
+The Sync Manager API include allows you to:
+
+Add and remove the on-demand sync job schedule.
+Add and remove the periodic sync job schedule.
+
+The sync manager operates the sync jobs based on the rules defined in the following table.
+  

+  
-     
-     
+     
+     
-     
-     
+     
+     
-     
-     
+     
+     
-   
-  Table: Sync job scheduling rules
+  
    
     Options Descriptions Rule Description
     
     
"http://tizen.org/account/capability/calendar" An capability for receiving notification when calendar data changed. Adding, updating, and deleting calendar data such as event, book, and todo. Data on the server changes When the data changes on a server, a push message arrives from a server. The server sends the push message to the account provider service and service applications.
     
     
"http://tizen.org/account/capability/contact" An capability for receiving notification when contacts data changed. Adding, updating, and deleting contacts data such as name, phone number, E-mail. Data on the device changes Changes are based on capabilities. The data change listener notices the changes by using the Calendar or Contacts API. If there are any changes in the calendar or contacts data, the sync manager notices the changes and schedules a sync job. 
+	 Changing data in the Calendar database includes adding, updating, and deleting books, events, and todos. Changing data in the Contacts database includes adding, removing, and modifying contacts.
     


-
-
-Sync Options
-
-There are two options which can set attributes of the sync job. It is required using bundle API to set the sync job. So, with the Sync Manager Tutorial and Bundle Tutorial, you can set the sync option for syncing 'On demand' and 'Periodic' job. Also, if you use bundle API, you can deliver in the form of user_data to callback function by using key value pair.
-Table: The kind of sync job options
-  
-   
-     
-     
+     
+     
-     
-     
+     
+     
-     
-     
+     
+     
-  
     Options Descriptions Network availability When a change in the Bluetooth, Wi-Fi, or data network status is detected, a sync job occurs.
     
     
SYNC_OPTION_NO_RETRY An sync option to denote if retrying the sync request is allowed or not. If the option is set as false, a sync operation will retry when the job failed. On demand The on-demand sync means that you can schedule a sync job for one time only. You can use this feature with the sync_manager_add_sync_job() function.
     
     
SYNC_OPTION_EXPEDITED All of sync jobs are passed into sync job queue. This option is limited to the case of priorities. So, it just means giving priority. If the option is set as true, it gives a priority relative to the other jobs. In other words, both 'On demand' and 'Periodic' jobs which came to the queue simultaneously are influenced by the option. Sync schedule intervals Sync schedule intervals mean that you can schedule a sync job to be performed regularly. You can use this feature with the sync_manager_add_periodic_sync_job() function. You can define the sync intervals with various enumerators provided through the Sync Manager API.
     
    


+  
 
+When you create a sync job, you can define options that set the sync job attributes. You need the Bundle API to set the sync job options for both the on-demand and periodic jobs:
+SYNC_OPTION_NO_RETRY
+This sync option defines whether retrying the sync request is allowed. If the option is set to false, the sync operation tries again after the job fails.
+SYNC_OPTION_EXPEDITED
+All sync jobs are passed into a sync job queue. If this sync option is set to true, it gives a priority to its job relative to the other queued jobs. Both the on-demand and periodic jobs in the queue are simultaneously influenced by this option.
 
-App Control
-
-App Control is a standard mechanism for using specific operations exported by applications in Tizen. With the Sync Adapter API, you can receive notifications without using separately App Control API when starting / canceling sync job is scheduled. Also, apps doesn't be running state for receiving the notification anymore.
-Below table is explaining the state of App Control operation which is related to a sync operation. Apps doesn't need to know about it, because those operations are set in daemon primitively.
-
Table: The kind of App Control operations
-  
-   
-    
-     
-     
-     
-    
-    
-     
-	 
-     
-    
-    
-     
-	 
-     
-    
-   
-  Operations Values Descriptions

APP_CONTROL_OPERATION_START_SYNC "http://tizen.org/appcontrol/operation/start_sync" start a sync operation by invoking service application callback.

APP_CONTROL_OPERATION_CANCEL_SYNC "http://tizen.org/appcontrol/operation/cancel_sync" cancel a sync operation by invoking service application callback.


-
+  
 
 
 
diff --git a/org.tizen.guides/html/native/system/device_n.htm b/org.tizen.guides/html/native/system/device_n.htm
index 90d4a13..15beed2 100644
--- a/org.tizen.guides/html/native/system/device_n.htm
+++ b/org.tizen.guides/html/native/system/device_n.htm
@@ -16,16 +16,17 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Device Tutorial	
-			Device API
+			Device API for Mobile Native
+			Device API for Wearable Native
 		
 	
 	
@@ -35,15 +36,15 @@
 
    Device features provide functions to control attached devices. The following functionalities are supported:
    Battery
-   Get the current percentage, the charging state, and the current level state using the Battery API.
+   Get the current percentage, the charging state, and the current level state using the Battery API (in mobile and wearable applications).
    Display
-   Get the number of displays, the maximum brightness of the display, the current brightness, and the display state. You can also change the current brightness and the display state using the Display API.
+   Get the number of displays, the maximum brightness of the display, the current brightness, and the display state. You can also change the current brightness and the display state using the Display API (in mobile and wearable applications).
    Haptic
-   Get the number of haptic devices. You can also open or close the haptic handle, and request the vibration effects to play or stop using the Haptic API.
+   Get the number of haptic devices. You can also open or close the haptic handle, and request the vibration effects to play or stop using the Haptic API (in mobile and wearable applications).
    LED
-   Get the maximum and current brightness of the camera flash LED. You can also change the current brightness of the camera flash LED, and request the service LED to play or stop effects using the Led API.
+   Get the maximum and current brightness of the camera flash LED. You can also change the current brightness of the camera flash LED, and request the service LED to play or stop effects using the Led API (in mobile and wearable applications).
    Power
-   Request the power state to be locked or unlocked, and change the power state using the Power API.
+   Request the power state to be locked or unlocked, and change the power state using the Power API (in mobile and wearable applications).
   
 
 
diff --git a/org.tizen.guides/html/native/system/dlog_n.htm b/org.tizen.guides/html/native/system/dlog_n.htm
index 8ec583c..7f9cff9 100644
--- a/org.tizen.guides/html/native/system/dlog_n.htm
+++ b/org.tizen.guides/html/native/system/dlog_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -33,7 +33,8 @@
 		Related Info
 		
 			dlog Tutorial	
-			dlog API
+			dlog API for Mobile Native
+			dlog API for Wearable Native
 		
 	
 	
@@ -45,7 +46,7 @@
 
 Figure: Architecture
 
- 
+ 
 
 The dlog service sends a log message to the circular buffer with APIs, including Priority and Tag information. With this information, it is easy to filter and check the messages with dlogutil.
 
@@ -87,7 +88,7 @@
 
 For each log level (info, debug, and error), there is a separate macro:
 
-
+
   Info
      Use dlog_print(or dlog_vprint) function with DLOG_INFO priority when you need info messages to be displayed with a specified tag.
     @@ -117,8 +118,9 @@ dlog_print(DLOG_WARN, "MyTag", "warning!");
 
 
 Log macros belong to Info, Debug, Error, and Warn log levels. To filter logs based on their levels, select the applicable log type in the Log view. You can also search logs by keywords, such as Pid, Tid, Tag, and Message. The following figure shows the output of a log macro.
-Figure: Log macro output
-
+Figure: Log macro output
+
+
 Tag
 A tag is used to identify the source of the log message.
 
@@ -177,6 +179,7 @@ void my_debug_print(char *format, ...)
    dlog_vprint(DLOG_INFO, "USR_TAG", format, ap);
    va_end(ap);
 }
+
 int main(void)
 {
    my_debug_print("%s", "test dlog");
@@ -218,7 +221,7 @@ dlogutil [<option>] ... [<filter-spec>] ...
 
 The tag of a log message is a short name indicating the system component from which the message originates.
 The priority is one of the following character values, ordered from the lowest to the highest priority:
-D - debug
+D - debug
 I - info
 W - warning
 E - Error
@@ -234,7 +237,7 @@ dlogutil [<option>] ... [<filter-spec>] ...
 Controlling Log Output Format
 The log messages contain a number of metadata fields in addition to tag and priority. You can modify the output format for messages so that they display a specific metadata field. To do so, use the -v option when starting dlogutil and specify one of the supported output formats:
 
-
+
 	brief: Displays the priority/tag and PID of the originating process (the default format)
 	process: Displays the PID only 
 	tag: Displays the priority/tag only
diff --git a/org.tizen.guides/html/native/system/media_keys_n.htm b/org.tizen.guides/html/native/system/media_keys_n.htm
index f5ea420..23c6eac 100644
--- a/org.tizen.guides/html/native/system/media_keys_n.htm
+++ b/org.tizen.guides/html/native/system/media_keys_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
             Media key Tutorial
-			Media key API
+			Media key API for Mobile Native
+			Media key API for Wearable Native
         
     
 
@@ -31,7 +32,7 @@
 
 Media key
 
-  Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The media_key_e enumerator defines the available key types. 
+  Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The media_key_e enumerator (in mobile and wearable applications) defines the available key types. 
   
   The main features of the Media key API include: 
    
diff --git a/org.tizen.guides/html/native/system/runtime_info_n.htm b/org.tizen.guides/html/native/system/runtime_info_n.htm
index 481f3af..a420bc4 100644
--- a/org.tizen.guides/html/native/system/runtime_info_n.htm
+++ b/org.tizen.guides/html/native/system/runtime_info_n.htm
@@ -16,16 +16,17 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Runtime information Tutorial
-			Runtime information API			
+			Runtime information API for Mobile Native		
+			Runtime information API for Wearable Native				
 		
 	
 	
diff --git a/org.tizen.guides/html/native/system/sensors_n.htm b/org.tizen.guides/html/native/system/sensors_n.htm
index 1b57012..6e1ce7c 100644
--- a/org.tizen.guides/html/native/system/sensors_n.htm
+++ b/org.tizen.guides/html/native/system/sensors_n.htm
@@ -110,7 +110,7 @@
 
 The accelerometer provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.
 Figure: Accelerometer vector and axes
-
+
 The accelerometer outputs 4 values: 3 Cartesian axis values and a timestamp. The accelerometer sensor measures and returns axes values in "m/s²" (meters per second squared). When a device is moved in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-).
 
   The following table lists the measurement data that the accelerometer provides.
@@ -256,7 +256,7 @@
   Gravity Sensor
   The gravity sensor is a virtual sensor derived from the 3-axis acceleration sensor. The 3-axis gravity components provide a measure of the effect of Earth's gravity observed on the device reference axes. The gravity components measured on a device vary based on the change in the device orientation, and hence they provide a measure of the rotation subjected to the device.
   Figure: Gravity sensor vector and axes
-  
+  
   The gravity sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The gravity sensor measures and returns axes values in "m/s²" (meters per second squared). When a device is rotated in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-).
 
   The following table lists the measurement data that the gravity sensor provides.
@@ -303,7 +303,7 @@
   The linear acceleration sensor is derived from the accelerometer by excluding the gravity value, and it measures the user-driven changes in the velocity. The linear acceleration sensor is used to detect the dynamic movement of the device and analyze the user's motion profile. The 3-axes linear acceleration components provide a measure of the combined linear motion subjected to the device in the euclidean space.
   The linear acceleration sensor provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.
   Figure: User-acceleration sensor vector and axes
-  
+  
   The linear acceleration sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The linear acceleration sensor measures and returns axes values in "m/s²" (meters per second squared). When a device is accelerated in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-). The acceleration output is shown in the same direction as the user-driven force.
   The following table lists the measurement data that the linear acceleration sensor provides.
   
@@ -401,7 +401,7 @@
   
The magnetic sensor uses the 3-axis Cartesian space coordinate system, as the following figure illustrates.
Figure: Magnetic field vector and axes
-  
+  
Uncalibrated Magnetic Sensor
The uncalibrated magnetic sensor is a 3-axis electronic compass (sometimes referred to as a "magnetometer" or "geomagnetic sensor"). It can also be used in determining the azimuth component of the device orientation provided that the tilt of the device is already computed. It measures the Earth's magnetic field strength and fluctuations, and splits the measurement into X, Y, and Z components. The uncalibrated magnetic sensor is similar in functionality to a magnetic sensor, but does not perform hard iron calibration. Factory calibration and temperature compensation are applied.
@@ -680,14 +680,14 @@
 
 The angular positions are measured using a fixed frame reference (X_E, Y_E, Z_E).
  
-    Figure: Angular positions and the fixed frame reference
-  
+  Figure: Angular positions and the fixed frame reference
+  
Gyroscope
The gyroscope detects angular velocity or angular rates of a device. The 3D gyroscope data is considered to be very sensitive in detecting incremental rotation angles. The rotation angles obtained by integrating the angular rates over longer duration is inaccurate due to the build-up of drift.
Figure: Gyroscope vector and axes
-  
+  
The following table lists the measurement data that the gyroscope provides.

   
   
     
 
  
   
   
    
   
   
   
    
-	 
+	 
@@ -205,11 +206,11 @@
 	 
-	
-	
-	
-	
-	
+    
+       
+     
+        
+    
    
diff --git a/org.tizen.guides/html/native/system/settings_n.htm b/org.tizen.guides/html/native/system/settings_n.htm
index 4c63cb7..d6b4390 100644
--- a/org.tizen.guides/html/native/system/settings_n.htm
+++ b/org.tizen.guides/html/native/system/settings_n.htm
@@ -16,16 +16,17 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			System Settings Tutorial	
-			System Settings API
+			System Settings API for Mobile Native
+			System Settings API for Wearable Native
 		
 	
 	
diff --git a/org.tizen.guides/html/native/system/storage_n.htm b/org.tizen.guides/html/native/system/storage_n.htm
index ebec9d4..2928c76 100644
--- a/org.tizen.guides/html/native/system/storage_n.htm
+++ b/org.tizen.guides/html/native/system/storage_n.htm
@@ -16,16 +16,17 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
 		Related Info
 		
 			Storage Tutorial	
-			Storage API
+			Storage API for Mobile Native
+			Storage API for Wearable Native
 		
 	
 	
diff --git a/org.tizen.guides/html/native/system/sysinfo_n.htm b/org.tizen.guides/html/native/system/sysinfo_n.htm
index 9c38f9e..f476908 100644
--- a/org.tizen.guides/html/native/system/sysinfo_n.htm
+++ b/org.tizen.guides/html/native/system/sysinfo_n.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 	
@@ -30,7 +30,8 @@
 		Related Info
 		
 			System Information Tutorial
-			System Information API
+			System Information API for Mobile Native
+			System Information API for Wearable Native
 		
 	
 	
@@ -197,7 +198,7 @@
     
 	http://tizen.org/feature/input.keyboard
      bool The platform returns true for this key, if the device  provides a built-in keyboard supporting any keyboard layout. The platform returns true for this key, if the device provides a built-in keyboard supporting any keyboard layout.
     
 	
 	http://tizen.org/feature/input.keyboard.layout The platform returns the keyboard layout (such as qwerty) supported by the built-in keyboard for this key and returns true for the http://tizen.org/feature/input.keyboard key.
 	If the device does not provide a built-in keyboard, the  platform returns an empty string for this key and returns false for the http://tizen.org/feature/input.keyboard key.
     
http://tizen.org/feature/input.rotating_bezel bool The platform returns true for this key, if the device supports the rotating bezel feature.
http://tizen.org/feature/input.rotating_bezel bool The platform returns true for this key, if the device supports the rotating bezel feature.
     
   
   The following table lists the LED feature keys.
@@ -366,34 +367,34 @@

http://tizen.org/feature/network.nfc

bool

The platform returns true for this key, if the device supports Adapter APIs, and NDEF APIs which require Near Field Communication (NFC).

bool

The platform returns true for this key, if the device supports Adapter and NDEF APIs which require Near Field Communication (NFC).

http://tizen.org/feature/network.nfc.card_emulation

bool

The platform returns true for this key, if the device is recognized by the NFC card readers.

http://tizen.org/feature/network.nfc.card_emulation.hce

bool

The platform returns true for this key, if the device supports the HCE card emulation feature.

http://tizen.org/feature/network.nfc.p2p

bool

The platform returns true for this key, if the device supports p2p APIs which require Near Field Communication (NFC).

http://tizen.org/feature/network.nfc.card_emulation.hce

bool

The platform returns true for this key, if the device supports the HCE card emulation feature.

http://tizen.org/feature/network.nfc.p2p

bool

The platform returns true for this key, if the device supports P2P APIs which require Near Field Communication (NFC).

http://tizen.org/feature/network.nfc.reserved_push

bool

The platform returns true for this key and the http://tizen.org/feature/network.nfc key, if the device supports the NFC reserved push feature.

http://tizen.org/feature/network.nfc.tag

bool

The platform returns true for this key, if the device supports tag APIs which require Near Field Communication (NFC).

http://tizen.org/feature/network.nfc.tag

bool

The platform returns true for this key, if the device supports Tag APIs which require Near Field Communication (NFC).

http://tizen.org/feature/network.push

bool

The platform returns true for this key, if the device supports RCA output.

http://tizen.org/feature/screen.shape.circle

bool

The platform returns true for this key, if the device supports a circular screen shape.

http://tizen.org/feature/screen.shape.rectangle

bool

The platform returns true for this key, if the device supports a rectangular screen shape.

http://tizen.org/feature/screen.shape.rectangle

bool

The platform returns true for this key, if the device supports the rectangle screen shape.

http://tizen.org/feature/screen.shape.circle

bool

The platform returns true for this key, if the device supports the circle screen shape.

http://tizen.org/feature/screen.size.large

bool

The platform returns true for this key, if the device supports the large screen size.

http://tizen.org/feature/shell.appwidget

bool

The platform returns true for this key, if the device supports the AppWidget (Dynamic Box).

The platform returns true for this key, if the device supports the AppWidget.

diff --git a/org.tizen.guides/html/native/system/system_guide_n.htm b/org.tizen.guides/html/native/system/system_guide_n.htm index 11cb15d..fd85779 100644 --- a/org.tizen.guides/html/native/system/system_guide_n.htm +++ b/org.tizen.guides/html/native/system/system_guide_n.htm @@ -16,16 +16,17 @@ -

+ diff --git a/org.tizen.guides/html/native/telephony/telephony_guide_n.htm b/org.tizen.guides/html/native/telephony/telephony_guide_n.htm index ff76139..3a0b0a2 100644 --- a/org.tizen.guides/html/native/telephony/telephony_guide_n.htm +++ b/org.tizen.guides/html/native/telephony/telephony_guide_n.htm @@ -58,7 +58,7 @@

The following figure illustrates the Telephony Service and APIs.

Figure: Telephony API and Telephony Service

Telephony API and Telephony Service

diff --git a/org.tizen.guides/html/native/ui/animations_effects_n.htm b/org.tizen.guides/html/native/ui/animations_effects_n.htm index 31f3191..b4b03ef 100644 --- a/org.tizen.guides/html/native/ui/animations_effects_n.htm +++ b/org.tizen.guides/html/native/ui/animations_effects_n.htm @@ -14,9 +14,9 @@ -

+ @@ -172,7 +182,7 @@ ecore_animator_timeline_add(8, _my_animation, my_evas_object);

Figure: Position mappings

Position mappings

When using the animation callback function, the animator passes a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running.

@@ -644,7 +654,7 @@ program

For this transition, define a new state. This state changes the color and the position of the rectangle.

-// To be place in the "part" definition
+// To be placed in the "part" definition
 description 
 { 
    state: "color" 0.0;
@@ -714,7 +724,7 @@ edje_object_signal_emit(Evas_Object *obj,
 Note
 
 
-To find a complete example, use elm_object_signal_emit in the Menu Tutorial.
+To find a complete example, use elm_object_signal_emit in the Menu Tutorial.
 
 
  
@@ -900,7 +910,7 @@ collections
 Note
 
 
-The Evas object can be a low-level component, such as a rectangle, but also a widget, such as a button, image, or calendar.
+The Evas object can be a low-level component, such as a rectangle, but also a UI component, such as a button, image, or calendar.
 If you want to animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.
 
 
@@ -927,7 +937,7 @@ collections
 
 Adding Images to an Animation
 
-If you do not want to manage widgets for animating images, Elm_Transit provides a helper function for directly manipulating images:
+If you do not want to manage UI components for animating images, Elm_Transit provides a helper function for directly manipulating images:
 
  elm_transit_effect_image_animation_add(Elm_Transit *transit, Eina_List *images)
@@ -1358,10 +1368,10 @@ elm_transit_effect_flip_add(Elm_Transit *transit,
 The third argument is the direction of the rotation:
 
 EINA_TRUE is clockwise.
-EINA_FALSE is counterclockwise.
+EINA_FALSE is counter-clockwise.
 
 
-The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary widgets for demonstration purposes. You can use the elm_transit_effect_image_animation_add() function if you do not want to bother creating widgets.
+The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary UI components for demonstration purposes. You can use the elm_transit_effect_image_animation_add() function if you do not want to bother creating UI components.
 
  // Coin Heads
@@ -1388,7 +1398,7 @@ elm_transit_go(transit);
 
 
 Figure: Coin flip
-
+
 
 Resizable Flip Effect
 In the flip example above, we used two objects that have the same size. However, you may sometimes want to flip from one object to another object with different size attributes. The most common example would be using buttons with dimensions that depend on their contents (such as labels). If you decide to use the classic elm_transit_effect_flip_add() function, the size of the object will change at the moment one object becomes completely hidden and the other one begins to show up. If you wish to interpolate the size attributes as well, use the elm_transit_effect_resizable_flip_add() function:
@@ -1408,7 +1418,7 @@ elm_transit_effect_resizable_flip_add(Elm_Transit *transit,
 The third argument is the direction of the rotation:
 
 EINA_TRUE is clockwise.
-EINA_FALSE is counterclockwise.
+EINA_FALSE is counter-clockwise.
 
 
 This function works the exact same way as the standard flip effect function.
@@ -1480,7 +1490,7 @@ elm_transit_go(transit);
 
 Now that we have listed all the effects that can be implemented using Elm_Transit, we will see how to chain transitions into sequences. To create complex, chained animations without worrying about synchronization between the transitions, use the elm_transit_chain_transit_add() function. This function takes as arguments two Elm_Transit objects and will automatically take care of the chaining for you: the second transition will start as soon as the first transition is finished.
 
-The following example shows how to move a datetime widget on a square trajectory:
+The following example shows how to move a datetime component on a square trajectory:
 
  Evas_Object *dt = elm_datetime_add(ad->win);
@@ -1695,7 +1705,7 @@ evas_map_point_coord_set(m, 3, 100, 300, 0);
 
 
 Figure: Map
-
+
 
 The following examples all produce the same result as the above example, but with simpler code:
 
@@ -1724,7 +1734,7 @@ evas_map_util_points_populate_from_object_full(m, o, 0);
 You can apply several effects to an object by simply setting each point of the map to the appropriate coordinates. The following example shows how to create a simulated perspective:
 
 Figure: Simulated perspective
-
+
 
  evas_map_point_coord_set(m, 0, 100, 100, 0);
@@ -1758,7 +1768,7 @@ evas_object_map_enable_set(o, EINA_TRUE);
 
 evas_map_util_rotate(Evas_Map *m, double degrees, Evas_Coord cx, Evas_Coord cy)
 
-This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counterclockwise.
+This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counter-clockwise.
 
 The following example shows how to rotate an object around its center point by 45 degrees clockwise. In the following figure, the center of rotation is the red dot.
 
@@ -1773,14 +1783,14 @@ evas_map_free(m);
 
 
 Figure: Rotating around the center point
-
+
 
 You can rotate the object around any other point simply by setting the last two arguments of the evas_map_util_rotate() function to the appropriate values:
 
 evas_map_util_rotate(m, 45, x + w - 20, y + h - 20);
 
 Figure: Rotating around other points
-
+
 
 You can also set the center of the window as the center of the rotation using the appropriate coordinates of the Evas canvas:
 
@@ -1806,10 +1816,10 @@ evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_
 
 Maps can also be used to achieve a 3D effect. In a 3D effect, the Z coordinate of each point is meaningful: the higher the value, the further back the point is located. Smaller values (usually negative) mean that the point is closer to the user.
 
-3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counterclockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).
+3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counter-clockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).
 
 Figure: Rotating around the Y axis
-
+
 
 To determine whether a map is facing the user, use the evas_map_util_clockwise_get() function. This function returns EINA_TRUE if the map is facing the user and EINA_FALSE if the map is facing away from the user. This is normally done after all the other operations are applied to the map.
 
@@ -1824,7 +1834,7 @@ evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_
 Starting from this simple setup, and setting the maps so that the blue square rotates around the Y axis, we get the following:
 
 Figure: 3D rotation
-
+
 
 A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen. To show the Z axis, that is, to add 3D perspective to the transformation, use the evas_map_util_3d_perspective() function on the map after its position has been set:
 
@@ -1833,7 +1843,7 @@ evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_
 The result makes the vanishing point the center of each object:
 
 Figure: Adding perspective
-
+
 
 Color and Lighting
 
@@ -1849,10 +1859,10 @@ evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_
 
 evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)
 
-If the map points are defined counterclockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.
+If the map points are defined counter-clockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.
 
 Figure: Obscured object
-
+
 
 Mapping
 
@@ -1861,12 +1871,12 @@ evas_map_util_zoom(Evas_Map *m, double zoomx, double zoomy, Evas_Coord cx, Evas_
 Let's get started with the following three images, each sized at 200 Ã 200 pixels:
 
 Figure: Starting point
-
+
 
 The following three images illustrate the case where a map is set to an image object without setting the right UV mapping for each map point. The objects themselves are mapped properly to their new geometries, but the images are not displayed correctly within the mapped objects.
 
 Figure: Questionable result
-
+
 
 To transform an image correctly, Evas needs to know how to handle the image within the map. You can do this using the evas_map_point_image_uv_set() function, which allows you to map a given point in a map to a given pixel in a source image:
 
@@ -1912,7 +1922,7 @@ evas_object_map_enable_set(tux3, EINA_TRUE);

Figure: Correct result

Correct result

You can also set a map to use only part of an image, or you can even map the points in inverted order. Combined with the evas_object_image_source_set() function, you can achieve more interesting results still.

diff --git a/org.tizen.guides/html/native/ui/circle_components_wn.htm b/org.tizen.guides/html/native/ui/circle_components_wn.htm new file mode 100644 index 0000000..6faac79 --- /dev/null +++ b/org.tizen.guides/html/native/ui/circle_components_wn.htm @@ -0,0 +1,688 @@ + + + + + + + + + + + + + Circle Components + + + + + +

+ +

Circle components extend the UI features and provide functionalities optimized for the circular UI.

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

Generally, circle components can be added with the eext_circle_object_[component_name]_add() function, which returns a circle object handle. Circle components are shown in a form of an arch with radius, line width, and color. These properties can be set with the eext_circle_object_item* APIs. The circle object can also take a rotary event. Generally, a clockwise rotary event increases the value of the rotary event activated by the circle object, and a counter clockwise rotary event decreases the value.

+ +

+ + +

Figure: Circle Datetime

Circle Datetime

+ +

The circle datetime extends elm_datetime by visualizing the selected field. If a rotary event is activated by eext_rotary_object_event_activated_set(), a circle datetime increases or decreases value of selected field in elm_datetime by the clockwise or counter clockwise rotary event.

+ +

+ +

You can use the eext_circle_object_datetime_add() function to create a circle object. When creating a circle datetime, the elm_datetime handle must be passed as an argument. If a circle surface is passed as an argument, a circle object connected with a circle surface is created, and it is rendered by the circle surface. When NULL is passed as a surface argument, the new circle object is managed and rendered by itself.

+Evas_Object *datetime;
+Evas_Object *circle_datetime;
+
+datetime = elm_datetime_add(parent);
+circle_datetime = eext_circle_object_datetime_add(datetime, surface);
+

+ +

+ +

You can activate and deactivate the circle datetime by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle datetime can receive the rotary event. Otherwise, the circle datetime cannot receive the rotary event.

+eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
+

+ +

+ +

A circle datetime has the following styles:

default

When created, the circle datetime has default style automatically.

+ +

The circle datetime objects support the following circle object API calls:

eext_circle_object_line_width_set()
eext_circle_object_line_width_get()
eext_circle_object_radius_set()
eext_circle_object_radius_get()
eext_circle_object_color_set()
eext_circle_object_color_get()
eext_circle_object_disabled_set()
eext_circle_object_disabled_get()

A circle datetime has the following item:

default: Default circle item that draws a marker.

+ +

You can change the properties of the items by using the eext_circle_object_item* APIs.

For more information, see the Efl Extension Circle Datetime API.

+ +

+ +

Figure: Circle Genlist

Circle Genlist

+ +

Use the circle genlist to visualize and utilize the scroll effect for elm_genlist. While elm_genlist provides a scrollbar with straight horizontal and vertical movement, the circle genlist provides scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.

+ +

+ +

A genlist and a surface are necessary when creating the circle genlist. The circle genlist is added with the eext_circle_object_genlist_add() function.

+Evas_Object *genlist, *circle_genlist, *parent;
+
+genlist = elm_genlist_add(parent);
+circle_genlist = eext_circle_object_genlist_add(genlist, surface);
+

+ +

+ +

You can set the circle genlist scroller policy by using the eext_circle_object_genlist_scroller_policy_set() function.

+eext_circle_object_genlist_scroller_policy_set(circle_genlist, 
+                                               ELM_SCROLLER_POLICY_OFF, 
+                                               ELM_SCROLLER_POLICY_ON);
+

This sets the scrollbar visibility policy of a given scroller. ELM_SCROLLER_POLICY_AUTO indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden. ELM_SCROLLER_POLICY_ON turns the scrollbar on all the time, and ELM_SCROLLER_POLICY_OFF turns it off. This applies to the horizontal and vertical scrollbars respectively.

The following enum values are available for circle genlist.

ELM_SCROLLER_POLICY_AUTO
ELM_SCROLLER_POLICY_ON
ELM_SCROLLER_POLICY_OFF

+ +

+ +

You can activate and deactivate the circle genlist by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle genlist can receive the rotary event. Otherwise, the circle genlist cannot receive the rotary event.

+eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
+

+ +

+ +

Circle genlist objects support the following circle object API calls:

eext_circle_object_line_width_set()
eext_circle_object_line_width_get()
eext_circle_object_radius_set()
eext_circle_object_radius_get()
eext_circle_object_color_set()
eext_circle_object_color_get()
eext_circle_object_disabled_set()
eext_circle_object_disabled_get()

A circle genlist has the following item:

default: Default circle item. It draws vertical scroll bar.
vertical,scroll,bg: Vertical scroll background circle item.

You can change the properties of the items by using the eext_circle_object_item* APIs.

For more information, see the Efl Extension Circle Genlist API.

+ + + +

+ +

A circle object extends elementary components in a form of circular design. Sometimes, a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.

+ +

+ +

You can use the eext_circle_object_add() function to create a circle object. When creating a circle object, you can choose whether the circle object is rendered by itself or by the circle surface. If the circle surface is passed as an argument, a circle object connected with circle surface is created, and it is rendered by the circle surface.

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

+ +

When NULL is passed as a surface argument, the new circle object is managed and rendered by itself. Here, a circle object without a circle surface is created and showed in a size of 360 x 360.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, NULL);
+evas_object_size_hint_min_set(circle_obj, 360, 360);
+evas_object_show(circle_obj);
+

+ +

+ +

You can set the line width of the circle object by using the eext_circle_object_line_width_set() function. Here, circle object with a surface is created and its line width set to 20. You can get the current line width of a circle object by using the eext_circle_object_line_width_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_line_width_set(circle_obj, 20);
+

+ +

You can set the line width of a certain item in a circle object by using the eext_circle_object_item_line_width_set() function. If the name of the item is passed as default, it works the same way as the eext_circle_object_line_width_set() function. Similar to the above example, a circle object with a surface is created and its line width is set to 20. You can get the current line width of the item by using the eext_circle_object_item_line_width_get() function.

Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_line_width_set(circle_obj, "default", 20);
+

+ +

+ +

You can set the angle of the circle object by using the eext_circle_object_angle_set() function. Here, circle object with surface is created and its angle set to a 45.0 degree angle. You can get the current angle of a circle object by using the eext_circle_object_angle_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_set(circle_obj, 45.0);
+

+ +

You can set the angle of a certain item in a circle object by using the eext_circle_object_item_angle_set() function. If name of the item is passed as default, it works the same way as eext_circle_object_angle_set() function. Similar to the above example, a circle object with surface is created and its angle is set to a 45.0 degree angle. You can get the current angle of the item by using the eext_circle_object_item_angle_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
+

+ +

+ +

You can set the angle offset of the circle object by using the eext_circle_object_angle_offset_set() function. Here, a circle object with a 45.0 degree angle is created and its angle offset set to 30.0 degrees. As a result, the circle object has an arch of 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees. You can get the current angle offset of a circle object by using the eext_circle_object_angle_offset_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_set(circle_obj, 45.0);
+eext_circle_object_angle_offset_set(circle_obj, 30.0);
+

+ +

You can set the angle offset of a certain item in a circle object by using the eext_circle_object_item_angle_offset_set() function. If name of the item is passed as default, it works the same way as eext_circle_object_angle_offset_set() function. The following code works the same way as in the above example. You can get the current angle of the item by using the eext_circle_object_item_angle_offset_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_set(circle_obj, "default", 45.0); 
+eext_circle_object_item_angle_offset_set(circle_obj, "default", 30.0);
+

+ +

+ +

You can set the minimum and maximum angle of the circle object by using the eext_circle_object_angle_min_max_set() function. Here, a circle object with a surface is created and its minimum angle set to 0.0 degrees and maximum angle to 90.0 degrees. You can get the current minimum and maximum angle of the circle object by using the eext_circle_object_angle_min_max_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
+

+ +

You can set the minimum and maximum angles of a certain item in a circle object by using the eext_circle_object_item_angle_min_max_set() function. If name of the item is passed as default, it works the same way as the eext_circle_object_angle_min_max_set() function. Similar to the above example, a circle object with a minimum and maximum angles of 0.0 and 90.0 is created. You can get the current minimum and maximum angle of the item by using the eext_circle_object_item_angle_min_max_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_min_max_set(circle_obj, "default", 0.0, 90.0);
+

+ +

+ +

You can set the minimum and maximum values of the circle object by using the eext_circle_object_value_min_max_set() function. Here, a circle object with a surface is created and its minimum value is set to 0.0 degrees and maximum value to 10.0 degrees. You can get the current minimum and maximum value of the circle object by using the eext_circle_object_value_min_max_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
+

+ +

You can set the value of a certain item in a circle object by using the eext_circle_object_item_angle_min_max_set() function. If name of the item is passed as default, it works the same way as the eext_circle_object_value_min_max_set() function. Similar to the above example, a circle object with a minimum and maximum value of 0.0 to 10.0 degrees is created. You can get the current minimum and maximum values of the item by using the eext_circle_object_item_value_min_max_get() function.

 
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_min_max_set(circle_obj, "default", 0.0, 10.0);
+

+ +

+ +

You can set the value of the circle object by using the eext_circle_object_value_set() function. Here, a circle object with a surface is created and its value set to 5.0. You can get the current value of the circle object by using the eext_circle_object_value_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_value_set(circle_obj, 5.0);
+

+ +

You can set the value of a certain item in a circle object by using the eext_circle_object_item_value_set() function. If name of the item is passed as default, it works the same as the eext_circle_object_value_set() function. Similar to the above example, a circle object with a surface is created and its value is set to 5.0 degree angle. You can get the current value of the item by using the eext_circle_object_item_value_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_set(circle_obj, "default", 5.0);
+

+ + + + + + + + + + +

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

+ +

+ +

You can set the color of the circle object by using the eext_circle_object_color_set() function. To set the color, red, green, blue, and alpha values in range from 0 to 255 must be passed. Here, a circle object with a surface is created and its color set to blue. You can get the current color of circle object by using the eext_circle_object_color_get() function.

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

+ +

You can set the color of a certain item in a circle object by using the eext_circle_object_item_color_set() function. If name of the item is passed as default, it works the same way as the eext_circle_object_color_set() function. Similar to the above example, a circle object with a surface is created and its color is set to red. You can get the current color of the item by using the eext_circle_object_item_color_get() function.

+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_set(circle_obj, "default", 255, 0, 0, 255);
+

+ +

+ +

You can set the radius of the circle object by using the eext_circle_object_radius_set() function. Here, a circle object with radius of 50.0 is created. You can get the current radius of the circle object by using the eext_circle_object_radius_get() function.

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

+ +

You can set the radius of a certain item in a circle object by using the eext_circle_object_item_radius_set() function. If name of the item is passed as default, it works the same way as the eext_circle_object_radius_set() function. Similar to the above example, a circle object with a radius of 50.0 is created. You can get the current radius of the item by using the eext_circle_object_item_radius_get() function.

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

+ +

+ +

You can disable the circle object by using the eext_circle_object_disabled_set() function. Here, a circle object is disabled. You can get the current disabled status of circle object by using the eext_circle_object_disabled_get() function.

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

+ +

You can enable a disabled circle object by using the eext_circle_object_disabled_set() function with EINA_FALSE argument.

+eext_circle_object_disabled_set(circle_obj, EINA_FALSE);
+

+ + + + +

+ +

Figure: Circle Progressbar

Circle Progressbar

+ +

The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.

+ +

+ +

You can create the circle progressbar by using the eext_circle_object_progressbar_add() function. When creating the circle progressbar, a surface is necessary to render on the surface.

+Evas_Object *circle_progressbar, *parent;
+circle_progressbar = eext_circle_object_progressbar_add(parent, surface);
+

+ +

Circle progressbar supports the following circle object API calls:

eext_circle_object_value_min_max_set()
eext_circle_object_value_min_max_get()
eext_circle_object_value_set()
eext_circle_object_value_get()
eext_circle_object_angle_min_max_set()
eext_circle_object_angle_min_max_get()
eext_circle_object_angle_offset_set()
eext_circle_object_angle_offset_get()
eext_circle_object_angle_set()
eext_circle_object_angle_get()
eext_circle_object_line_width_set()
eext_circle_object_line_width_get()
eext_circle_object_radius_set()
eext_circle_object_radius_get()
eext_circle_object_color_set()
eext_circle_object_color_get()
eext_circle_object_disabled_set()
eext_circle_object_disabled_get()

A circle progressbar has the following items:

default: Default circle item that draws the progressbar.
bg: Progress bar background circle item.

You can change the properties of the items by using the eext_circle_object_item* APIs.

For more information, see the Efl Extension Circle Progressbar API.

+ +

+ +

Before using the circle progressbar, its minimum and maximum values are set with the eext_circle_object_value_min_max_set() function. The current value is set with eext_circle_object_value_set().

Here, the minimum value is set to 0.0, the maximum value to 100.0, and the current value to 3.0.

+eext_circle_object_value_min_max_set(circle_progressbar, 0.0, 100.0);
+eext_circle_object_value_set(circle_progressbar, 3.0);
+

+ +

+ +

Figure: Circle Scroller

Circle Scroller

+ +

The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar. It wraps the elm_scroller internally only to draw a circular scroll bar to the edge of the circular screen. This means you can use elm_scroller callbacks and APIs excluding elm_scroller_policy_set() and elm_scroller_policy_get() APIs.

+ +

+ +

To create a circle scroller, use the eext_circle_object_scroller_add() function. elm_scroller has to be passed by the first parameter of this function.

+Evas_Object *scroller;
+Evas_Object *circle_scroller;
+
+scroller = elm_scroller_add(parent);
+circle_scroller = eext_circle_object_scroller_add(scroller, surface);
+

+ +

+ +

You can activate and deactivate the circle scroller by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle scroller can receive the rotary event. Otherwise, the circle scroller cannot receive the rotary event.

+eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
+

+ +

+ +

A circle scroller has the following styles:

default

When created, the circle scroller has default style automatically.

+ +

Circle scroller objects support the following circle object API calls:

eext_circle_object_line_width_set()
eext_circle_object_line_width_get()
eext_circle_object_radius_set()
eext_circle_object_radius_get()
eext_circle_object_color_set()
eext_circle_object_color_get()
eext_circle_object_disabled_set()
eext_circle_object_disabled_get()

A circle slider has the following items:

default: Default circle item that draws the vertical scroll bar.
vertical,scroll,bg: Vertical scroll background circle item.
horizontal,scroll,bar: Horizontal scroll bar circle item.
horizontal,scroll,bg : Horizontal scroll background circle item.

You can change the properties of the items by using the eext_circle_object_item* APIs.

For more information, see the Efl Extension Circle Scroller API.

+ +

+ +

You can use elm_scroller APIs to configure a circle scroller, except elm_scroller_policy_set() and elm_scroller_policy_get() APIs.

Instead of excluded APIs, eext_circle_object_scroller_policy_set() and eext_circle_object_scroller_policy_get() functions are provided for the circle scroller.

A policy parameter has the following value.

ELM_SCROLLER_POLICY_AUTO: indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden.
ELM_SCROLLER_POLICY_ON: Turns the scrollbar on all the time.
ELM_SCROLLER_POLICY_OFF: Turns the scrollbar off. This applies to the horizontal and vertical scrollbars respectively.

The following example shows how to set the scroll bar visibility policy to ELM_SCROLLER_POLICY_AUTO for horizontal scroll bar and ELM_SCROLLER_POLICY_OFF for vertical scroll bar.

+eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
+

+ +

+ +

Figure: Circle Slider

Circle Slider

+ +

The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the elm_slider, but also replaces the functionalities of the elm_slider in a circular design.

+ +

+ +

To create a circle slider, use the eext_circle_object_slider_add() function.

+Evas_Object *circle_slider = NULL;
+circle_slider = eext_circle_object_slider_add(parent, surface);
+

+ +

+ +

You can activate or deactivate the circle slider by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle slider can receive the rotary event. Otherwise, the circle slider cannot receive the rotary event.

+eext_rotary_object_event_activated_set(circle_slider, EINA_TRUE);
+

+ +

+ +

A circle slider has the following styles:

default

+ +

When created, the circle slider has default style automatically.

Circle slider objects support the following circle object API calls:

eext_circle_object_value_min_max_set()
eext_circle_object_value_min_max_get()
eext_circle_object_value_set()
eext_circle_object_value_get()
eext_circle_object_angle_min_max_set()
eext_circle_object_angle_min_max_get()
eext_circle_object_angle_offset_set()
eext_circle_object_angle_offset_get()
eext_circle_object_angle_set()
eext_circle_object_angle_get()
eext_circle_object_line_width_set()
eext_circle_object_line_width_get()
eext_circle_object_radius_set()
eext_circle_object_radius_get()
eext_circle_object_color_set()
eext_circle_object_color_get()
eext_circle_object_disabled_set()
eext_circle_object_disabled_get()

A circle slider has the following items:

default: Default circle item, It draws slider bar.
bg: Background circle item.

You can change the properties of the items by using eext_circle_object_item* APIs.

For more information, see the Efl Extension Circle Slider API.

+ +

+ +

The circle slider step value is used when the rotary event increases or decreases the circle slider value. It can be set with the eext_circle_object_slider_step_set() function.

Here, the step value is set to 0.5.

+eext_circle_object_slider_step_set(circle_slider, 0.5);
+

Before using the circle slider, its minimum and maximum values are set with eext_circle_object_value_min_max_set(). The current value is set with eext_circle_object_value_set().

Here, the minimum value is set to 0.0, the maximum value to 15.0, and the current value to 3.0.

+eext_circle_object_value_min_max_set(circle_slider, 0.0, 15.0);
+eext_circle_object_value_set(circle_slider, 3.0);
+

You can retrieve the current value of the circle slider with the eext_circle_object_value_get() function.

+double value = eext_circle_object_value_get(circle_slider);
+

+ +

+ +

The circle slider emits the following signal:

value,changed: The rotary event changes the circle slider value.

For this signal, event_info is NULL.

This is how to register a callback on the value,changed signal.

+{
+   evas_object_smart_callback_add(slider, "value,changed", _value_changed_cb, data);
+}
+
+// Callback function for the "value,changed" signal
+// This callback is called when a value of the circle slider is changed
+static void
+_value_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Circle slider value changed. \n");
+}
+

+ +

+ +

The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered. When one of circle objects is set as visible, the surface renders the circle object and hides the others.

+ +

+ +

To create a new circle surface:

+Eext_Circle_Surface *surface;
+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+surface = eext_circle_surface_conformant_add(conformant);
+

+ +

The eext_circle_surface_conformant_add() function creates a circle surface in the conformant layer. If you want to create a circle surface in the layout layer, use the eext_circle_surface_layout_add() function:

+Eext_Circle_Surface *surface;
+Evas_Object *layout;
+
+layout = elm_layout_add(parent);
+surface = eext_circle_surface_layout_add(layout); 
+

+ +

If you want to create a circle surface in the naviframe layer, use the eext_circle_surface_naviframe_add() function:

+Eext_Circle_Surface *surface;
+Evas_Object *naviframe;
+
+naviframe = elm_naviframe_add(parent);
+surface = eext_circle_surface_naviframe_add(naviframe); 
+

+ + + + + + + + + + +

Note
A circle surface is a non-graphical object. It adds no graphics to or around the objects it holds.

+ +

+ +

You can add any circle object to a circle surface. The following example shows how to create an eext_slider component and add it to a circle surface in conformant layer:

+Eext_Circle_Surface *surface;
+Evas_Object *slider;
+
+surface = eext_circle_surface_conformant_add(conformant);
+slider = eext_circle_object_slider_add(parent, surface);
+

+ +

+ +

Deleting an Evas object automatically deletes the circle surface in the same layer. However, you can explicitly use the eext_circle_surface_del() function to delete a circle surface.

+eext_circle_surface_del(surface);
+

+ + + + + + + + + + +

Note
The eext_circle_surface_del() function does not delete the connected circle objects.

+ + + +

+ +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.guides/html/native/ui/components_mn.htm b/org.tizen.guides/html/native/ui/components_mn.htm new file mode 100644 index 0000000..357ddc1 --- /dev/null +++ b/org.tizen.guides/html/native/ui/components_mn.htm @@ -0,0 +1,3343 @@ + + + + + + + + + + + + + + Components + + + + + + +

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

+ +

+ +

Figure: Red color background

Red color background

+ +

Figure: Background hierarchy

Background hierarchy

+ +

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

+ +

+ +

A background is created with the elm_bg_add() function.

+ +

+Evas_Object *bg, *parent;
+
+// Create a background
+bg = elm_bg_add(parent);
+

+ +

+ +

You can set the color of the background with the elm_bg_color_set() function. The following example sets the background color to red.

+ +

+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+

+ +

+ +

It is also possible to set an image or an Edje group as a background using the elm_bg_file_set() function. The display mode of the image in the background can be chosen with elm_bg_option_set(), where the following modes are available:

+ +

ELM_BG_OPTION_CENTER: center the background image.
ELM_BG_OPTION_SCALE: scale the background image, retaining aspect ratio.
ELM_BG_OPTION_STRETCH: stretch the background image to fill the UI component's area.
ELM_BG_OPTION_TILE: tile the background image at its original size.

+ +

+Evas_Object *bg;
+
+// Set a file on the disk as a background image
+elm_bg_file_set(bg, "/path/to/the/image", NULL);
+// Set an Edje group as a background image
+elm_bg_file_set(bg, "/path/to/the/edje", "edje_group");
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+

+ +

+ +

An overlay can be set using the overlay part name.

+ +

+elm_object_part_content_set(bg, "overlay", over);
+

+ +

Here, the overlay is an Edje object that is displayed on top of the current background object.

+ + +

+ +

Figure: Button component

+ +

Figure: Button hierarchy

Button hierarchy

+ +

The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.

+ +

+ +

Create a button.

+Evas_Object *button, *parent;
+
+// Create a button
+button = elm_button_add(parent);

+ +

+ +

The icon can be updated with elm_object_part_content_set() function with the icon part name.

+ +

+Evas_Object *ic;
+ic = elm_icon_add(button);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(button, "icon", ic);
+

+ +

+ +

The label can be modified using the elm_object_text_set() function.

+ +

+elm_object_text_set(button, "Click me!");
+

+ +

+ +

Various styles can be used on the button. Tizen supports the following styles:

+ +

icon_reorder
icon_expand_add
icon_expand_delete
default
circle
bottom
contacts
option

+ +

You can see these themes in action on the following screenshot (in the above order).

+ +

Figure: Button component

+ +

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

+ +

+elm_object_style_set(button,"icon_expand_add");
+

+ +

+ +

The button emits the following signals:

+ +

clicked: The user clicked the button (press/release).
repeated: The user pressed the button without releasing it.
pressed: The user pressed the button.
unpressed: The user released the button after pressing it.

+ +

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

+ +

This is an example to register and define a callback function called by the clicked signal.

+ +

+{
+   evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
+}
+// Callback function for the "clicked" signal
+// This callback is called when the button is clicked by the user
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
+}
+

+ +

+ +

The autorepeat feature is enabled by default. It consists of calling the repeated signal when the user keeps the button pressed. This feature can be disabled with the elm_button_autorepeat_set() function. The autorepeat is configured with the following functions:

elm_button_autorepeat_initial_timeout_set(): to set the initial timeout before the autorepeat event is generated
elm_button_autorepeat_gap_timeout_set(): to set the interval between two autorepeat events

+ +

Disable the autorepeat feature.

+elm_button_autorepeat_set(button, EINA_FALSE);
+

+ +

Enable the autorepeat feature.

+elm_button_autorepeat_set(button, EINA_TRUE);
+

+ +

Set the initial timeout to five seconds.

+elm_button_autorepeat_initial_timeout_set(button, 5.0);
+

+ +

Set the gap between two signals to 0.5 seconds.

+elm_button_autorepeat_gap_timeout_set(button, 0.5);
+

+ + +

+ +

Figure: Check component

Check component

+ +

Figure: Check hierarchy

Check hierarchy

+ +

The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.

+ +

This UI component inherits from the layout component. All layout functions can be used on the check component.

+ +

+ +

The following example shows how to create a check component.

+ +

+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+

+ +

+ +

The check component style can be set with the elm_object_style_set() function. The following styles are available:

default
favorite
on and off

+ +

The following example sets the favorite style on our check object.

+elm_object_style_set(check, "favorite");
+

+ +

To get the current style, use the elm_object_style_get() function.

+char *style = elm_object_style_get(check);
+

+ +

+ +

After having created a check object, it is possible to set its boolean value to EINA_TRUE.

+elm_check_state_set(check, EINA_TRUE);
+

+ +

You can also retrieve the current value of the check object.

+Eina_Bool value = elm_check_state_get(check);
+

+ +

As with a radio object, an icon and a label can be set.

+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "home");
+
+// Set it to the check object 
+elm_object_part_content_set(check, "icon", icon);
+
+// Set the check label 
+elm_object_text_set(check, "Check label");
+

+ +

You can also modify the on and off labels.

+ +

+elm_object_part_text_set(check, "on", "True");
+elm_object_part_text_set(check, "off", "False");
+

+ +

The get functions of the elementary object API can be used to retrieve the content set to the check object.

+ +

+// Get the current set text of the check label 
+char *text = elm_object_text_get(check);
+
+// Get the content set in the icon part 
+Evas_Object *icon = elm_object_part_content_get(check, "icon");
+

+ +

+ +

When the value is changed by the user, the changed signal is emitted. The event_info parameter is NULL.

+ +

The following example shows how to register a callback on this signal.

+{
+   evas_object_smart_callback_add(check, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+

+ +

+ +

Figure: Colorselector component

Colorselector component

+ +

Figure: Colorselector hierarchy

Colorselector hierarchy

+ + +

The colorselector component provides a color selection solution to the user. There are different modes available, each of them showing a different configuration of the colorselector component.

+ +

Currently only the Palette mode is available in Tizen.

ELM_COLORSELECTOR_PALETTE

+ +

The Palette mode displays several color items that enable the user to choose a color in the items displayed. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, and it is associated with a unique identifier. This enables the developers to create new series of colors (a new palette) and save it under another identifier. By default, the color palette is using the default identifier.

+ +

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

+ +

+ +

The following example shows how to create a colorselector object.

+ +

+Evas_Object *colorsel, *parent;
+
+colorsel = elm_colorselector_add(parent);
+

+ +

+ +

The following example shows how to set the mode of the colorselector to the palette mode.

+ +

+elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
+

+ +

The following example shows how to create a new palette called mypalette. This new palette is saved by elementary config and you can to load it again later. You then add three colors in mypalette: red, green, and blue.

+ +

+elm_colorselector_palette_name_set(colorsel, "mypalette");
+elm_colorselector_palette_color_add(colorsel, 255, 0, 0, 255);
+elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
+elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
+

+ +

The default palette already contains 14 colors.

+ +

+elm_colorselector_palette_name_set(colorsel, "default");
+

+ +

When the user clicks on the color elements, the element changes the color that is set to the colorselector component. You can use the following function to retrieve the current selected color.

+int r, g, b, a;
+
+elm_colorselector_color_get(colorsel, &r, &g, &b, &a);
+

+ +

+ +

You can register callbacks on the following signals:

+ +

changed - The color value changes on the selector. event_info is NULL.
color,item,selected - The user clicks on a color item. The event_info parameter of the callback is the selected color item.
color,item,longpressed - The user long presses on a color item. The event_info parameter of the callback contains the selected color item.

+ +

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

+{
+      evas_object_smart_callback_add(colorselector, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the colorselector value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+      dlog_print(DLOG_INFO, LOG_TAG, "The color has changed\n");
+}
+

+ + +

+ +

Figure: Context popup component

Context popup component

+ +

Figure: Context popup hierarchy

Context popup hierarchy

+ + +

Ctxpopup is a contextual popup that can show a list of items.

+ +

+ +

A ctxpopup can be created with the elm_ctxpopup_add() function, and when shown, it automatically chooses an area inside its parent object's view (set using elm_ctxpopup_hover_parent_set()) to optimally fit into it.

+ +

+Evas_Object *ctxpopup, *parent;
+
+// Create a ctxpopup 
+ctxpopup = elm_ctxpopup_add(parent);
+

+ +

+ +

The following styles are available:

+ +

dropdown/list
dropdown/label
more/default

+ +

Figure: Context popup more/default style

Context popup more/default style

+ +

Figure: Context popup dropdown/list

Context popup dropdown/list

+ +

Figure: Context popup dropdown/label

Context popup dropdown/label

+ +

The following example shows how to set the more/default style.

+ +

+elm_object_style_set(ctxpopup, "more/default");
+

+ +

+ +

The context popup orientation can be set with elm_ctxpopup_horizontal_set(). Here it is set to horizontal.

+elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+

+ +

Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden.

+elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+

+ +

+ +

The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the Test label and no icon.

+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb,
+                  NULL);
+

+ +

The _ctxpopup_item_cb() callback is called when the item is clicked. The following example shows how to write the definition of this callback.

+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
+}
+

+ +

After that the item label is set to New label.

+ +

elm_object_item_part_text_set(it, "default", "New label");
+

+ +

And its icon is modified to the standard home icon.

+ +

+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, "home");
+
+elm_object_item_part_content_set(it, "icon", home_icon);
+

+ +

+ +

The context popup emits the dismissed signal when it is dismissed. You can register a callback to this signal. The event_info parameter is NULL.

+ +

+{
+   evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
+}
+
+// Callback function for the "dismissed" signal
+// This callback is called when the ctxpopup is dismissed
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
+}
+

+ +

+ +

Figure: Datetime selection

Datetime selection

+ +

Figure: Datetime hierarchy

Datetime hierarchy

+ +

The datetime component displays and adds date and time values.

+ +

+ +

The UI component is created with elm_datetime_add(). It is possible to select the visible fields with elm_datetime_field_visible_set(). The following fields can be controlled:

ELM_DATETIME_YEAR: the year field
ELM_DATETIME_MONTH: the month field
ELM_DATETIME_DATE: the date field
ELM_DATETIME_HOUR: the hour field
ELM_DATETIME_MINUTE: the minute field
ELM_DATETIME_AMPM: the AM/PM field

+ +

The following example shows how to create a datetime component and set the HOUR and MINUTE fields visible.

+ +

+Evas_Object *datetime, *parent;
+
+datetime = elm_datetime_add(parent);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_HOUR, EINA_TRUE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MINUTE, EINA_TRUE);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
+

+ +

+ +

The following styles are available:

date_layout
time_layout
time_layout_24h

+ +

The following example creates the date_layout style:

+ +

+elm_object_style_set(datetime, "date_layout");
+

+ +

+ +

The format of the date and time can be configured with elm_datetime_format_set() using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.

+ +

+elm_datetime_format_set(datetime, "%H : %M");
+

+ +

Please refer to the API documentation for a complete list of all the options available.

+ +

+ +

A callback can be registered on the changed signal to detect when the Datetime field values are changed. The event_info parameter is NULL.

+ +

+{
+   evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
+}

+ +

The language,changed signal is emitted when the system locale changes.

+ + +

+ +

date_layout (default): Year, Month, Day
time_layout: Hour, Minute, AM/PM button
time_layout_24hr: Hour, Minute

+ +

Basically, the elm_datetime component needs a full-length format that includes the Year, Month, Day, Hour, Minute, and AM/PM. Each style then shows specific fields according their style, limited by the UX concept. If you call the elm_datetime_field_visible_set() function for a field that is not supported in the style, it does not work.

+ + +

+ +

Figure: Entry component

Entry component

+ +

Figure: Entry component

Entry component

+ +

Figure: Entry hierarchy

Entry hierarchy

+ +

The entry component is a box where the user can enter text. It supports the following features:

text wrapping
multiline
scrolling
formatted markup text
password mode
filtering text
read/write from a file
theme style overrides

+ +

+ +

The entry component is created with the elm_entry_add() function, and the text inside the entry can be set with elm_entry_entry_set().

+ +

+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, "A short text.");
+

+ +

+ +

You can append text to the end of existing content.

+ +

+elm_entry_entry_append(entry, "END");
+

+ +

You can also insert text at the current cursor position.

+ +

+elm_entry_entry_insert(entry, "CURSOR");
+Eina_Bool Empty = elm_entry_is_empty(entry);
+

+ +

Call elm_entry_is_empty() to see whether the entry is empty. Here, the boolean variable Empty returns EINA_FALSE.

+ +

By default, the user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.

+ +

+elm_entry_editable_set(entry, EINA_FALSE);
+

+ + + + + + + + + + +

Note
It is still possible to use the previous functions to modify the text of a non-editable entry.

+ +

+ +

When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).

+ +

+elm_entry_password_set(entry, EINA_TRUE);
+

+ +

+ +

The entry component has two line modes:

single line mode
multiline mode

+ +

First, set the entry in single line mode.

+ +

+elm_entry_single_line_set(entry, EINA_TRUE);
+

+ +

In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an activate event instead of adding a new line.

+ +

When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.

+ +

+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+

+ +

In multiline entries, elm_entry_line_wrap_set() provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:

ELM_WRAP_NONE: No wrap
ELM_WRAP_CHAR: Wrap between characters
ELM_WRAP_WORD: Wrap in allowed wrapping points (as defined in the unicode standard)
ELM_WRAP_MIXED: Word wrap, and if that fails, char wrap

+ +

+ +

Text selections can be made with different functions:

To select all the content of the entry component: +
```
+elm_entry_select_all(entry);
+
```
+
To deselect the current selection: +
```
+elm_entry_select_none(entry);
+
```
+
To select part of the text, use elm_entry_select_region_set(). The following code selects the first twenty characters of the entry content. +
```
+elm_entry_select_region_set(entry, 0, 20);
+
```
+

To retrieve the currently selected text in an entry: +

+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+

+ +

If the entry text is empty, elm_entry_selection_get() returns NULL.

+ +

You can copy or cut the selection to the clipboard.

+elm_entry_selection_cut(entry);
+

+ +

The selection can be pasted in the same or a different entry.

+elm_entry_selection_paste(entry);
+

+ +

+ +

The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.

To move the cursor to the beginning of the entry: +
```
+elm_entry_cursor_begin_set(entry);
+
```
+
To move the cursor to the end of the entry: +
```
+elm_entry_cursor_end_set(entry);
+
```
+

To move the cursor one line down or up: +

+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+

To move the cursor one character to the left or right: +

+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+

To set the cursor at a specific position (15th character, for example): +
```
+elm_entry_cursor_pos_set(entry, 15);
+
```
+

+ +

It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.

+ +

+elm_entry_cursor_selection_begin(entry);
+
+for (i = 0; i < 5; i++)
+{
+   elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+

+ +

+ +

Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available:

<br>: Inserts a line break.
<ps>: Inserts a paragraph separator. This is preferred over line breaks.
<tab>: Inserts a tab.
<em>...</em>: Emphasis. Sets the oblique style for the enclosed text.
<b>...</b>: Sets the bold style for the enclosed text.
<link>...</link>: Underlines the enclosed text.
<hilight>...</hilight>: Highlights the enclosed text.

+ +

+ +

Special markups can be added within the text of the entry:

<a href = ..>...</a>: Anchors
<item size = .. vsize = .. href = ..>...</item>: Items

+ +

The anchors generate an anchor,clicked signal when the user clicks on them. The href attribute is used to identify the anchor. It also reacts to the anchor,in (mouse in), anchor,out (mouse out), anchor,down (mouse down), and anchor,up (mouse up) events.

+ +

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

+ +

+ +

To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using elm_entry_text_style_user_push(). This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with elm_entry_text_style_user_pop().

+ +

+ +

Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.

+ +

+static Elm_Entry_Filter_Limit_Size limit_size = 
+{
+   .max_char_count = 8,
+   .max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+ 
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+

+ +

The content can be filtered by passing an Elm_Entry_Filter_Accept_Set structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the '+', '-', '*', and '/' characters.

+static Elm_Entry_Filter_Accept_Set accept_set = 
+{
+   .accepted = NULL,
+   .rejected = "+*-/"
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+

+ +

+ +

The entry content can be saved to a file (/tmp/test.txt, for example).

+ +

+// Set the file in which the entry text is saved. This function
+// implicitly loads the existing file content 
+elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
+

+ +

Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.

+ +

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

+ +

+ +

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

+Evas_Object *icon;
+
+ic = elm_icon_add(entry);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(entry, "end", icon);
+

+ +

+ +

The default theme allows the use of the following text parts:

default - text of the entry
guide - placeholder of the entry

+ +

The following example shows how to set the placeholder text of the entry to Hello World.

+ +

+elm_object_part_text_set(entry, "Hello World");
+

+ +

+ +

The entry component emits the following signals:

aborted: The escape key is pressed on a single line entry.
activated: The enter key is pressed on a single line entry.
anchor,clicked: An anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,down: Mouse button is pressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,hover,opened: The anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,in: Mouse cursor is moved into an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,out: Mouse cursor is moved out of an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,up: Mouse button is unpressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
changed: The text within the entry is changed.
changed,user: The text within the entry is changed because of user interaction. event_info points to an object of the type Edje_Entry_Change_Info.
clicked: The entry is clicked (mouse press and release).
clicked,double: The entry is double clicked.
clicked,triple: The entry is triple clicked.
cursor,changed: The cursor position is changed.
cursor,changed,manual: The cursor position is changed manually.
focused: The entry receives focus. event_info points to an object of the type Elm_Focus_Info.
unfocused: The entry loses focus.
language,changed: Program language is changed.
longpressed: A mouse button is pressed and held for a couple of seconds.
maxlength,reached: A maximum length is reached.
preedit,changed: The preedit string is changed.
press: A mouse button is pressed on the entry.
redo,request: The request is redone.
selection,changed: The current selection is changed.
selection,cleared: The current selection is cleared.
selection,copy: A copy of the selected text into the clipboard is requested.
selection,cut: A cut of the selected text into the clipboard is requested.
selection,paste: A paste of the clipboard contents is requested.
selection,start: A selection is begun and no previous selection exists.
text,set,done: The whole text is set to the entry.
theme,changed: The theme is changed.
undo,request: The request is undone.

+ +

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

+ +

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

+ +

+{
+   evas_object_smart_callback_add(entry, "focused", focused_cb, data);
+}
+
+// Callback function for the "focused" signal
+// This callback is called when the entry receive the focus
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
+} 
+

+ + +

+ +

Figure: Flip hierarchy

Flip hierarchy

+ +

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

+ +

+ +

The following example shows how to create a flip component.

+ +

+Evas_Object *flip, *parent, *content1, *content2;
+flip = elm_flip_add(parent);
+

+ +

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

+ +

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

+ +

+ +

Now you can run an flip animation.

+elm_flip_go(flip, ELM_FLIP_CUBE_UP);
+

+ +

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

ELM_FLIP_ROTATE_X_CENTER_AXIS: Rotate the content around a horizontal axis.
ELM_FLIP_ROTATE_Y_CENTER_AXIS: Rotate the content around a vertical axis.
ELM_FLIP_ROTATE_XZ_CENTER_AXIS: Rotate the content around a diagonal axis.
ELM_FLIP_ROTATE_YZ_CENTER_AXIS: Rotate the content around a diagonal axis.
ELM_FLIP_CUBE_LEFT: Rotate the content left as if it was on a side of a cube.
ELM_FLIP_CUBE_RIGHT: Rotate the content right as if it was on a side of a cube.
ELM_FLIP_CUBE_UP: Rotate the content up as if it was on a side of a cube.
ELM_FLIP_CUBE_DOWN: Rotate the content down as if it was on a side of a cube.
ELM_FLIP_PAGE_LEFT: Move the content to the left as if the flip was a book.
ELM_FLIP_PAGE_RIGHT: Move the content to the right as if the flip was a book.
ELM_FLIP_PAGE_UP: Move the content up as if the flip was a book.
ELM_FLIP_PAGE_DOWN: Move the content down as if the flip was a book.

+ +

+ +

By default, the user cannot interact with the flip. You can set the interaction to be possible, but you have to choose which animation appears on the interaction (rotation has been selected in the following example).

+ +

+elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
+

+ +

The available modes of interaction are

ELM_FLIP_INTERACTION_NONE: No interaction is allowed
ELM_FLIP_INTERACTION_ROTATE: Interaction causes a rotating animation
ELM_FLIP_INTERACTION_CUBE: Interaction causes a cube animation
ELM_FLIP_INTERACTION_PAGE: Interaction causes a page animation

+ +

You must also choose which interaction directions are enabled. Only right and left are enabled in the following example.

+ +

+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
+

+ +

You can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.

+ +

+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
+

+ +

+ +

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

+ +

+"animate,begin" - A flip animation is started
+"animate,done" - A flip animation is finished
+

+ +

You can register a callback on the "animation,begin" signal.

+ +

+{
+   evas_object_smart_callback_add(entry, "animate,begin", anim_start_cb, data);
+}
+
+// Callback function for the "animate,begin" signal
+// This callback is called when the flip animation starts
+void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Animation starts\n");
+}

+ +

+ +

Figure: Gengrid component

Gengrid component

+ +

Figure: Gengrid hierarchy

Gengrid hierarchy

+ +

Gengrid component is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.

+ +

This UI component inherits from the layout component and implements the scroller interface. Because of this, the scroller and layout functions can be used with this UI component.

+ +

A gengrid can display its items using a horizontal or vertical layout. In the first layout, the items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.

+ +

+ +

You can add a gengrid component with the following code.

+Evas_Object *gengrid, *parent;
+gengrid = elm_gengrid_add(parent);
+

+ +

+ +

A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or more boolean states. The number of the text and content depends on the theme used for gengrid items. In the default Tizen gengrid item theme, items can have two content parts that can be set with the elm.swallow.icon and elm.swallow.end part names.

+ +

+ +

As with genlists, the items are allocated and deleted on the go, while the user is scrolling the gengrid. The following example shows how to declare a Elm_Gengrid_Item_Class structure to inform the gengrid how to manage items.

+static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
+gic->item_style = "default";
+gic->func.text_get = _grid_label_get;
+gic->func.content_get = _grid_content_get;
+gic->func.state_get = _grid_state_get;
+gic->func.del = _grid_del;
+

+ +

The parameters of this structure are not be detailed here, because they are very similar to that of the genlist. Please refer to the genlist component page for more detailed information.

+ +

+ +

As with genlists, items can be added with the elm_gengrid_item_append(), elm_gengrid_item_prepend(), elm_gengrid_item_insert_before(), and elm_gengrid_item_insert_after() functions. With the gengrid, there is no need to pass the type parameters. They can be cleared with the elm_gengrid_clear() function.

+ +

You can set the multiselection mode on.

+elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
+

+ +

When the multiselection mode is on, the selected items are retrieved with the elm_gengrid_selected_items_get() function. The function returns a list of all the selected items.

+ +

When the content of an item changes, you can call elm_gengrid_item_update() to ask the gengrid to update this item's content.

+ +

It is also possible to select or disable some items manually with the elm_gengrid_item_selected_set() and elm_object_item_disabled_set() functions.

+ +

+ +

The gengrid component emits the following signals:

activated: The user has double-clicked or pressed (enter | return | spacebar) on an item. The event_info parameter is the gengrid item that is activated.
clicked,double: The user has double-clicked an item. The event_info parameter is the gengrid item that is double-clicked.
longpressed: The item is pressed for a certain amount of time. By default it is one second.
selected: The user has selected an item. The event_info parameter is the gengrid item that is selected.
unselected: The user has unselected an item. The event_info parameter is the gengrid item that is unselected.
realized: The item in the gengrid has its implementing Evas object instantiated, de facto. event_info is the gengrid item that is created. The object can be deleted at any time, so it is strongly advisable not to use the object pointer returned from elm_gengrid_item_object_get(), because it can point to freed objects.
unrealized: The implementing Evas object for this item is deleted. event_info is the gengrid item that is deleted.
changed: An item is added, removed, resized or moved and the gengrid is resized or has horizontal property changes.
scroll,anim,start: Scrolling animation starts.
scroll,anim,stop: Scrolling animation stops.
drag,start,up: The item in the gengrid is dragged (not scrolled) up.
drag,start,down: The item in the gengrid has dragged (not scrolled) down.
drag,start,left: The item in the gengrid is dragged (not scrolled) left.
drag,start,right: The item in the gengrid is dragged (not scrolled) right.
drag,stop: The item in the gengrid stops being dragged.
drag: The item in the gengrid is dragged.
scroll: The content is scrolled (moved).
scroll,drag,start: Dragging the content starts.
scroll,drag,stop: Dragging the content stops.
edge,top: The gengrid is scrolled to the top edge.
edge,bottom: The gengrid is scrolled to the bottom edge.
edge,left: The gengrid is scrolled to the left edge.
edge,right: The gengrid is scrolled to the right edge.

+ +

+ +

Figure: Genlist component

Genlist component

+ +

Figure: Genlist hierarchy

Genlist hierarchy

+ +

Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.

+ +

For more information, see the Genlist Tutorial.

+ +

+ +

An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively labels, contents, and states in the Edje file. The default item style provides one text part (elm.text), two content parts (elm.swallow.icon and elm.swallow.end) and no state parts.

+ +

The following item styles are available:

default
full
one_icon
end_icon
group_index
double_label

+ +

Here are some examples of the item styles.

+ +

Figure: Default item style

Default item style

+ +

Figure: end_icon item style

+ +

Figure: double_label item style

double_label item style

+ +

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

+ +

+ +

A genlist component is added with the elm_genlist_add() function.

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

+ +

+ +

To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a Elm_Genlist_Item_Class structure that informs the genlist component which callbacks to call when an item is created or deleted.

+ +

+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc->item_style = "default";
+itc->decorate_item_style = NULL;
+itc->decorate_all_item_style = NULL;
+itc->func.text_get = _item_label_get;
+itc->func.content_get = _item_content_get;
+itc->func.state_get = _item_state_get;
+itc->func.del = _item_del;
+

+ +

The item_style, decorate_item_style, and decorate_all_item_style attributes define the names of the item style, the decorate mode item style and the decorate all item style.

+ +

The func structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the elm_genlist_item_append() and related item creation functions, and an obj parameter that points to the genlist object itself.

text_get +
This function receives a PART parameter that is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the strdup() function) corresponding to the PART parameter. The caller is in charge of freeing the string when done.
content_get +
The PART parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return NULL, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is unrealized.
state_get +
The PART parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns EINA_FALSE for false/off or EINA_TRUE for true/on. The default is false. Genlists emit a signal to the PART parameter's theming Edje object with elm,state,xxx,active as emission and elm as source argument, when the state is true. xxx is the name of the (state) part.
del +
This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.

+ +

+ +

To add an item, several functions can be used. elm_genlist_item_append() adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. elm_genlist_item_prepend() is otherwise the same but adds to the beginning of the list or children lists. elm_genlist_item_insert_before() inserts an item before the indicated item and elm_genlist_item_insert_after() inserts an item after the indicated item.

+ +

The previous functions take a type parameter that can be one of the following.

ELM_GENLIST_ITEM_NONE
ELM_GENLIST_ITEM_TREE
ELM_GENLIST_ITEM_GROUP

+ +

If ELM_GENLIST_ITEM_TREE is set, this item is displayed as being able to expand and have child items. If ELM_GENLIST_ITEM_GROUP is set, this item is a group index item that is displayed at the top until the next group appears.

+ +

Figure: Genlist tree

Genlist tree

+ +

The application clears the list with elm_genlist_clear(), which deletes all the items in the list. elm_object_item_del() deletes a specific item. elm_genlist_item_subitems_clear() clears all items that are children of the indicated parent item.

+ +

To help inspect the list items, move to the item at the top of the list with elm_genlist_first_item_get(), which returns the item pointer. elm_genlist_last_item_get() moves to the item at the end of the list. elm_genlist_item_next_get() and elm_genlist_item_prev_get() move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.

+ + + + + + + + + + +

Note
As a tree, the items are flattened on the list, so elm_genlist_item_parent_get() gives you the name of the parent item (even to skip them if needed).

+ +

elm_genlist_item_show() scrolls the scroller to show the desired item as visible.

elm_object_item_data_get() returns the data pointer set by the item creation functions.

+ +

If an item changes (state, boolean, text or content change), use elm_genlist_item_update() for the genlist to update the item. Genlist re-realizes the item and calls the functions in the _Elm_Genlist_Item_Class for it.

+ +

+ +

Items are manually selected or deselected with elm_genlist_item_selected_set() or disabled with elm_object_item_disabled_set(). In case there is a tree or a group item, the elm_genlist_item_expanded_set() function is used to expand or contract the item.

+ + + + + + + + + + +

Note
Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the expanded or contracted signals.

+ +

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

+ +

In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).

+ +

Figure: Genlist component

Genlist component

+ +

+ +

The genlist component emits the following signals:

activated: The user has double-clicked or pressed (enter | return | spacebar) on an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
clicked,double: The user has double-clicked an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
selected: The user selects an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
unselected: The user unselects an item. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.
expanded: The item is to be expanded with elm_genlist_item_expanded_set(). This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
contracted: The item is to be contracted with elm_genlist_item_expanded_set(). This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
expand,request: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
contract,request: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
realized: The item is created as a real evas object. event_info in the callback function points at an object of the type Elm_Object_Item, that contains the activated item.
unrealized: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,start,up: The item in the list is dragged (not scrolled) up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,start,down: The item in the list is dragged (not scrolled) down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,start,left: The item in the list is dragged (not scrolled) left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,start,right: The item in the list is dragged (not scrolled) right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,stop: The item in the list has stopped being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag: The item in the list is being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
longpressed: The item is pressed for a certain amount of time. The default specified time is one second. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
scroll,anim,start: The scrolling animation is started. event_info is NULL.
scroll,anim,stop: The scrolling animation is stopped. event_info is NULL.
scroll,drag,start: Dragging the content is started. event_info is NULL.
scroll,drag,stop: Dragging the content is stopped. event_info is NULL.
edge,top: The genlist is scrolled to the top edge. event_info is NULL.
edge,bottom: The genlist is scrolled to the bottom edge. event_info is NULL.
edge,left: The genlist is scrolled to the left edge. event_info is NULL.
edge,right: The genlist is scrolled to the right edge. event_info is NULL.
multi,swipe,left: The genlist is multi-touch swiped left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,swipe,right: The genlist is multi-touch swiped right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,swipe,up: The genlist is multi-touch swiped up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,swipe,down: The genlist is multi-touch swiped down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,pinch,out: The genlist is multi-touch pinched out. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,pinch,in: The genlist is multi-touch pinched in. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
swipe: The genlist is swiped. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
moved: A genlist item is moved in the reorder mode. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
moved,after: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use elm_genlist_item_prev_get(). This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
moved,before: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use elm_genlist_item_next_get(). This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
language,changed The program's language is changed. event_info is NULL.
tree,effect,finished: A genlist tree effect is finished. event_info is NULL.

+ + +

+ +

Figure: GLView gears example

GLView gears example

+ +

Figure: GLView hierarchy

GLView hierarchy

+ + +

The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see OpenGL ES.

+ +

+ +

Create a GLView component with the elm_glview_add() function.

+Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+

+ +

In this example, the size of the GLView is set to 200x200 pixels.

+elm_glview_size_set(glview, 200, 200);
+

+ +

+ +

You can configure the GLView rendering mode by activating the following rendering modes:

+ +

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

+ +

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

+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+

+ +

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

+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+

+ +

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

+ +

The following example shows how to set the GLView rendering policy.

+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+

+ +

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

+ +

elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+

+ +

elm_glview_init_func_set() registers an init callback that is called at the GLView object creation.
elm_glview_del_func_set() registers a del function that is called when the GLView object is deleted.
elm_glview_resize_func_set() registers the resize function that is called during the rendering loop when the GLView object is resized.
elm_glview_render_func_set() registers the render function that is called when the GLView object must be redrawn.

+ +

+ +

The GLView component emits the following signals:

+ +

focused: The Glview component is focused. The event_info parameter points at an object of the type Elm_Focus_Info.
unfocused: The GLView object is unfocused.

+ +

To register a callback:

+{
+      evas_object_smart_callback_add(glview, "focused", focused_cb, data);
+}
+
+// Callback function for the "focused" signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+      Elm_Focus_Info *fi = event_info;
+
+      dlog_print(DLOG_INFO, LOG_TAG, "GLView is focused\n");
+}
+

+ +

+ +

Figure: Icon component

+ +

Figure: Icon hierarchy

Icon hierarchy

+ +

The icon component inherits from the image component. It is used to display images in an icon context.

+ +

+ +

You can create an icon and set it as a freedesktop.org Home standard icon.

+ +

+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "Home");
+

+ +

+ +

You can change the image by using an image in the filesystem (for example, /tmp/Home.png).

+elm_image_file_set(icon, "/tmp/Home.png", NULL);
+

+ +

You can also use a group in an Edje file (for example, /tmp/Home.edj).

+elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
+

+ +

A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.

+ +

+elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
+

+ +

This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.

+ +

+ +

The icon component emits the following signals:

thumb,done: elm_icon_thumb_set() is completed with success.
thumb,error: elm_icon_thumb_set() fails.

+ +

In both cases, event_info is NULL.

+ + +

+ +

Figure: Image component

Image component

+ +

Figure: Image hierarchy

Image hierarchy

+ +

The image component can load and display an image from a disk file or a memory region.

+ +

+ +

This object is created with elm_image_add().

+ +

+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+

+ +

+ +

Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.

+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+

+ +

When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.

+elm_image_smooth_set(image, EINA_TRUE);
+

+ +

Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.

+elm_image_preload_disabled_set(image, EINA_TRUE);
+

+ +

The image can be rotated or flipped. Here the image is rotated 180 degrees.

+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+

+ +

The following orientations are available:

ELM_IMAGE_ORIENT_0: No orientation change
ELM_IMAGE_ROTATE_90: Rotate the image 90 degrees clockwise
ELM_IMAGE_ROTATE_180: Rotate the image 180 degrees clockwise
ELM_IMAGE_ROTATE_270: Rotate the image 90 degrees counter-clockwise
ELM_IMAGE_FLIP_HORIZONTAL: Flip the image horizontally
ELM_IMAGE_FLIP_VERTICAL: Flip the image vertically
ELM_IMAGE_FLIP_TRANSPOSE: Flip the image along the bottom-left to top-right line
ELM_IMAGE_FLIP_TRANSVERSE: Flip the image along the top-left to bottom-right line

+ +

If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object's area.

+// Tell the image to keep original aspect ratio 
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object 
+elm_image_fill_outside_set(image, EINA_TRUE);
+

+ +

In this configuration, part of the image can go outside the object. If elm_image_fill_outside_set is set to EINA_FALSE, the image stays inside the limits of the parent object.

+ +

+ +

The image component emits the following signals:

drop: The user drops an image typed object onto the object in question - the event info argument is the path to that image file
clicked: The user clicks the image. event_info is NULL.

+ +

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

+{
+   evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when the image is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
+}
+

+ +

+ +

Figure: Index component

Index component

+ +

Figure: Index hierarchy

Index hierarchy

+ +

An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component's container. Generally, an index is used together with lists, generic lists, or generic grids.

+ +

+ +

Call the elm_index_add() function to create a new index component.

+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+

+ +

+ +

The following example shows how to add the listitem object at the letter A, calling the smart callback it_select_cb() when this item is selected.

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

+ +

The following example shows how to define the smart callback.

+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
+}
+

+ +

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

+ +

+ +

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

+ +

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

+ +

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

+ +

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

+ +

+elm_index_item_sorted_insert(index, "B", NULL, list_item2, _index_icmp, NULL);
+

+ +

+ +

The index component emits the following signals:

changed: The selected index item changes. event_info is the selected item's data pointer.
delay,changed: The selected index item changes, but after a small idling period. event_info is the selected item's data pointer.
selected: The user releases a mouse button and selects an item. event_info is the selected item's data pointer.
level,up: The user moves a finger from the first level to the second level.
level,down: The user moves a finger from the second level to the first level.

+ +

When the user selects an item in the index, the selected signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.

+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Elm_Object_Item *lit = event_info;
+
+   // Code that does the desired action
+}
+

+ +

After that, the callback to the selected signal is registered.

+evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
+

+ + +

+ +

Figure: Label component

Label component

+ +

Figure: Label hierarchy

Label hierarchy

+ +

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

+ +

+ +

To add a label and set the text in it, use the following functions.

+ +

+Evas_Object *label = elm_label_add(win);
+
+elm_object_text_set(label, "Some long text for our label, that is not so long");
+

+ +

+ +

Label displays the text with several predefined styles.

default: No animation
marker: The text is centered and bolded.
slide_long: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).
slide_short: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.
slide_bounce: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.

+ +

Here the style is set to slide_long.

+ +

+elm_object_style_set(label, "slide_long");
+

+ +

+ +

The duration of the animation and the slide mode can be set with the following functions.

+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+

+ +

Use the following function to modify the style.

+elm_object_style_set(label, "slide_bounce");
+

+ +

+ +

This UI component emits the following signals:

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

+ +

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

+ +

+{
+   evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
+}
+
+// Callback function for the "slide,end" signal
+// This callback is called when the label slide reaches the end
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
+}
+

+ +

+ +

Figure: List component

List component

+ +

Figure: List hierarchy

List hierarchy

+ + +

This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option.

+ +

The list items can contain a text and two contents (start and end). These are set with the elm_object_item_*() functions.

+ +

+ +

+Evas_Object *list, *parent;
+
+// Create a list 
+list = elm_list_add(parent);
+

+ +

+ +

This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:

+ +

+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
+// Enable bounce effect when the list reaches the upper and lower limits 
+elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
+

+ +

The elm_list_multi_select_set() function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to selected.

+ +

+Evas_Object *list;
+
+// Activate multi selection 
+elm_list_multi_select_set(list, EINA_TRUE);
+

+ +

+ +

Items are added with elm_list_item_append() or elm_list_item_prepend(). Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.

+ +

+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected 
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+   Eina_Bool selected = elm_list_item_selected_get(list_it);
+   dlog_print(DLOG_INFO, LOG_TAG, "item is %s\n", selected? "selected": "unselected");
+}
+
+for (i = 0; i < 10; i++)
+{
+   Evas_Object *ic;
+   char tmp[8];
+   snprintf(tmp, sizeof(tmp), "Item %02d", i);
+   // Create an icon 
+   ic = elm_icon_add(win);
+   // Set the file to the icon file 
+   elm_image_file_set(ic, "path/to/file", NULL);
+   // Add item to the list 
+   elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+

+ +

+ +

If you want to change the state of an item, you can do it by using all the functions relative to Elm_Object_Item. Each item of the list contains two instances of an evas_object. Give those as the third and the fourth arguments when you append or prepend the item in the list. The evas_object instances are changed with elm_object_item_part_content_set. The first object is referenced as the start object in the theme, whereas the second one is referenced as the end object. Give these names when you use the elm_object_item_part_content_set. The label of the item is changed by using elm_object_item_text_set.

+ +

+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item 
+it = elm_list_selected_item_get(list);
+if (!it)
+   return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file 
+elm_image_file_set(ic, "path/to/file", NULL);
+// Change the first icon 
+elm_object_item_part_content_set(it, "start", ic);
+// Change the second icon 
+elm_object_item_part_content_set(it, "end", ic);
+// Change the label 
+elm_object_item_text_set(it, "I've been selected !");
+

+ +

+ +

The list of the currently selected items is retrieved with elm_list_selected_items_get(). If the multiselect mode is false, you can retrieve the only selected item with elm_list_selected_item_get(). For example, this is how to unselect all previously selected items.

+ +

+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item 
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+   elm_list_item_selected_set(it, EINA_FALSE);
+

+ +

+ +

To find out if an item is selected, call elm_list_item_selected_get. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.

+ +

Elementary list provides two functions for sliding a list to a specific item. elm_list_item_show shows the item passed as an argument, whereas elm_list_item_bring_in shows the item, but only after animating the slide.

+ +

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

+ +

The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen.

+ +

+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+

+ +

+ +

The list emits the following signals:

activated: The user double-clicks or presses (enter | return | spacebar) on an item. The event_info parameter of the callback function contains a pointer to the item activated.
clicked,double: The user double-clicks an item. The event_info parameter of the callback function contains a pointer to the item activated.
selected: The user selects an item. The event_info parameter of the callback function contains a pointer to the item activated.
unselected: The user unselects an item. The event_info parameter of the callback function contains a pointer to the item activated.
longpressed: The user long-presses an item. The event_info parameter of the callback function contains a pointer to the item activated.
edge,top: The list is scrolled to the top edge.
edge,bottom: The list is scrolled to the bottom edge.
edge,left: The list is scrolled to the left edge.
edge,right: The list is scrolled to the right edge.
highlighted: The user highlights an item on the list. The event_info parameter of the callback function contains a pointer to the item activated.
unhighlighted: The user unhighlights an item in the list. The event_info parameter of the callback function contains a pointer to the item activated.

+ +

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

+ +

+{
+   Evas_Object *list;
+
+   evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+   elm_Object_Item *it = event_info;
+   elm_list_selected_item_set(it,  EINA_FALSE);
+}
+

+ +

+ +

Figure: Map hierarchy

Map hierarchy

+ +

The map component displays a geographic map. The default map data are provided by the OpenStreetMap project (http://www.openstreetmap.org/). Custom providers can also be added.

+ +

This UI component supports:

Zooming
Scrolling
Markers with content to be displayed when the user clicks over them
Group of markers
Routes

+ +

The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.

+ +

+ +

Once created with the elm_map_add() function, zoom level x12 can be set.

+ +

+Evas_Object *map, *parent;
+
+map = elm_map_add(parent);
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
+

+ +

Here the zoom mode is set to manual, but it can also be set to the ELM_MAP_ZOOM_MODE_AUTO_FIT mode and the ELM_MAP_ZOOM_MODE_AUTO_FILL mode. In that case however, the elm_map_zoom_set() function cannot be used.

+ +

+ +

If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.

+elm_map_region_show(map, 2.2, 48.8);
+

+ +

This shows the desired coordinates. The location can also be shown with a bring-in animation.

+elm_map_region_bring_in(map, 2.2, 48.8);
+

+ +

The map is rotated 90 degrees around the current position.

+elm_map_rotate_set(map, 90, 2.2, 48.8);
+

+ +

+ +

Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.

+ +

+ +

Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.

+ +

Set an icon ("Home" icon) to the forest class. This icon is displayed in place of the forest class on the map.

+Evas_Object *icon;
+Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
+
+// Set min zoom level at which class is displayed
+elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
+
+// Create a Home icon object and set it to the forest class 
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "home");
+elm_map_overlay_icon_set(forest_class, icon);
+

+ +

+ +

After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the elm_map_overlay_data_set() function. Set the name of the forest in the data. The icon can be set to the overlay with the elm_map_overlay_icon_set() function.

+ + + + + + + + + + +

Note
Do not use the same icon object for two different overlays. Create a new icon object each time you need one.

+ +

+Elm_Map_Overlay *ovl;
+const char* data_meudon = "Meudon forest";
+const char* data_fausses = "Fausse forest";
+
+// Add an overlay
+ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "stop");
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &data_meudon);
+
+// Add the new ovl object to the forest class 
+elm_map_overlay_class_append(forest_class, ovl);
+
+// Add another overlay next to the first one 
+ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "stop");
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &data_fausses);
+elm_map_overlay_class_append(forest_class, ovl);
+

+ +

If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.

+elm_map_overlay_class_zoom_max_set(forest_class, 8);
+

+ +

In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.

+ +

+ +

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

+ +

+// Add an overlay bubble object 
+Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
+
+// Set it to follow a specific overlay (the last created one here) 
+elm_map_overlay_bubble_follow(bubble, ovl);
+

+ +

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

+ +

Content is added to the bubble with the elm_map_overlay_bubble_content_append() function.

+ +

+ +

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

+Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
+

+ +

You can also add a scale at the 200x0 coordinate (in pixels).

+Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
+

+ +

You can also draw a line, a polygon, or a route. For a full description of these functions, see the Map API.

+ +

+ +

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

+ +

The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.

+ +

+Elm_Map_Route *route = elm_map_route_add(map,
+         ELM_MAP_ROUTE_TYPE_BICYCLE,
+         ELM_MAP_ROUTE_METHOD_FASTEST,
+         2.20718, 48.79759,
+         2.1699, 48.8189,
+         NULL, NULL);
+
+// Add a callback to when the route has been calculated and loaded 
+evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
+

+ +

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

+static void
+_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
+{
+   Elm_Map_Route *route = data;
+
+   Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
+   elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
+}
+

+ +

+ +

The map component emits the following callbacks:

clicked: The user has clicked the map without dragging around.
clicked,double: The user has double-clicked the map.
press: The user has pressed down on the map.
longpressed: The user has pressed down on the map for a long time without dragging around.
scroll: The content is scrolled (moved).
scroll,drag,start: Dragging the contents around starts.
scroll,drag,stop: Dragging the contents around stops.
scroll,anim,start: Scrolling animation starts.
scroll,anim,stop: Scrolling animation stops.
zoom,start: Zoom animation starts.
zoom,stop: Zoom animation stops.
zoom,change: The zoom is changed when using an auto zoom mode.
tile,load: A map tile image load begins.
tile,loaded: A map tile image load ends.
tile,loaded,fail: A map tile image load fails.
route,load: Route request begins.
route,loaded: Route request ends.
route,loaded,fail: Route request fails.
name,load: Name request begins.
name,loaded: Name request ends.
name,loaded,fail: Name request fails.
overlay,clicked: An overlay is clicked.
loaded: The map is loaded.

+ + +

+ +

Figure: Notify hierarchy

Notify hierarchy

+ +

The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.

+ +

+ +

The following example shows how to create a notify object.

+ +

+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+

+ +

+ +

Create a label and add it to the notify object.

+ +

+Evas_Object *content;
+
+// Create the label and set some text to it 
+content = elm_label_add(parent);
+
+elm_object_text_set(content, "A label text");
+evas_object_show(content);
+
+// Add the label object to the notify component
+elm_object_content_set(notify, content);
+

+ +

In the following example the notify object is shown on the bottom left corner of the parent object.

+ +

+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+

+ +

Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.

+ +

+elm_notify_timeout_set(notify, 5.0);
+

+ +

+ +

The notify component emits the following signals:

timeout: The timeout count ends and the notify component is hidden
block,clicked: The user clicks outside of the notify component

+ +

For both these signals event_info is NULL.

+ +

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

+ +

+{
+   evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
+}
+
+// Callback function for the "timeout" signal
+// The timeout expires and the notify object is hidden
+ 
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Notify is hidden\n");
+}
+

+ + +

+ + +

Figure: Panel hierarchy

Panel hierarchy

The panel component is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.

+ +

Panel inherits from layout component, so the layout API can be used on this UI component.

+ +

+ +

The following example shows how to add a panel and set its orientation to the left.

+ +

+Evas_Object *panel, *parent;
+
+panel = elm_panel_add(parent);
+elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
+

+ +

+ +

The panel can be manually hidden.

+elm_panel_hidden_set(pan, EINA_TRUE);
+

+ +

The panel can be toggled if you do not know the hidden state of the UI component.

+elm_panel_toggle(pan);
+

+ +

The panel can be set scrollable.

+elm_panel_scrollable_set(pan, EINA_TRUE);
+

+ +

+ +

Tizen SDK has implemented a layout theme to add a drawer in the application. This example shows how to add a new Elementary layout object and set the theme of this layout to the drawer.

+ +

+Evas_Object *layout;
+
+// Create a new layout object 
+layout = elm_layout_add(parent);
+
+// Set the "drawer" group theme and "panel" style to it 
+elm_layout_theme_set(layout,"layout", "drawer", "panel");
+
+// Show the new layout
+evas_object_show(layout);
+

+ +

Once the panel object is created, it can be swallowed in the new layout.

+ +

+elm_object_part_content_set(layout, "elm.swallow.left", pan);
+

+ +

You can set content to the elm.swallow.bg and elm.swallow.content parts of the layout.

+// Panel Background (Dimmed Area) 
+Evas_Object *bg = create_bg(layout);
+elm_object_part_content_set(layout, "elm.swallow.bg", bg);
+
+// Add content to the drawer 
+Evas_Object *content;
+elm_object_part_content_set(layout, "elm.swallow.content", content);
+

+ +

+ +

You can register a callback on the scroll signal, when the user scrolls the panel. The event_info parameter is of the type Elm_Panel_Scroll_Info.

+ +

+{
+   evas_object_smart_callback_add(pan, "scroll", scroll_cb, data);
+}
+// Callback function for the "scroll" signal
+// This callback is called when the user scrolls the panel
+void scroll_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Elm_Panel_Scroll_Info *scrollinfo = event_info;
+   dlog_print(DLOG_INFO, LOG_TAG, "The panel was scrolled.\n");
+}
+

+ + +

+ +

Figure: Photo hierarchy

Photo hierarchy

+ +

The photo component is used to display a photo, such as a contact image. If no photo is set on it, it displays a person icon to show that it is a photo placeholder.

+ +

+ +

The following example shows how to create a photo object.

+ +

+Evas_Object *photo, *parephotoslider = elm_photo_add(parent);
+photo = elm_photo_add(parent);
+

+ +

+ +

A file can be set to the photo component. Here, PHOTO_FILENAME is a string corresponding to the photo file name on the system.

+elm_photo_file_set(photo, PHOTO_FILENAME);

+ +

The photo can be set as editable, and it can be copied, cut, or dragged in another region of the screen.

+elm_photo_editable_set(photo, EINA_TRUE);

+ +

The photo can also be completely visible on the screen.

+ +

+elm_photo_fill_inside_set(photo, EINA_TRUE);

+ +

+ +

The following callbacks are registered on the photo component.

clicked: The user has clicked the photo.
drag,start: The user starts dragging the inner image out of the photo's frame.
drag,end: The user drops the dragged image.

+ +

event_info is always NULL.

+ + +

+ +

Figure: Photocam hierarchy

Photocam hierarchy

+ +

The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for .jpeg images format and has a low memory footprint.

+ +

This UI component implements the scroller interface, so all the functions concerning the scroller can be used with the photocam component.

+ +

+ +

The following example shows how to create a photocam component and set an image file on it.

+ +

+Evas_Object *photocam;
+photocam = elm_photocam_add(win);
+elm_photocam_file_set(photocam, "/tmp/photo.jpeg");
+

+ +

+ +

You can choose between two automatic zoom modes and a manual zoom mode. In the following example the zoom mode is set to manual and a double zoom is requested.

+elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
+elm_photocam_zoom_set(photocam, 2.0);
+

+ +

The zoom mode can be set to ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL to fill all the pixels of the photocam component.

+ +

Multi-touch zooming is activated by enabling gestures.

+elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
+

+ +

You can zoom in a specific region. The following example shows how to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.

+ +

+elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
+

+ +

+ +

The photocam component emits the following signals:

clicked: The user has clicked the photo without dragging around.
press: The user has pressed down on the photo.
longpressed: The user has pressed down on the photo for a long time without dragging around.
clicked,double: The user has double-clicked the photo.
load: The photo load begins.
loaded: The image file load is complete for the first view (a low resolution blurry version).
load,detail: A photo detailed data load begins.
loaded,detail: The image file load is complete for the detailed image data (full resolution is needed).
zoom,start: Zoom animation starts.
zoom,stop: Zoom animation stops.
zoom,change: The zoom is changed when using an auto zoom mode.
scroll: The content is scrolled.
scroll,anim,start: Scrolling animation starts.
scroll,anim,stop: Scrolling animation stops.
scroll,drag,start: Dragging the content around starts.
scroll,drag,stop: Dragging the content around stops.

+ +

For all these signals, event_info is NULL.

+ +

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

+ +

+void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
+{
+   evas_object_smart_callback_add(photocam, "loaded", loaded_cb, data);
+}
+
+// Callback function for the "loaded" signal
+// The photocam has loaded the photo file in a low resolution
+ 
+void loaded_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The photo has been loaded\n");
+}
+

+ +

+ +

Figure: Plug hierarchy

Plug hierarchy

+ +

The plug component shows an Evas_Object created by an other process. It can be used anywhere the same way as any other elementary UI component.

+ +

+ +

The following example shows how to create a plug.

+ +

+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+

+ +

+ +

The socket image provides the service where to connect the plug object with the elm_plug_connect() function. In this process, use the service name and number set by the socket you want to connect to.

+ +

As an example, connect to a service named plug_test on the number 0.

+ +

+elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
+

+ +

The Evas_Object corresponding to the distant image is retrieved with the elm_plug_image_object_get() function.

+ +

+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+

+ + + + + + + + + + +

Note
The socket to connect to must be started with the elm_win_socket_listen() function in the other process on the remote window object (it is called remote_win here).

+ +

+// Create a remote window in the other process 
+Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
+                                  ELM_WIN_SOCKET_IMAGE);
+// Create a socket named "plug_test" and listen to it
+elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
+

+ + + +

Figure: Popup component

Popup component

+ +

Figure: Popup hierarchy

Popup hierarchy

+ + +

The popup component shows a popup area that can contain:

a title area (optional)
a content area
an action area (optional)

+ +

The optional title area can contain an icon and text, the action area can contain up to three buttons.

+ +

+ +

The following example shows how to create a popup component.

+Evas_Object *popup, *parent;
+
+// Create a popup 
+popup = elm_popup_add(parent);
+

+ +

+ +

The following item styles are available for the popup:

+ +

popup
toast

+ +

The following example sets the style of the popup to toast.

+ +

elm_object_style_set(popup, "toast");

+ +

+ +

Configure the title area. Set the icon object using the part name title,icon. Set the title text to Test popup using the partname title,text.

+ +

+Evas_Object *icon;
+
+// Add an icon to the title area 
+elm_object_part_content_set(popup, "title,icon", icon);
+
+// Set the title text 
+elm_object_part_text_set(popup, "title,text", "Test popup");
+

+ +

Set the content of the popup. The content can be simple text.

+ +

+elm_object_part_text_set(popup, "default", "Test popup");
+

+ +

The content can also be an Evas object.

+ +

+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+

+ +

Set the buttons of the action area by creating an OK button, a Cancel button, and a Help button.

+ +

+Evas_Object *button1, *button2, *button3;
+
+// Create the 3 buttons 
+
+button1 = elm_button_add(popup);
+elm_object_text_set(button1, "OK");
+
+button2 = elm_button_add(popup);
+elm_object_text_set(button2, "Cancel");
+
+button3 = elm_button_add(popup);
+elm_object_text_set(button3, "Help");
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, "button1", button1);
+elm_object_part_content_set(popup, "button2", button2);
+elm_object_part_content_set(popup, "button3", button3);
+

+ +

The popup emits the following signals:

timeout: The popup is closed as a result of timeout.
block,clicked: The user clicks on the Blocked Event area.

+ +

elm_popup_timeout_set() is used to hide the popup after a certain time. In this example, the timeout is set to five seconds.

+ +

+elm_popup_timeout_set(popup, 5.0);
+

+ +

When the timeout expires, the timeout signal is sent to the user.

+ +

+{
+   evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
+}
+

+ +

The visible region of the popup is surrounded by a translucent region called Blocked Event area. By clicking on this area, the signal block,clicked is sent to the application.

+ + +

+ +

Figure: Progressbar component

Progressbar component

+ +

Figure: Progressbar hierarchy

Progressbar hierarchy

+ + +

+ +

This UI component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.

The following example shows how to create a progressbar component.

+ +

+Evas_Object *pb = elm_progressbar_add(win);
+

+ +

+ +

The progressbar has several styles:

default
pending_list
process_large
process_medium
process_small

+ +

Set the style of the progressbar to pending_list.

+ +

elm_object_style_set(pb, "pending_list");

+ +

+ +

By default, the progressbar does not show a label or an icon, and the unit label is set to %.0f %%.

+ +

The following example shows how to set a label. In this example it is named Test label.

+ +

+elm_object_text_set(pb, "Test label");
+

+ +

An icon is set with elm_object_part_content_set() using the partname icon.

+elm_object_part_content_set(pb, "icon", icon_object);
+

+ +

The unit label format string can be modified using a printf style format. Set it to be a float number with two decimals.

+elm_progressbar_unit_format_set(pb, "%1.2f%%");
+

+ +

+ +

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);
+elm_progressbar_pulse(pb, EINA_TRUE);
+

+ +

The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.

+elm_progressbar_inverted_set(pb, EINA_TRUE);
+

+ +

The progressbar emits the changed signal when the progress value changes. The value is changed with the elm_progressbar_value_set() function. Here the pb progress value is set to 20%.

+elm_progressbar_value_set(pb, 0.2);
+

+ +

The current value can be read.

+double value = elm_progressbar_value_get(pb);
+

+ +

You can set the orientation of the progressbar to vertical instead of the default horizontal orientation.

+elm_progressbar_horizontal_set(pb, EINA_FALSE);
+

+ +

+ +

The changed signal is the only signal specifically emitted by the progressbar component.

+ +

The following example shows how to register a callback on this signal.

+ +

+{
+   evas_object_smart_callback_add(pb, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the progressbar value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+

+ + +

+ +

Figure: Radio component

Radio component

+ +

Figure: Radio hierarchy

Radio hierarchy

+ +

This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected), an optional icon and an optional label. Even though it is usually grouped with two or more other radio objects, it can also be used alone.

The radio component inherits from the layout component. All the layout functions can be used with radio objects.

+ +

+ +

Create a radio component and set a label to it.

+Evas_Object *radio, *parent;
+
+// Create a radio
+radio = elm_radio_add(parent);
+
+// Set a label to it
+elm_object_text_set(radio, "Radio component");
+

+ +

Set an icon to the radio object.

+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "home");
+
+// Set it to the radio component 
+elm_object_part_content_set(radio, "icon", icon);
+

+ +

+ +

The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.

+elm_radio_state_value_set(radio, 1);
+

+ +

+ +

The following example shows how to create a group of radio objects with at least two radio components.

+ +

+// Create another radio object 
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+

+ +

Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.

+ +

+elm_radio_value_set(group, 2);
+

+ +

You can use elm_radio_value_get() to see the currently selected radio of the group.

+ +

+ +

When the state of a radio is modified in a group of radio objects, the changed signal is emitted.

The following example shows how to register a callback on this signal.

+ +

+{
+   evas_object_smart_callback_add(radio, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+

+ + +

+ +

Figure: Segmentcontrol with text

Segmentcontrol with text

+ +

Figure: Segmentcontrol with icons

Segmentcontrol with icons

+ +

Figure: Segmentcontrol hierarchy

Segmentcontrol hierarchy

+ +

This UI component consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.

This UI component inherits from the layout component, so all the layout components API can be used on segmentcontrol objects.

+ +

+ +

The following example shows how to add a segmentcontrol component.

+ +

+Evas_Object *segcontrol, *parent;
+
+segcontrol = elm_segment_control_add(parent);
+

+ +

+ +

You can add items to the UI component. In the following example four items containing only text labels (no icons) are added.

+Elm_Object_Item *it;
+
+elm_segment_control_item_add(segcontrol, NULL, "item1");
+elm_segment_control_item_add(segcontrol, NULL, "item2");
+elm_segment_control_item_add(segcontrol, NULL, "item3");
+it = elm_segment_control_item_add(segcontrol, NULL, "item4");
+

+ +

You can also:

Insert an item at a specific position starting at 0. +

+elm_segment_control_item_insert_at(segcontrol, NULL, "item7", 2);
+

Delete an item. +

+elm_segment_control_item_del_at(segcontrol, 2);
+

Set the selected state of an item manually. +

+elm_segment_control_item_selected_set(it, EINA_TRUE);
+

Disable the whole segment control. +

elm_object_disabled_set(segcontrol, EINA_TRUE);

+ +

+ +

This is how to register a callback on the changedsignal. It is called when the user clicks on a segment item which is not previously selected. The event_info parameter is the segment item pointer.

+{
+   evas_object_smart_callback_add(segcontrol, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the segcontrol selected item changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Elm_Segment_Item *it = event_info;
+
+   dlog_print(DLOG_INFO, LOG_TAG, "The selected segment item has changed\n");
+}
+

+ + +

+ +

Figure: Slider component

Slider component

+ +

Figure: Slider hierarchy

Slider hierarchy

+ +

The slider component is a draggable bar that is used to select a value within a certain range.

+ +

+ +

The following example shows how to create a slider object.

+Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+

+ +

+ +

A slider has the following styles:

default
center_point

+ +

The following example sets the style to center_point.

+elm_object_style_set(slider, "center_point");
+

+ +

With this style, the slider 0 point is in the middle of the UI component.

+ +

+ +

The orientation is set with the elm_slider_horizontal_set() function, and it is inverted the same way as the progressbar component. In the following example it is set to vertical and inverted.

+elm_slider_horizontal_set(slider, EINA_FALSE);
+elm_slider_inverted_set(slider, EINA_TRUE);
+

+ +

The slider can contain icons (icon and end partnames), a label, a unit label, and an indicator label.

+Evas_Object *icon1, *icon2;
+
+// Set the icons 
+elm_object_part_content_set(slider, "icon", icon1);
+elm_object_part_content_set(slider, "end", icon2);
+
+// Set the label 
+elm_object_part_text_set(slider, "default", "slider label");
+
+// Set the unit format 
+elm_slider_unit_format_set(slider, "%1.2f meters");
+

+ +

Before using the slider, its minimum and maximum values are set with elm_slider_min_max_set(). The current value is set with (elm_slider_value_set()). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.

+elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+

+ +

The span of the slider represents its length horizontally or vertically. It is set with elm_slider_span_size_set() and is scaled by the object or applications scaling factor.

You can retrieve the current value of the slider anytime.

+double value = elm_slider_value_get(slider);
+

+ +

By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.

+// Get the current state of the indicator 
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior 
+elm_slider_indicator_show_set(slider, !enlarge);
+

+ +

+ +

This UI component emits the following signals:

changed: The user changes the slider value.
slider,drag,start: Dragging the slider indicator around starts.
slider,drag,stop: Dragging the slider indicator around stops.
delay,changed: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.

+ +

For all these signals, event_info is NULL.

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

+{
+   evas_object_smart_callback_add(slider, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the slider value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The slider has changed\n");
+}
+

+ +

+ + +

Figure: Spinner component

Spinner component

+ +

Figure: Spinner hierarchy

Spinner hierarchy

+ +

The spinner component increases or decreases a numeric value with the arrow buttons.

+ +

This UI component inherits from the layout component, so all functions concerning the layout component are used on the spinner component.

+ +

The following example shows how to create a spinner object.

+ +

+Evas_Object *spin, *parent;
+
+spin = elm_spinner_add(parent);
+

+ +

+ +

The label format is set to a different value:

+elm_spinner_label_format_set(spin, "%1.2f meters");
+

+ +

You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:

+elm_spinner_step_set(spin, 2.0);
+

The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.

+elm_spinner_wrap_set(spin, EINA_TRUE);
+

+ +

You can set the minimum and maximum values of the spinner.

+elm_spinner_min_max_set(spin, -25.0, 100.0);
+

+ +

The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.

+elm_object_style_set(spin, "vertical");
+elm_spinner_interval_set(spin, 0.1);
+

+ +

If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.

Evas_Object *spin2 = elm_spinner_add(parent);
+elm_spinner_min_max_set(spin2, 1, 3);
+elm_spinner_special_value_add(spin2, 1, "One");
+elm_spinner_special_value_add(spin2, 2, "Two");
+elm_spinner_special_value_add(spin2, 3, "Three");
+

+ +

+ +

This UI component emits the following signals:

changed: The spinner value changes.
delay,changed: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.

+ +

The following example shows how to register a callback on the delay,changed signal.

+ +

+{
+   evas_object_smart_callback_add(spin, "delay,changed", delay_changed_cb, data);
+}
+
+// Callback function for the "delay,changed" signal
+// This callback is called a short time after the spinner value changes
+void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The spinner value has changed\n");
+}
+

+ +

+ +

Figure: Toolbar component

toolbar component

+ +

Figure: Toolbar hierarchy

Toolbar hierarchy

+ + +

This UI component is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.

+ +

+ +

Use the following function to create a toolbar.

+Evas_Object *toolbar, *parent;
+
+toolbar = elm_toolbar_add(parent);
+

+ +

The toolbar has the following styles:

default
tabbar
tabbar_with_title
navigationbar

The following example sets the style to navigationbar.

+elm_object_style_set(toolbar, "navigationbar");
+

+ +

The toolbar displays its items in one of the following options.

ELM_TOOLBAR_SHRINK_NONE: The toolbar sets a minimum size to its items so that all of them fit without scrolling.
ELM_TOOLBAR_SHRINK_HIDE: The toolbar does not scroll or show the items that do not fit in.
ELM_TOOLBAR_SHRINK_SCROLL: The toolbar scrolls to show the items that do not fit in.
ELM_TOOLBAR_SHRINK_MENU: The toolbar creates a button to popup hidden items.

+ +

Here the toolbar is set to ELM_TOOLBAR_SHRINK_NONE.

+elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);
+

By default, the toolbar displays items homogeneously. Items with long labels occupy a lot of space. To avoid that, you can disable the homogeneous mode.

+elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);
+

+ +

The following example shows how to add two items and choose the associated icon, label, and function to call when the item is clicked.

+{
+   Elm_Object_Item *home_it, *help_it;
+
+   home_it = elm_toolbar_item_append(toolbar, "home", "Home",
+                                    _home_item_pressed_cb, NULL);
+   help_it = elm_toolbar_item_append(toolbar, "help", "Help",
+                                    _help_item_pressed_cb, NULL);
+}
+
+static void
+_home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Home item clicked \n");
+}
+
+static void
+_help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Help item clicked \n");
+}
+

+ +

An item can be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.

+elm_object_item_disabled_set(help_it, EINA_TRUE);
+

+ +

Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. The following example shows how to create two states to the help item with the same icon but two different labels.

+elm_toolbar_item_state_add(help_it, "help", "Help state 1",
+                           _help_item_pressed_cb, NULL);
+elm_toolbar_item_state_add(help_it, "help", "Help state 2",
+                           _help_item_pressed_cb, NULL);
+

It is possible to cycle through the states of the help item by using the following code.

+elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
+

+ +

This UI component emits the following signals:

clicked: The user clicks on a toolbar item, which is selected. event_info is an object of the type Elm_Toolbar_Item.
clicked,double: The user double-clicks on a toolbar item. event_info is an object of the type Elm_Toolbar_Item.
longpressed: The toolbar is pressed for a certain amount of time. event_info is an object of the type Elm_Toolbar_Item.
language,changed: The program language changes.
item,focused: The item is highlighted. event_info is an object of the type Elm_Toolbar_Item.
item,unfocused: The highlight is removed from the item. event_info is an object of the type Elm_Toolbar_Item.
scroll: The toolbar scrolls. event_info is NULL.
scroll,anim,start: The toolbar scrolling animation starts. event_info is NULL.
scroll,anim,stop: The toolbar scrolling animation stops. event_info is NULL.
scroll,drag,start: The user starts dragging the toolbar. event_info is NULL.
scroll,drag,stop: The user stops dragging the toolbar. event_info is NULL.

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

+{
+   evas_object_smart_callback_add(toolbar, "clicked", clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when a toolbar item is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Elm_Toolbar_Item * item = event_info;
+
+   dlog_print(DLOG_INFO, LOG_TAG, "Item clicked\n");
+}
+

+ + + +

The tooltip component is a smart object that shows a content in a frame when mouse hovers a parent object. The UI component provides tips or information about the parent object.

+ +

The tooltip component cannot be created with the elm_tooltip_add() function. This component is already contained in a parent component when it is created. You can only activate or disable it.

+ +

To activate the tooltip on a parent object, you can set a tooltip text to the parent object.

+Evas_Object *parent;
+
+elm_object_tooltip_text_set(parent, "The tooltip text";
+

You can also set a content to the parent object.

+{
+   elm_object_tooltip_content_cb_set(parent, tooltip_content_cb, NULL, tooltip_content_del_cb);
+}
+
+Evas_Object*
+tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
+{
+   // Create the tooltip content 
+}
+
+void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   // Destroy the tooltip content 
+}
+

+ +

When passing content to the tooltip, the tooltip_content_cb function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an Evas_Object.

When the tooltip disappears, the tooltip_content_del_cb function is called. This function is in charge of deleting the previously allocated Evas_Object.

Once set, the tooltip can be manually hidden or shown.

+ +

+elm_object_tooltip_hide(parent);
+elm_object_tooltip_show(parent);
+

+ +

The tooltip can be removed from the parent object when it is not needed.

+elm_object_tooltip_unset(parent);
+

+ + + + + + + + + + +

Note
When content is set into the tooltip object, unsetting it calls the callback provided as del_cb to notify that the tooltip cannot be used any longer.

+ +

A tooltip object is not a UI component, so it does not emit signals. There are no registered callbacks for it.

+ + +

+ +

Figure: Win hierarchy

Win hierarchy

+ + +

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

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

+ +

+ +

Create a new window and change the title.

+Evas_Object *window;
+
+// Create a window 
+window = elm_win_add(NULL, "main", ELM_WIN_BASIC);
+
+// Change the window title 
+elm_win_title_set(window, "Example Window");
+

+ +

The first element of elm_win_add() is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is NULL, meaning there is no parent. main is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).

+ +

Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with elm_bg_add(). The window created is of the type ELM_WIN_BASIC.

+ +

+Evas_Object *window;
+
+// Create a standard window 
+window = elm_win_util_standard_add("main", "Example Window");
+

+ +

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

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

The autodel is set using the following call:

+elm_win_autodel_set(window, EINA_TRUE);
+

+ +

To close the window, use the evas_object_del() function. The window is destroyed and the signal delete,request is sent.

+ +

The window component emits the following signals:

focus,in: The window received focus.
focus,out: The window lost focus.
moved: The window that holds the canvas is moved.
withdrawn: The window is managed normally but is removed from the view.
iconified: The window is minimized (for example, into an icon or a taskbar).
normal: The window is in the normal state (not withdrawn or iconified).
stick: The window shows on all desktops.
unstick: The window shows only on one desktop.
fullscreen: The window is fullscreen.
unfullscreen: The window stops being fullscreen.
maximized: The window is maximized.
unmaximized: The window is diminished.
wm,rotation,changed: The rotation of the window is changed by the Windows Manager.
ioerr: A low-level I/O error occurred in the display system.

With all these signals, event_info is NULL.

The following example registers a callback function called on the fullscreen signal.

+{
+   evas_object_smart_callback_add(window, "fullscreen", fullscreen_cb, data);
+}
+
+// Callback function for the "fullscreen" signal
+// This callback is called when the window becomes fullscreen
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Window fullscreen\n");
+}
+

+ + + + + +

+ +

+ + + + + + + + diff --git a/org.tizen.guides/html/native/ui/components_wn.htm b/org.tizen.guides/html/native/ui/components_wn.htm new file mode 100644 index 0000000..8d8feb6 --- /dev/null +++ b/org.tizen.guides/html/native/ui/components_wn.htm @@ -0,0 +1,2473 @@ + + + + + + + + + + + + + + Components + + + + + + +

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

+ +

Figure: Red color background

Red color background

+ +

Figure: Background hierarchy

Background hierarchy

+ +

+ +

A background is created with the elm_bg_add() function.

+ +

+Evas_Object *bg, *parent;
+
+// Create a background
+bg = elm_bg_add(parent);
+

+ +

+ +

You can set the color of the background with the elm_bg_color_set() function. The following example sets the background color to red.

+ +

+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+

+ +

+ +

ELM_BG_OPTION_CENTER: center the background image.
ELM_BG_OPTION_SCALE: scale the background image, retaining aspect ratio.
ELM_BG_OPTION_STRETCH: stretch the background image to fill the UI component's area.
ELM_BG_OPTION_TILE: tile the background image at its original size.

+ +

+Evas_Object *bg;
+
+// Set a file on the disk as a background image
+elm_bg_file_set(bg, "/path/to/the/image", NULL);
+// Set an Edje group as a background image
+elm_bg_file_set(bg, "/path/to/the/edje", "edje_group");
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+

+ +

+ +

An overlay can be set using the overlay part name.

+ +

+elm_object_part_content_set(bg, "overlay", over);
+

+ +

Here, the overlay is an Edje object that is displayed on top of the current background object.

+ + +

+ +

Figure: Button component

Button component

+ +

Figure: Button hierarchy

Button hierarchy

+ +

The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.

+ +

+ +

Create a button.

+Evas_Object *button, *parent;
+
+// Create a button
+button = elm_button_add(parent);

+ +

+ +

The icon can be updated with elm_object_part_content_set() function with the icon part name.

+ +

+Evas_Object *ic;
+ic = elm_icon_add(button);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(button, "icon", ic);

+ +

+ +

The label can be modified using the elm_object_text_set() function.

+ +

+elm_object_text_set(button, "Click me!");
+

+ +

+ +

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

default
green
orange
red
nextdepth

Tizen supports the following styles for Gear O:

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
+elm_object_style_set(button, "nextdepth");
+
+// Example for Gear O
+elm_object_style_set(button, "bottom");
+

+ +

+ +

The button emits the following signals:

+ +

clicked: The user clicked the button (press/release).
repeated: The user pressed the button without releasing it.
pressed: The user pressed the button.
unpressed: The user released the button after pressing it.

+ +

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

+ +

This is an example to register and define a callback function called by the clicked signal.

+{
+   evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
+}
+// Callback function for the "clicked" signal
+// This callback is called when the button is clicked by the user
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
+}
+

+ +

+ +

elm_button_autorepeat_initial_timeout_set(): to set the initial timeout before the autorepeat event is generated
elm_button_autorepeat_gap_timeout_set(): to set the interval between two autorepeat events

+ +

Disable the autorepeat feature.

+elm_button_autorepeat_set(button, EINA_FALSE);
+

+ +

Enable the autorepeat feature.

+elm_button_autorepeat_set(button, EINA_TRUE);
+

+ +

Set the initial timeout to five seconds.

+elm_button_autorepeat_initial_timeout_set(button, 5.0);
+

+ +

Set the gap between two signals to 0.5 seconds.

+elm_button_autorepeat_gap_timeout_set(button, 0.5);
+

+ + +

+ +

Figure: Check component

Check component

+ +

Figure: Check hierarchy

Check hierarchy

+ +

The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.

+ +

This UI component inherits from the layout component. All layout functions can be used on the check component.

+ +

+ +

The following example shows how to create a check component.

+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+

+ +

+ +

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

The following styles are available for wearable core controls:

default
on and off

The following styles are available for Gear O:

default
small
on and off

+ +

The following example sets the on and off style on our check object.

+elm_object_style_set(check, "on and off");
+

+ +

To get the current style, use the elm_object_style_get() function.

+char *style = elm_object_style_get(check);
+

+ +

+ +

After having created a check object, it is possible to set its boolean value to EINA_TRUE.

+elm_check_state_set(check, EINA_TRUE);
+

+ +

You can also retrieve the current value of the check object.

+Eina_Bool value = elm_check_state_get(check);
+

+ +

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

+// Create a Home icon 
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "home");
+
+// Set it to the check object 
+elm_object_part_content_set(check, "icon", icon);
+

+ +

The get functions of the elementary object API can be used to retrieve the content set to the check object.

+// Get the content set in the icon part 
+Evas_Object *icon = elm_object_part_content_get(check, "icon");
+

+ +

+ +

When the value is changed by the user, the changed signal is emitted. The event_info parameter is NULL.

+ +

The following example shows how to register a callback on this signal.

+ +

+{
+   evas_object_smart_callback_add(check, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+

+ +

+ +

Figure: Context popup component

Context popup component

+ +

Figure: Context popup hierarchy

Context popup hierarchy

+ + +

Ctxpopup is a contextual popup that can show a list of items.

+ +

+ +

+Evas_Object *ctxpopup, *parent;
+
+// Create a ctxpopup 
+ctxpopup = elm_ctxpopup_add(parent);
+

+ +

+ +

The following styles are available for wearable core controls:

default

The following styles are available for Gear O:

select_mode
select_mode/top, select_mode/bottom (These two styles can be used as a pair.)

+ + +

The following example shows how to set the default style.

+elm_object_style_set(ctxpopup, "default");
+

+ +

+ +

The context popup orientation can be set with elm_ctxpopup_horizontal_set(). Here it is set to horizontal.

+elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+

+ +

Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden.

+elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+

+ +

+ +

The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the Test label and no icon.

+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb, 
+                  NULL);
+

+ +

The _ctxpopup_item_cb() callback is called when the item is clicked. The following example shows how to write the definition of this callback.

+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
+}
+

+ +

After that the item label is set to New label.

elm_object_item_part_text_set(it, "default", "New label");
+

+ +

And its icon is modified to the standard home icon.

+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, "home");
+
+elm_object_item_part_content_set(it, "icon", home_icon);
+

+ +

+ +

The context popup emits the dismissed signal when it is dismissed. You can register a callback to this signal. The event_info parameter is NULL.

+ +

+{
+   evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
+}
+
+// Callback function for the "dismissed" signal
+// This callback is called when the ctxpopup is dismissed
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
+}
+

+ +

+ +

Figure: Datetime selection

Datetime selection

+ +

Figure: Datetime hierarchy

Datetime hierarchy

+ +

The datetime component displays and adds date and time values.

+ +

+ +

The UI component is created with elm_datetime_add().

The following fields can be controlled:

ELM_DATETIME_YEAR: the year field
ELM_DATETIME_MONTH: the month field
ELM_DATETIME_DATE: the date field
ELM_DATETIME_HOUR: the hour field
ELM_DATETIME_MINUTE: the minute field
ELM_DATETIME_AMPM: the AM/PM field

+ +

+ +

The following styles are available:

datepicker_layout
timepicker_layout

+ +

The following example creates the datepicker_layout style:

+elm_object_style_set(datetime, "datepicker_layout");
+

+ +

+ +

The format of the date and time can be configured with elm_datetime_format_set() using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.

+elm_object_style_set(datetime, "timepicker_layout");
+elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M");
+

Please refer to the API documentation for a complete list of all the options available.

+ +

+ +

A callback can be registered on the changed signal to detect when the Datetime field values are changed. The event_info parameter is NULL.

+{
+   evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
+}

+ +

The language,changed signal is emitted when the system locale changes.

+ + + +

+ +

Figure: Entry component

Entry component

+ +

Figure: Entry component

Entry component

+ +

Figure: Entry hierarchy

Entry hierarchy

+ +

The entry component is a box where the user can enter text. It supports the following features:

text wrapping
multiline
scrolling
formatted markup text
password mode
filtering text
read/write from a file
theme style overrides

+ +

+ +

The entry component is created with the elm_entry_add() function, and the text inside the entry can be set with elm_entry_entry_set().

+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, "A short text.");
+

+ +

+ +

You can append text to the end of existing content.

+elm_entry_entry_append(entry, "END");
+

+ +

You can also insert text at the current cursor position.

+elm_entry_entry_insert(entry, "CURSOR");
+Eina_Bool Empty = elm_entry_is_empty(entry);
+

+ +

Call elm_entry_is_empty() to see whether the entry is empty. Here, the boolean variable Empty returns EINA_FALSE.

The user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.

+elm_entry_editable_set(entry, EINA_FALSE);
+

+ + + + + + + + + + +

Note
It is still possible to use the previous functions to modify the text of a non-editable entry.

+ +

+ +

+elm_entry_password_set(entry, EINA_TRUE);
+

+ +

+ +

The entry component has two line modes:

single line mode
multiline mode

+ +

First, set the entry in single line mode.

+ +

+elm_entry_single_line_set(entry, EINA_TRUE);
+

+ +

In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an activate event instead of adding a new line.

+ +

When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.

+ +

+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+

+ +

In multiline entries, elm_entry_line_wrap_set() provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:

ELM_WRAP_NONE: No wrap
ELM_WRAP_CHAR: Wrap between characters
ELM_WRAP_WORD: Wrap in allowed wrapping points (as defined in the unicode standard)
ELM_WRAP_MIXED: Word wrap, and if that fails, char wrap

+ +

+ +

Text selections can be made with different functions:

To select all the content of the entry component: +
```
+elm_entry_select_all(entry);
+
```
+
To deselect the current selection: +
```
+elm_entry_select_none(entry);
+
```
+
To select part of the text, use elm_entry_select_region_set(). The following code selects the first twenty characters of the entry content. +
```
+elm_entry_select_region_set(entry, 0, 20);
+
```
+

To retrieve the currently selected text in an entry: +

+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+

+ +

If the entry text is empty, elm_entry_selection_get() returns NULL.

+ +

You can copy or cut the selection to the clipboard.

+elm_entry_selection_cut(entry);
+

+ +

The selection can be pasted in the same or a different entry.

+elm_entry_selection_paste(entry);
+

+ +

+ +

To move the cursor to the beginning of the entry: +
```
+elm_entry_cursor_begin_set(entry);
+
```
+
To move the cursor to the end of the entry: +
```
+elm_entry_cursor_end_set(entry);
+
```
+

To move the cursor one line down or up: +

+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+

To move the cursor one character to the left or right: +

+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+

To set the cursor at a specific position (15th character, for example): +
```
+elm_entry_cursor_pos_set(entry, 15);
+
```
+

+ +

It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.

+elm_entry_cursor_selection_begin(entry);
+
+for (i = 0; i < 5; i++)
+{
+   elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+

+ +

+ +

Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available in the default theme:

<br>: Inserts a line break.
<ps>: Inserts a paragraph separator. This is preferred over line breaks.
<tab>: Inserts a tab.
<em>...</em>: Emphasis. Sets the oblique style for the enclosed text.
<b>...</b>: Sets the bold style for the enclosed text.
<link>...</link>: Underlines the enclosed text.
<hilight>...</hilight>: Highlights the enclosed text.

+ +

+ +

Special markups can be added within the text of the entry:

<a href = ..>...</a>: Anchors
<item size = .. vsize = .. href = ..>...</item>: Items

+ +

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

+ +

+ +

+ +

Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.

+static Elm_Entry_Filter_Limit_Size limit_size = 
+{
+   .max_char_count = 8,
+   .max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+ 
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+

+ +

+static Elm_Entry_Filter_Accept_Set accept_set = 
+{
+   .accepted = NULL,
+   .rejected = "+*-/"
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+

+ +

+ +

The entry content can be saved to a file (/tmp/test.txt, for example).

+ +

+// Set the file in which the entry text is saved. This function
+// implicitly loads the existing file content 
+elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
+

+ +

Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.

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

+ +

+ +

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

+ +

+Evas_Object *icon;
+
+ic = elm_icon_add(entry);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(entry, "end", icon);
+

+ +

+ +

The default theme allows the use of the following text parts:

elm.text - text of the entry
elm.guide - placeholder of the entry

+ +

The following example shows how to set the placeholder text of the entry to Hello World.

+elm_object_part_text_set(entry, "elm.guide", "Hello World");
+

+ +

+ +

The entry component emits the following signals:

aborted: The escape key is pressed on a single line entry.
activated: The enter key is pressed on a single line entry.
anchor,clicked: An anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,down: Mouse button is pressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,hover,opened: The anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,in: Mouse cursor is moved into an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,out: Mouse cursor is moved out of an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
anchor,up: Mouse button is unpressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
changed: The text within the entry is changed.
changed,user: The text within the entry is changed because of user interaction. event_info points to an object of the type Edje_Entry_Change_Info.
clicked: The entry is clicked (mouse press and release).
clicked,double: The entry is double clicked.
clicked,triple: The entry is triple clicked.
cursor,changed: The cursor position is changed.
cursor,changed,manual: The cursor position is changed manually.
focused: The entry receives focus. event_info points to an object of the type Elm_Focus_Info.
unfocused: The entry loses focus.
language,changed: Program language is changed.
longpressed: A mouse button is pressed and held for a couple of seconds.
maxlength,reached: A maximum length is reached.
preedit,changed: The preedit string is changed.
press: A mouse button is pressed on the entry.
redo,request: The request is redone.
selection,changed: The current selection is changed.
selection,cleared: The current selection is cleared.
selection,copy: A copy of the selected text into the clipboard is requested.
selection,cut: A cut of the selected text into the clipboard is requested.
selection,paste: A paste of the clipboard contents is requested.
selection,start: A selection is begun and no previous selection exists.
text,set,done: The whole text is set to the entry.
theme,changed: The theme is changed.
undo,request: The request is undone.

+ +

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

+ +

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

+{
+   evas_object_smart_callback_add(entry, "focused", focused_cb, data);
+}
+
+// Callback function for the "focused" signal
+// This callback is called when the entry receive the focus
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
+} 
+

+ + +

+ +

Figure: Genlist component

Genlist component

+ +

Figure: Genlist hierarchy

Genlist hierarchy

+ +

Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.

+ +

For more information, see the Genlist Tutorial.

+ +

+ +

The following item styles are available:

default
groupindex
1text
1text.1icon
2text
2text.1
1text.1icon.divider
1text.1icon.1
2text.1icon.1
multiline/1text
multiline/2text

+ +

Here are some examples of the item styles.

+ +

Figure: 1text item style

1 text item style

+ +

Figure: 1text.1icon.1 item style

1text.1icon.1 item style

+ +

Figure: 2text.1icon.1 item style

2text.1icon.1 item style

+ +

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

+ +

+ +

A genlist component is added with the elm_genlist_add() function.

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

+ +

+ +

+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc->item_style = "default";
+itc->decorate_item_style = NULL;
+itc->decorate_all_item_style = NULL;
+itc->func.text_get = _item_label_get;
+itc->func.content_get = _item_content_get;
+itc->func.state_get = _item_state_get;
+itc->func.del = _item_del;
+

+ +

The item_style, decorate_item_style, and decorate_all_item_style attributes define the names of the item style, the decorate mode item style and the decorate all item style.

+ +

text_get +
This function receives a PART parameter that is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the strdup() function) corresponding to the PART parameter. The caller is in charge of freeing the string when done.
content_get +
The PART parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return NULL, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is unrealized.
state_get +
The PART parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns EINA_FALSE for false/off or EINA_TRUE for true/on. The default is false. Genlists emit a signal to the PART parameter's theming Edje object with elm,state,xxx,active as emission and elm as source argument, when the state is true. xxx is the name of the (state) part.
del +
This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.

+ +

+ +

The previous functions take a type parameter that can be one of the following.

ELM_GENLIST_ITEM_NONE
ELM_GENLIST_ITEM_TREE
ELM_GENLIST_ITEM_GROUP

+ +

Figure: Genlist tree

Genlist tree

+ +

+ + + + + + + + + + +

Note
As a tree, the items are flattened on the list, so elm_genlist_item_parent_get() gives you the name of the parent item (even to skip them if needed).

+ +

elm_genlist_item_show() scrolls the scroller to show the desired item as visible.

elm_object_item_data_get() returns the data pointer set by the item creation functions.

+ +

+ +

+ + + + + + + + + + +

Note
Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the expanded or contracted signals.

+ +

In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).

+ +

Figure: Genlist component

Genlist component

+ +

+ +

The genlist component emits the following signals:

activated: The user has double-clicked or pressed (enter | return | spacebar) on an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
clicked,double: The user has double-clicked an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
selected: The user selects an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
unselected: The user unselects an item. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.
expanded: The item is to be expanded with elm_genlist_item_expanded_set(). This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
contracted: The item is to be contracted with elm_genlist_item_expanded_set(). This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
expand,request: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
contract,request: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
realized: The item is created as a real evas object. event_info in the callback function points at an object of the type Elm_Object_Item, that contains the activated item.
unrealized: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,start,up: The item in the list is dragged (not scrolled) up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,start,down: The item in the list is dragged (not scrolled) down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,start,left: The item in the list is dragged (not scrolled) left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,start,right: The item in the list is dragged (not scrolled) right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag,stop: The item in the list has stopped being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
drag: The item in the list is being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
longpressed: The item is pressed for a certain amount of time. The default specified time is one second. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
scroll,anim,start: The scrolling animation is started. event_info is NULL.
scroll,anim,stop: The scrolling animation is stopped. event_info is NULL.
scroll,drag,start: Dragging the content is started. event_info is NULL.
scroll,drag,stop: Dragging the content is stopped. event_info is NULL.
edge,top: The genlist is scrolled to the top edge. event_info is NULL.
edge,bottom: The genlist is scrolled to the bottom edge. event_info is NULL.
edge,left: The genlist is scrolled to the left edge. event_info is NULL.
edge,right: The genlist is scrolled to the right edge. event_info is NULL.
multi,swipe,left: The genlist is multi-touch swiped left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,swipe,right: The genlist is multi-touch swiped right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,swipe,up: The genlist is multi-touch swiped up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,swipe,down: The genlist is multi-touch swiped down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,pinch,out: The genlist is multi-touch pinched out. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
multi,pinch,in: The genlist is multi-touch pinched in. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
swipe: The genlist is swiped. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
moved: A genlist item is moved in the reorder mode. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
moved,after: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use elm_genlist_item_prev_get(). This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
moved,before: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use elm_genlist_item_next_get(). This signal is called along with the moved signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
language,changed The program's language is changed. event_info is NULL.
tree,effect,finished: A genlist tree effect is finished. event_info is NULL.

+ + +

+ +

Figure: GLView example

GLView example

+ +

Figure: GLView hierarchy

GLView hierarchy

+ + +

The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see OpenGL ES.

+ +

+ +

Create a GLView component with the elm_glview_add() function.

+Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+

+ +

In this example, the size of the GLView is set to 200x200 pixels.

+elm_glview_size_set(glview, 200, 200);
+

+ +

+ +

You can configure the GLView rendering mode by activating the following rendering modes:

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

+ +

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

+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+

+ +

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

+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+

+ +

The following example shows how to set the GLView rendering policy.

+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+

+ +

elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+

+ +

elm_glview_init_func_set() registers an init callback that is called at the GLView object creation.
elm_glview_del_func_set() registers a del function that is called when the GLView object is deleted.
elm_glview_resize_func_set() registers the resize function that is called during the rendering loop when the GLView object is resized.
elm_glview_render_func_set() registers the render function that is called when the GLView object must be redrawn.

+ +

+ +

The GLView component emits the following signals:

focused: The GlView component is focused. The event_info parameter points at an object of the type Elm_Focus_Info.
unfocused: The GLView object is unfocused.

+ +

To register a callback:

+{
+      evas_object_smart_callback_add(glview, "focused", focused_cb, data);
+}
+
+// Callback function for the "focused" signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+      Elm_Focus_Info *fi = event_info;
+
+      dlog_print(DLOG_INFO, LOG_TAG, "GLView is focused\n");
+}
+

+ +

+ +

Figure: Icon hierarchy

Icon hierarchy

+ +

The icon component inherits from the image component. It is used to display images in an icon context.

+ +

+ +

You can create an icon and set it as a freedesktop.org Home standard icon.

+ +

+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "Home");
+

+ +

+ +

You can change the image by using an image in the filesystem (for example, /tmp/Home.png).

+elm_image_file_set(icon, "/tmp/Home.png", NULL);
+

+ +

You can also use a group in an Edje file (for example, /tmp/Home.edj).

+elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
+

+ +

A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.

+ +

+elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
+

+ +

This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.

+ +

+ +

The icon component emits the following signals:

thumb,done: elm_icon_thumb_set() is completed with success.
thumb,error: elm_icon_thumb_set() fails.

+ +

In both cases, event_info is NULL.

+ + +

+ +

Figure: Image component

Image component

+ +

Figure: Image hierarchy

Image hierarchy

+ +

The image component can load and display an image from a disk file or a memory region.

+ +

+ +

This object is created with elm_image_add().

+ +

+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+

+ +

+ +

Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.

+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+

+ +

When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.

+elm_image_smooth_set(image, EINA_TRUE);
+

+ +

Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.

+elm_image_preload_disabled_set(image, EINA_TRUE);
+

+ +

The image can be rotated or flipped. Here the image is rotated 180 degrees.

+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+

+ +

The following orientations are available:

ELM_IMAGE_ORIENT_0: No orientation change
ELM_IMAGE_ROTATE_90: Rotate the image 90 degrees clockwise
ELM_IMAGE_ROTATE_180: Rotate the image 180 degrees clockwise
ELM_IMAGE_ROTATE_270: Rotate the image 90 degrees counter-clockwise
ELM_IMAGE_FLIP_HORIZONTAL: Flip the image horizontally
ELM_IMAGE_FLIP_VERTICAL: Flip the image vertically
ELM_IMAGE_FLIP_TRANSPOSE: Flip the image along the bottom-left to top-right line
ELM_IMAGE_FLIP_TRANSVERSE: Flip the image along the top-left to bottom-right line

+ +

If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object's area.

+// Tell the image to keep original aspect ratio 
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object 
+elm_image_fill_outside_set(image, EINA_TRUE);
+

+ +

In this configuration, part of the image can go outside the object. If elm_image_fill_outside_set is set to EINA_FALSE, the image stays inside the limits of the parent object.

+ +

+ +

The image component emits the following signals:

drop: The user drops an image typed object onto the object in question - the event info argument is the path to that image file
clicked: The user clicks the image. event_info is NULL.

+ +

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

+{
+   evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when the image is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
+}
+

+ +

+ +

Figure: Index component

Index component

+ +

Figure: Index hierarchy

Index hierarchy

+ +

+ +

Call the elm_index_add() function to create a new index component.

+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+

+ +

+ +

The following example shows how to add the listitem object at the letter A, calling the smart callback it_select_cb() when this item is selected.

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

+ +

The following example shows how to add item objects, calling the smart callback it_select_cb() when the item is selected.

+Elm_Object_Item *it[5];
+for (i = 0; i < 5; ++i)
+{
+   it[i] = elm_index_item_append(index, NULL, it_select_cb, (void *) i);
+}

+ +

The following example shows how to define the smart callback.

+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
+}
+

+ +

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

+ + +

+ +

The index component emits the following signals:

changed: The selected index item changes. event_info is the selected item's data pointer.
delay,changed: The selected index item changes, but after a small idling period. event_info is the selected item's data pointer.
selected: The user releases a mouse button and selects an item. event_info is the selected item's data pointer.
level,up: The user moves a finger from the first level to the second level.
level,down: The user moves a finger from the second level to the first level.

+ +

+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Elm_Object_Item *lit = event_info;
+
+   // Code that does the desired action
+}
+

+ +

After that, the callback to the selected signal is registered.

+evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
+

+ + +

+ +

Figure: Label component

Label component

+ +

Figure: Label hierarchy

Label hierarchy

+ +

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

+ +

+ +

To add a label and set the text in it, use the following functions.

+ +

+Evas_Object *label = elm_label_add(win);
+
+elm_object_text_set(label, "Some long text for our label, that is not so long");
+

+ +

+ +

Label displays the text with several predefined styles.

default: No animation
marker: The text is centered and bolded.
slide_long: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).
slide_roll: The text appears from the left of the label and slides to the right to show the overflow, and then appears from the right of the label again.
slide_short: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.
slide_bounce: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.

+ +

Here the style is set to slide_roll.

+ +

+elm_object_style_set(label, "slide_roll");
+

+ +

+ +

The duration of the animation and the slide mode can be set with the following functions.

+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+

+ +

Use the following function to modify the style.

+elm_object_style_set(label, "slide_bounce");
+

+ +

+ +

This UI component emits the following signals:

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

+ +

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

+ +

+{
+   evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
+}
+
+// Callback function for the "slide,end" signal
+// This callback is called when the label slide reaches the end
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
+}
+

+ +

+ +

Figure: List component

List component

+ +

Figure: List hierarchy

List hierarchy

+ + +

This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option.

+ +

The list items can contain a text and two contents (start and end). These are set with the elm_object_item_*() functions.

+ +

+ +

+Evas_Object *list, *parent;
+
+// Create a list 
+list = elm_list_add(parent);
+

+ +

+ +

+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+// Enable bounce effect when the list reaches the upper and lower limits 
+elm_scroller_bounce_set(list, EINA_FALSE, EINA_TRUE);
+

+ +

The elm_list_multi_select_set() function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to selected.

+ +

+Evas_Object *list;
+
+// Activate multi selection 
+elm_list_multi_select_set(list, EINA_FALSE);
+

+ +

+ +

+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected 
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+   Eina_Bool selected = elm_list_item_selected_get(list_it);
+   dlog_print(DLOG_INFO, LOG_TAG, "item is %s\n", selected? "selected": "unselected");
+}
+
+for (i = 0; i < 10; i++)
+{
+   Evas_Object *ic;
+   char tmp[8];
+   snprintf(tmp, sizeof(tmp), "Item %02d", i);
+   // Create an icon 
+   ic = elm_icon_add(win);
+   // Set the file to the icon file 
+   elm_image_file_set(ic, "path/to/file", NULL);
+   // Add item to the list 
+   elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+

+ +

+ +

+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item 
+it = elm_list_selected_item_get(list);
+if (!it)
+   return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file 
+elm_image_file_set(ic, "path/to/file", NULL);
+// Change the first icon 
+elm_object_item_part_content_set(it, "start", ic);
+// Change the second icon 
+elm_object_item_part_content_set(it, "end", ic);
+// Change the label 
+elm_object_item_text_set(it, "I've been selected !");
+

+ +

+ +

+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item 
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+   elm_list_item_selected_set(it, EINA_FALSE);
+

+ +

+ +

To find out if an item is selected, call elm_list_item_selected_get. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.

+ +

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

+ +

The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen.

+ +

+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+

+ +

+ +

The list emits the following signals:

activated: The user double-clicks or presses (enter | return | spacebar) on an item. The event_info parameter of the callback function contains a pointer to the item activated.
clicked,double: The user double-clicks an item. The event_info parameter of the callback function contains a pointer to the item activated.
selected: The user selects an item. The event_info parameter of the callback function contains a pointer to the item activated.
unselected: The user unselects an item. The event_info parameter of the callback function contains a pointer to the item activated.
longpressed: The user long-presses an item. The event_info parameter of the callback function contains a pointer to the item activated.
edge,top: The list is scrolled to the top edge.
edge,bottom: The list is scrolled to the bottom edge.
edge,left: The list is scrolled to the left edge.
edge,right: The list is scrolled to the right edge.
highlighted: The user highlights an item on the list. The event_info parameter of the callback function contains a pointer to the item activated.
unhighlighted: The user unhighlights an item in the list. The event_info parameter of the callback function contains a pointer to the item activated.

+ +

+{
+   Evas_Object *list;
+
+   evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
+{
+   elm_Object_Item *it = event_info;
+   elm_list_selected_item_set(it,  EINA_FALSE);
+}
+

+ + +

+ +

Figure: Map hierarchy

Map hierarchy

+ +

The map component displays a geographic map. The default map data are provided by the OpenStreetMap project (http://www.openstreetmap.org/). Custom providers can also be added.

+ +

This component supports:

Zooming
Scrolling
Markers with content to be displayed when the user clicks over them
Group of markers
Routes

+ +

The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.

+ +

+ +

Once created with the elm_map_add() function, zoom level x12 can be set.

+ +

+Evas_Object *map, *parent;
+
+map = elm_map_add(parent);
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
+

+ +

+ +

If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.

+elm_map_region_show(map, 2.2, 48.8);
+

+ +

This shows the desired coordinates. The location can also be shown with a bring-in animation.

+elm_map_region_bring_in(map, 2.2, 48.8);
+

+ +

The map is rotated 90 degrees around the current position.

+elm_map_rotate_set(map, 90, 2.2, 48.8);
+

+ +

+ +

Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.

+ +

+ +

Set an icon ("Home" icon) to the forest class. This icon is displayed in place of the forest class on the map.

+Evas_Object *icon;
+Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
+
+// Set min zoom level at which class is displayed
+elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
+
+// Create a Home icon object and set it to the forest class 
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "home");
+elm_map_overlay_icon_set(forest_class, icon);
+

+ +

+ +

+ + + + + + + + + + +

Note
Do not use the same icon object for two different overlays. Create a new icon object each time you need one.

+ +

+Elm_Map_Overlay *ovl;
+const char* data_meudon = "Meudon forest";
+const char* data_fausses = "Fausse forest";
+
+// Add an overlay
+ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "stop");
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &data_meudon);
+
+// Add the new ovl object to the forest class 
+elm_map_overlay_class_append(forest_class, ovl);
+
+// Add another overlay next to the first one 
+ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "stop");
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &data_fausses);
+elm_map_overlay_class_append(forest_class, ovl);
+

+ +

If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.

+elm_map_overlay_class_zoom_max_set(forest_class, 8);
+

+ +

In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.

+ +

+ +

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

+ +

+// Add an overlay bubble object 
+Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
+
+// Set it to follow a specific overlay (the last created one here) 
+elm_map_overlay_bubble_follow(bubble, ovl);
+

+ +

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

+ +

Content is added to the bubble with the elm_map_overlay_bubble_content_append() function.

+ +

+ +

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

+Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
+

+ +

You can also add a scale at the 200x0 coordinate (in pixels).

+Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
+

+ +

You can also draw a line, a polygon, or a route. For a full description of these functions, see the Map API.

+ +

+ +

The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.

+ +

+Elm_Map_Route *route = elm_map_route_add(map,
+         ELM_MAP_ROUTE_TYPE_BICYCLE,
+         ELM_MAP_ROUTE_METHOD_FASTEST,
+         2.20718, 48.79759,
+         2.1699, 48.8189,
+         NULL, NULL);
+
+// Add a callback to when the route has been calculated and loaded 
+evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
+

+ +

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

+static void
+_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
+{
+   Elm_Map_Route *route = data;
+
+   Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
+   elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
+}
+

+ +

+ +

The map component emits the following callbacks:

clicked: The user has clicked the map without dragging around.
clicked,double: The user has double-clicked the map.
press: The user has pressed down on the map.
longpressed: The user has pressed down on the map for a long time without dragging around.
scroll: The content is scrolled (moved).
scroll,drag,start: Dragging the contents around starts.
scroll,drag,stop: Dragging the contents around stops.
scroll,anim,start: Scrolling animation starts.
scroll,anim,stop: Scrolling animation stops.
zoom,start: Zoom animation starts.
zoom,stop: Zoom animation stops.
zoom,change: The zoom is changed when using an auto zoom mode.
tile,load: A map tile image load begins.
tile,loaded: A map tile image load ends.
tile,loaded,fail: A map tile image load fails.
route,load: Route request begins.
route,loaded: Route request ends.
route,loaded,fail: Route request fails.
name,load: Name request begins.
name,loaded: Name request ends.
name,loaded,fail: Name request fails.
overlay,clicked: An overlay is clicked.
loaded: The map is loaded.

+ + +

+ +

Figure: Notify hierarchy

Notify hierarchy

+ +

The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.

+ +

+ +

The following example shows how to create a notify object.

+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+

+ +

+ +

Create a label and add it to the notify object.

+Evas_Object *content;
+
+// Create the label and set some text to it 
+content = elm_label_add(parent);
+
+elm_object_text_set(content, "A label text");
+evas_object_show(content);
+
+// Add the label object to the notify component
+elm_object_content_set(notify, content);
+

+ +

In the following example the notify object is shown on the bottom left corner of the parent object.

+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+

+ +

Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.

+elm_notify_timeout_set(notify, 5.0);
+

+ +

+ +

The notify component emits the following signals:

timeout: The timeout count ends and the notify component is hidden
block,clicked: The user clicks outside of the notify component

+ +

For both these signals event_info is NULL.

+ +

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

+ +

+{
+   evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
+}
+
+// Callback function for the "timeout" signal
+// The timeout expires and the notify object is hidden
+ 
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Notify is hidden\n");
+}
+

+ +

+ +

Figure: Plug hierarchy

Plug hierarchy

+ +

The plug component shows an Evas_Object created by an other process. It can be used anywhere the same way as any other elementary UI component.

+ +

+ +

The following example shows how to create a plug.

+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+

+ +

+ +

The socket image provides the service where to connect the plug object with the elm_plug_connect() function. In this process, use the service name and number set by the socket you want to connect to.

+ +

As an example, connect to a service named plug_test on the number 0.

+ +

+elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
+

+ +

The Evas_Object corresponding to the distant image is retrieved with the elm_plug_image_object_get() function.

+ +

+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+

+ + + + + + + + + + +

Note
The socket to connect to must be started with the elm_win_socket_listen() function in the other process on the remote window object (it is called remote_win here).

+ +

+// Create a remote window in the other process 
+Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
+                                  ELM_WIN_SOCKET_IMAGE);
+// Create a socket named "plug_test" and listen to it
+elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
+

+ + + +

Figure: Popup component

Popup component

+ +

Figure: Popup hierarchy

Popup hierarchy

+ + +

The popup component shows a popup area that can contain:

a title area (optional)
a content area
an action area (optional)

+ +

The optional title area can contain an icon and text, the action area can contain up to three buttons.

+ +

+ +

The following example shows how to create a popup component.

+Evas_Object *popup, *parent;
+
+// Create a popup 
+popup = elm_popup_add(parent);
+

+ +

+ +

The following item styles are available for wearable core controls:

popup
toast

The following item styles are available for Gear O:

circle
toast/circle

The following layout styles are available for Gear O:

content/circle
content/circle/buttons1
content/circle/buttons2

+ +

The following example sets the style of the popup to toast.

+elm_object_style_set(popup, "toast");
+

+ + +

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

+ +

+elm_object_part_text_set(popup, "title,text", "Test popup");
+

Set the content of the popup. The content can be simple text.

+elm_object_text_set(popup, "simple text");
+

The content can also be an Evas object.

+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+

Set the buttons of the action area by creating an OK button and a Cancel button.

+Evas_Object *button1, *button2;
+
+// Create the two buttons 
+button1 = elm_button_add(popup);
+elm_object_style_set(button1, "popup");
+evas_object_size_hint_weight_set(button1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button1, "Cancel");
+
+button2 = elm_button_add(popup)
+elm_object_style_set(button2, "popup");
+evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button2, "OK");
+
+evas_object_show(popup);
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, "button1", button1);
+elm_object_part_content_set(popup, "button2", button2);
+

+ +

Set the circle style and the layout of the popup.

+// Setting the style
+elm_object_style_set(popup, "circle");
+
+// Setting the layout
+layout = elm_layout_add(popup);
+elm_layout_theme_set(layout, "layout", "popup", "content/circle/buttons2");
+

+ +

To configure the title area, set the title text to Test popup using the partname elm.text.title.

+// Setting the title text 
+elm_object_part_text_set(layout, "elm.text.title", "Text popup");
+

+ +

Set the content of the popup. The content can be simple text.

elm_object_part_text_set(layout, "elm.text.content", "Test popup");
+

+ +

The content of the popup can also be an Evas object.

+Evas_Object *content;
+
+elm_object_content_set(layout, content);
+

Set the popup content.

+elm_object_content_set(popup, layout);
+

+ +

Set the buttons of the action area by creating an OK button, a Cancel button, and a Help button.

+ +

+Evas_Object *button1, *button2, *icon;
+
+// Create the 2 buttons 
+
+button1 = elm_button_add(popup);
+elm_object_style_set(button1, "popup/circle/left");
+icon = elm_image_add(button1);
+elm_image_file_set(icon, ICON_DIR"/b_option_list_icon_share.png", NULL);
+evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_part_content_set(button1, "elm.swallow.content", icon);
+evas_object_show(icon);
+
+button2 = elm_button_add(popup);
+elm_object_style_set(button2, "popup/circle/right");
+icon = elm_image_add(button2);
+elm_image_file_set(icon, ICON_DIR"/b_option_list_icon_delete.png", NULL);
+evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_part_content_set(button2, "elm.swallow.content", icon);
+evas_object_show(icon);
+
+// Set the buttons to the action area 
+elm_object_part_content_set(popup, "button1", button1);
+elm_object_part_content_set(popup, "button2", button2);
+
+

+ +

The popup emits the following signals:

timeout: The popup is closed as a result of timeout.
block,clicked: The user clicks on the Blocked Event area.

+ +

elm_popup_timeout_set() is used to hide the popup after a certain time. In the following example the timeout is set to five seconds.

elm_popup_timeout_set(popup, 5.0);

+ +

When the timeout expires, the timeout signal is sent to the user.

+{
+   evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
+}
+

+ +

The visible region of the popup is surrounded by a translucent region called Blocked Event area. By clicking on this area, the signal block,clicked is sent to the application.

+ + +

+ +

Figure: Progressbar component

Progressbar component

+ +

Figure: Progressbar hierarchy

Progressbar hierarchy

+ + +

+ +

This UI component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.

The following example shows how to create a progressbar component.

+Evas_Object *pb = elm_progressbar_add(win);
+

+ +

+ +

The progressbar has several styles for wearable core controls:

default
pending_list
process
process/groupindex
process/popup/small

The progressbar has several styles for Gear O:

process
process/small

+ +

Set the style of the progressbar to pending_list.

+ +

+elm_object_style_set(pb, "pending_list");
+

+ +

+ +

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);
+elm_progressbar_pulse(pb, EINA_TRUE);
+

+ +

The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.

elm_progressbar_inverted_set(pb, EINA_TRUE);

+ +

The progressbar emits the changed signal when the progress value changes. The value is changed with the elm_progressbar_value_set() function. Here the pb progress value is set to 20%.

elm_progressbar_value_set(pb, 0.2);

+ +

It is possible to read the current value.

double value = elm_progressbar_value_get(pb);

+ +

The progressbar emits the changed signal when the progress value changes. The value is changed with the elm_progressbar_value_set() function. Here the pb progress value is set to 20%.

+ +

+elm_progressbar_value_set(pb, 0.2);
+

The current value can be read.

+double value = elm_progressbar_value_get(pb);
+

+ + +

+ +

The changed signal is the only signal specifically emitted by the progressbar component.

The following example shows how to register a callback on this signal.

+ +

+{
+   evas_object_smart_callback_add(pb, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the progressbar value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+

+ + +

+ +

Figure: Radio component

Radio component

+ +

Figure: Radio hierarchy

Radio hierarchy

+ +

This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected). Even though it is usually grouped with two or more other radio objects, it can also be used alone. +

The radio component inherits from the layout component. All the layout functions can be used with radio objects.

+ +

+ +

Create a radio component.

+Evas_Object *radio, *parent;
+
+// Create a radio
+radio = elm_radio_add(parent);
+

+ +

+ +

The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.

+elm_radio_state_value_set(radio, 1);
+

+ +

+ +

The following example shows how to create a group of radio objects with at least two radio components.

+ +

+// Create another radio object 
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+

+ +

Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.

+ +

elm_radio_value_set(group, 2);

+ +

You can use elm_radio_value_get() to see the currently selected radio of the group.

+ +

+ +

This UI component emits the following signals:

changed: The state of a radio is modified in a group of radio objects.

+ +

The following example shows how to register a callback on this signal.

+{
+   evas_object_smart_callback_add(radio, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+

+ +

+ +

This UI component emits the following signals:

changed: The user changes the slider value.
clicked: Radio was clicked.

+ +

The following example shows how to register a callback on this signal.

+{
+   evas_object_smart_callback_add(radio, "clicked", clicked_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "This radio was clicked\n");
+}
+

+ + +

+ +

Figure: Slider component

Slider component

+ +

Figure: Slider hierarchy

Slider hierarchy

+ +

The slider component is a draggable bar that is used to select a value within a certain range.

+ +

+ +

The following example shows how to create a slider object.

+Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+

+ +

+ +

A slider has the following styles:

default

+ +

+ +

It can contain icons (elm.swallow.icon partname), a label, a unit label and an indicator label.

+Evas_Object *icon1, *icon2;
+
+// Set the icons 
+elm_object_part_content_set(slider, "elm.swallow.icon", icon1);
+
+// Set the unit format 
+elm_slider_unit_format_set(slider, "%1.2f meters");
+

+ +

+elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+

+ +

The span of the slider represents its length horizontally. It is set with elm_slider_span_size_set() and is scaled by the object or applications scaling factor.

You can retrieve the current value of the slider anytime.

+double value = elm_slider_value_get(slider);
+

+ +

+// Get the current state of the indicator 
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior 
+elm_slider_indicator_show_set(slider, !enlarge);
+

+ +

+ +

This UI component emits the following signals:

changed: The user changes the slider value.
slider,drag,start: Dragging the slider indicator around starts.
slider,drag,stop: Dragging the slider indicator around stops.
delay,changed: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.

+ +

For all these signals, event_info is NULL.

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

+{
+   evas_object_smart_callback_add(slider, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the slider value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "The slider has changed\n");
+}
+

+ + + +

+ +

Figure: Win hierarchy

Win hierarchy

+ + +

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

+ +

+ +

Create a new window and change the title.

+Evas_Object *window;
+
+// Create a window 
+window = elm_win_add(NULL, "main", ELM_WIN_BASIC);
+
+// Change the window title 
+elm_win_title_set(window, "Example Window");
+

+ +

+Evas_Object *window;
+
+// Create a standard window 
+window = elm_win_util_standard_add("main", "Example Window");
+

+ +

The autodel is set using the following call:

+elm_win_autodel_set(window, EINA_TRUE);
+

+ +

To close the window, use the evas_object_del() function. The window is destroyed and the signal delete,request is sent.

+ +

The window component emits the following signals:

delete,request: The window is requested delete.
focus,in: The window received focus.
focus,out: The window lost focus.
moved: The window that holds the canvas is moved.
withdrawn: The window is managed normally but is removed from the view.
iconified: The window is minimized (for example, into an icon or a taskbar).
normal: The window is in the normal state (not withdrawn or iconified).
stick: The window shows on all desktops.
unstick: The window shows only on one desktop.
fullscreen: The window is fullscreen.
unfullscreen: The window stops being fullscreen.
maximized: The window is maximized.
unmaximized: The window is diminished.
wm,rotation,changed: The rotation of the window is changed by the Windows Manager.
ioerr: A low-level I/O error occurred in the display system.
indicator,prop,changed: The property or indicator mode and indicator opacity are changed.
rotation,changed: The rotation of the window is changed.
profile,changed: The profile of the window is changed.
aux,hint,allowed: aux_hint of the window free.
access,changed: The access function of the window is changed.

With all these signals, event_info is NULL.

The following example registers a callback function called on the fullscreen signal.

+{
+   evas_object_smart_callback_add(window, "fullscreen", fullscreen_cb, data);
+}
+
+// Callback function for the "fullscreen" signal
+// This callback is called when the window becomes fullscreen
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "Window fullscreen\n");
+}
+

+ + + + + +

+ +

+ + + + + + + + diff --git a/org.tizen.guides/html/native/ui/containers_n.htm b/org.tizen.guides/html/native/ui/containers_mn.htm similarity index 79% rename from org.tizen.guides/html/native/ui/containers_n.htm rename to org.tizen.guides/html/native/ui/containers_mn.htm index edf7e6d..8483a8e 100644 --- a/org.tizen.guides/html/native/ui/containers_n.htm +++ b/org.tizen.guides/html/native/ui/containers_mn.htm @@ -11,12 +11,12 @@ - Container Widgets + Containers -

@@ -24,50 +24,50 @@

Content

Box Container
Conformant Container
Grid Container
Layout Container
Mapbuf Container
Naviframe Container
Panes Container
Scroller Container
Table Container
Box
Conformant
Grid
Layout
Mapbuf
Naviframe
Panes
Scroller
Table

Related Info

- - -

Show All
Hide All

- -

-
-
Box Container
- Hide -
-
+
Containers
+ + + + + + + + + + +
Note
This feature is supported in mobile applications only.
-
Figure: Box container
-
+
Box
+ +
Figure: Box container
+
-
Most of the time, you want to display widgets on the screen in a specific order. In Form Tutorial, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging widgets horizontally or vertically.
+ +
Most of the time, you want to display UI components on the screen in a specific order. In Form Tutorial, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.

Creating a Box

To create a new horizontal box:
```
Evas_Object *vbox;
@@ -93,7 +93,7 @@ elm_box_horizontal_set(hbox, EINA_TRUE);
   
 
 Adding Objects to the Box
-You can add any Evas object to the box. Here, we create 5 button widgets and add them to a box:
+You can add any Evas object to the box. Here, we create 5 button components and add them to a box:
 int i;
 Evas_Object *bt;
 Evas_Object *vbox;
@@ -111,7 +111,7 @@ for (i = 0; i < 5; i++)
 }
 evas_object_show(vbox);
 
-The most important function in the above code is elm_box_pack_end(), which is used to add the button widget to the end of the box.
+The most important function in the above code is elm_box_pack_end(), which is used to add the button component to the end of the box.
 
 Setting the Padding
 You can set the padding between the objects in a box by using the elm_box_padding_set() function. The padding values are the number of pixels horizontally and vertically.
@@ -132,10 +132,10 @@ elm_box_pack_start(vbox, ic);
 
```
Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.

Setting the Alignment
-
You can set the alignment of widgets inside a box using the elm_box_align_set() function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a widget with the elm_box_pack_end() or elm_box_pack_start() function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.
+
You can set the alignment of UI components inside a box using the elm_box_align_set() function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the elm_box_pack_end() or elm_box_pack_start() function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.

Figure: Alignment
-
+

Here, we set an alignment of 0.8 vertically:
```
elm_box_align_set(vbox, 0.0, 0.8);
@@ -156,7 +156,7 @@ elm_box_pack_start(vbox, ic);
 The elm_box_layout_transition() function provides the ability to animate the motion of the objects in a box when switching from one layout to another.
 Using Size Hints
 Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called "hints". The size hint functions are:
-
+
 evas_object_size_hint_min_set()
 evas_object_size_hint_max_set()
 evas_object_size_hint_aspect_set()
@@ -189,19 +189,13 @@ elm_box_pack_start(vbox, ic);
 evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 
```
-
-
-
-
Conformant Container
- Hide -
-
+ +
Conformant

Figure: Conformant container
-
+
-
A conformant is a container widget that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.
+
A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.

Creating a Conformant

To create a conformant, use the elm_conformant_add() function:
@@ -218,7 +212,7 @@ conformant = elm_conformant_add(parent);
Signals

To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:
-
-
-
-
Grid Container
- Hide -
-
+ +
Grid

In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.
@@ -263,16 +251,10 @@ evas_object_show(grid);
Clearing the Grid

To clear the grid, use the elm_grid_clear() function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the evas_object_del() function called on each item.
-
-
-
-
Layout Container
- Hide -
-
-
A layout is a container widget that takes a standard Edje design file and wraps it very thinly in a widget. Layouts are the basis of a lot of graphics widgets used in Elementary.
+
Layout
+ +
A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of a lot of graphics components used in Elementary.

An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see the Edje guide.
@@ -283,8 +265,8 @@ evas_object_show(grid); layout = elm_layout_add(parent); -
In Tizen, the layout widget is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:
-
-
-
-
Mapbuf Container
- Hide -
-
+
Mapbuf

Figure: Mapbuf hierarchy
-
+
-
A mapbuf widget is a container widget that uses an Evas map to hold a content object. This widget is used to improve the moving and resizing performance of complex widgets.
+
A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.
-
The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf widget will be faster than frequently moving the content object.
+
The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.
-
The mapbuf widget inherits all the functions of the container class.
+
The mapbuf component inherits all the functions of the container class.

Creating a Mapbuf
-
To create a mapbuf widget, use the elm_mapbuf_add() function:
+
To create a mapbuf component, use the elm_mapbuf_add() function:
```
Evas_Object *mapbuf, *parent, *content;
 
-/* Creating a mapbuf */
+// Creating a mapbuf
 mapbuf = elm_mapbuf_add(parent);
 
```
Adding Content to the Mapbuf
-
To add content to the mapbuf widget, use the elm_object_content_set() function with the "default" part:
+
To add content to the mapbuf component, use the elm_object_content_set() function with the "default" part:
```
elm_object_content_set(mapbuf, content);
```
@@ -370,28 +345,22 @@ mapbuf = elm_mapbuf_add(parent);
-
To activate smooth map rendering and alpha rendering for the mapbuf widget:
+
To activate smooth map rendering and alpha rendering for the mapbuf component:
```
elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
 elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
 
```
Activating the Mapbuf
-
Finally, to use the mapbuf widget, you must activate it:
+
Finally, to use the mapbuf component, you must activate it:
```
elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);
```
Signals
-
The mapbuf widget does not emit any signals and therefore does not provide any callbacks that you can register.
+
The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.
-
-
-
-
Naviframe Container
- Hide -
-
+ +
Naviframe
-
A naviframe widget consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the widget.
+
A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.

Creating a Naviframe

To create a naviframe, use the elm_naviframe_add() function:
@@ -414,7 +383,7 @@ nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
Adding Fixed Content

The naviframe can also display fixed content on top of the current (top-most) view. Use the elm_object_item_part_content_set() function to set this content. Use the following part names to specify the location of the content:
-
-

- Hide -

+ +

Figure: Panes widget

Panes widget

Figure: Panes component

Panes component

A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.

A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.

To create a panes widget, use the elm_panes_add() function:

To create a panes component, use the elm_panes_add() function:

Evas_Object *panes;
 
 panes = elm_panes_add(parent);
@@ -471,25 +434,19 @@ panes = elm_panes_add(parent);
 To set the size of the panes, use the elm_panes_content_left_size_set() and elm_panes_content_right_size_set() functions.
 
 Signals
-The panes widget emits the following signals:
-
-"press": The panes widget has been pressed (but the press has not been released yet).
+The panes component emits the following signals:
+
+"press": The panes component has been pressed (but the press has not been released yet).
 "unpress": The press has been released.
-"clicked": The panes widget has been clicked.
-"clicked,double": The panes widget has been double-clicked.
+"clicked": The panes component has been clicked.
+"clicked,double": The panes component has been double-clicked.
 
 
-

- Hide -

+ +

A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.

The scroller widget inherits all the functions of the Layout Container.

The scroller component inherits all the functions of the Layout.

To create a scroller, use the elm_scroller_add() function:

@@ -512,8 +469,8 @@ elm_object_content_set(scroller, image);
  evas_object_smart_callback_add(scroller, "scroll,drag,start", _scroll_start_cb, NULL);
 
-// Callback function for the "animate,begin" signal.
-// This callback is called when the user begins scrolling the image.
+// Callback function for the "animate,begin" signal
+// This callback is called when the user begins scrolling the image
 void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
 {
    printf("Scroll starts\n");
@@ -530,7 +487,7 @@ void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
 
 The scroller emits the following signals, which you can catch in your application:
 
-
+
 "edge,left": The left edge of the content has been reached.
 "edge,right": The right edge of the content has been reached.
 "edge,top": The top edge of the content has been reached.
@@ -585,15 +542,7 @@ elm_box_pack_end(box, img);
 elm_scroller_page_size_set(obj, w, h);
 elm_scroller_page_show(obj, 0, 0);
 
-
-

-
-
Table Container
- Hide -
-
+
Table

A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).
@@ -632,12 +581,7 @@ evas_object_show(table);
Clearing the Table

To clear the table, use the elm_table_clear() function. If the clear parameter is EINA_TRUE, the table items are deleted. The evas_object_del() function will be called on each item.
-
-

diff --git a/org.tizen.guides/html/native/ui/containers_wn.htm b/org.tizen.guides/html/native/ui/containers_wn.htm new file mode 100644 index 0000000..d0f02e1 --- /dev/null +++ b/org.tizen.guides/html/native/ui/containers_wn.htm @@ -0,0 +1,555 @@ + + + + + + + + + + + + + + Containers + + + + + + +

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

+ + +

Figure: Box container

Box container

+ + +

Most of the time, you want to display UI components on the screen in a specific order. To arrange the user information in a linear manner, you can use a basic container called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.

To create a new horizontal box:

Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+

By default, the elm_box_add() function creates a vertical box. If you want to create a horizontal box, use the elm_box_horizontal_set() function:

Evas_Object *hbox;
+
+hbox = elm_box_add(parent);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+

+ + + + + + + + + + +

Note
A box is a non-graphical object. It adds no graphics to or around the objects it holds.

+ +

You can add any Evas object to the box. Here, we create 5 button components and add them to a box:

int i;
+Evas_Object *bt;
+Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+
+for (i = 0; i < 5; i++)
+{
+   char tmp[16];
+   snprintf(tmp, sizeof(tmp), "Button %d", i);
+   bt = elm_button_add(vbox);
+   elm_object_text_set(bt, tmp);
+   elm_box_pack_end(vbox, bt);
+   evas_object_show(bt);
+}
+evas_object_show(vbox);
+

The most important function in the above code is elm_box_pack_end(), which is used to add the button component to the end of the box.

+ +

You can set the padding between the objects in a box by using the elm_box_padding_set() function. The padding values are the number of pixels horizontally and vertically.

elm_box_padding_set(vbox, 16, 64);
+

+ +

You can add different-size elements to a container. For example, to add an image with a size of 128x128 pixels as the first element in a box, use the elm_box_pack_start() function:

ic = elm_icon_add(vbox);
+elm_image_file_set(ic, "./c1.png", NULL);
+evas_object_size_hint_min_set(ic, 128, 128);
+evas_object_show(ic);
+elm_box_pack_start(vbox, ic);
+

We ask Evas to set the size hint for the icon object by using the elm_object_size_hint_min_set() function. Evas will try to set the minimum size of this object accordingly.

If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the elm_box_homogeneous_set() function:

elm_box_homogeneous_set(vbox, EINA_TRUE);
+

Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.

You can set the alignment of UI components inside a box using the elm_box_align_set() function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the elm_box_pack_end() or elm_box_pack_start() function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.

+ +

Figure: Alignment

Alignment

+ +

Here, we set an alignment of 0.8 vertically:

elm_box_align_set(vbox, 0.0, 0.8);
+

+ + + + + + + + + + +

Note
The alignment only takes effect in the opposite direction than the one defined with the elm_box_horizontal_set() function.

+ + +

The elm_box_layout_transition() function provides the ability to animate the motion of the objects in a box when switching from one layout to another.

Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called "hints". The size hint functions are:

evas_object_size_hint_min_set()
evas_object_size_hint_max_set()
evas_object_size_hint_aspect_set()
evas_object_size_hint_align_set()
evas_object_size_hint_weight_set()

You can also use the respective get functions to get the current hint values.

In case of the evas_object_size_hint_min_set() function, you ask Evas to respect the minimum size you define for the object. For example, to set the minimum size of an icon to 64x46 pixels:

evas_object_size_hint_min_set(ic, 64, 64);
+

You can also set a maximum size for the same icon:

evas_object_size_hint_max_set(ic, 128, 128);
+

When you resize the parent of the icon, if there are no constraints to the parent, the minimum size of the parent will be the minimum hint size of the icon. If you increase the parent size, the icon will grow larger until its maximum hint size is reached. After this point, the icon will not grow any larger and there will be empty space around the icon within the parent.

When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. Here, the proportion of the icon is respected, and the width will be the same as the height:

evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
+

Here, the width will be twice the height:

evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
+

If we want to change the alignment of the icon relative to the parent, we can use the evas_object_size_hint_align() function. By default, the icon is centered, so it is aligned with a value of 0.5. You can change the alignment as follows:

evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+

In the above case, the icon is aligned to the bottom left corner of the parent.

We can also play with the size of the icon inside its container by using the weight size hint. By default, the weight is not set, so the size of the icon will be the minimum size. But if you set this value to 1, the icon will be expand as much as it can inside the container:

evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+

You can also use the alignment and weight hints together. Here, we want the icon to take up all the space in its parent:

evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+

+ + +

+ +

Figure: Conformant container

Conformant container

+ +

A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.

+ +

To create a conformant, use the elm_conformant_add() function:

+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+

+ +

To add content to the conformant, use the elm_object_content_set() function:

elm_object_content_set(conformant, main_view);
+

+ +

To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:

"virtualkeypad,state,on": The virtual keyboard has been switched on.
"virtualkeypad,state,off": The virtual keyboard has been switched off.
"virtualkeypad,size,changed": The virtual keyboard size has changed.
"clipboard,state,on": The clipboard has been switched on.
"clipboard,state,off": The clipboard has been switched off.

+ + +

+ +

In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.

+ +

To create a grid, use the elm_grid_add() function:

Evas_Object *grid;
+
+grid = elm_grid_add(parent);
+

To add an item to the grid, use the elm_grid_pack_set() function. Provide the X and Y coordinates, and the width and height in the grid as parameters. The following code adds 12 icons in a circle formation:

for (i = 0; i < 12; i++)
+{
+   ic = elm_icon_add(grid);
+   elm_image_file_set(ic, "c1.png", NULL);
+   evas_object_size_hint_min_set(ic, 128, 128);
+   evas_object_show(ic);
+   x = 40 * cos(2.0 * M_PI / 12 * i);
+   y = 40 * sin(2.0 * M_PI / 12 * i);
+   elm_grid_pack(grid, ic,  40 + x,  40 + y,  20 , 20);
+}
+evas_object_show(grid);
+

application/default: This layout can be used to display content inside a window.
nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.
body_thumbnail: This layout can be used when you display an image and text inside a window and the position is already defined internally.

+ +

To set a theme to the layout, use the elm_layout_theme_set() function.

+ +

To use the application/default layout:

Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, "layout", "application", "default");
+

+ +

To add an Evas object to the layout:

elm_object_part_content_set(ly, "elm.swallow.content" view);
+

elm.swallow.content is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.

+ +

To swallow an object inside the main content and background views:

elm_object_part_content_set(ly, "elm.swallow.content", main_view);
+elm_object_part_content_set(ly, "elm.swallow.background", background);
+

The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part with the elm.text text zone. To change the text:

elm_object_part_text_set(ly, "elm.text", "Hi All :)");
+

+ +

+ +

Figure: Mapbuf hierarchy

Mapbuf hierarchy

+ +

A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.

+ +

The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.

+ +

The mapbuf component inherits all the functions of the container class.

+ +

To create a mapbuf component, use the elm_mapbuf_add() function:

Evas_Object *mapbuf, *parent, *content;
+
+// Creating a mapbuf
+mapbuf = elm_mapbuf_add(parent);
+

To add content to the mapbuf component, use the elm_object_content_set() function with the "default" part:

elm_object_content_set(mapbuf, content);

+ + + + + + + + + + +

Note
Calling elm_object_content_set(mapbuf, content) is equivalent to calling elm_object_part_content_set(mapbuf, "default", content).

+ + +

To activate smooth map rendering and alpha rendering for the mapbuf component:

elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
+elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
+

+ +

Finally, to use the mapbuf component, you must activate it:

elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);

+ +

The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.

+ + +

+ +

A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.

+ +

To create a naviframe, use the elm_naviframe_add() function:

Evas_Object *nav;
+
+nav = elm_naviframe_add(parent);
+

The naviframe is a stack of views. A new view is always pushed to the top of the stack. The top-most view is deleted by popping it.

To add a new view to the naviframe:

Elm_Object_Item *nav_it;
+
+nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
+// In Tizen 2.3, the back button is not supported in the naviframe 
+

When you push a new view to the stack, you receive an Elm_Object_Item for the view. You can use this item to modify the view.

To pop and delete the top-most view:

elm_naviframe_item_pop(nav);
+

+ +

The naviframe can also display fixed content on top of the current (top-most) view. Use the elm_object_item_part_content_set() function to set this content. Use the following part names to specify the location of the content:

"default": The main content area of the current view.
"title_icon": An icon in the title area of the current view.

For example, to add a button to the naviframe:

btn = elm_button_add(nav);
+elm_object_style_set(btn, "naviframe/title_icon");
+elm_object_part_content_set(btn, "icon", ic);
+

To set the title labels of the naviframe, use the elm_object_item_part_text_set() function and specify one of the following label locations:

"default": Sets the title label in the title area of the current view.

The naviframe emits the following signals:

"transition,finished": The transition has finished changing the view.
"title,transition,finished": The title area transition has finished changing the state of the title.
"title,clicked": The user has clicked the title area.

+ + +

+ +

The scroller component inherits all the functions of the Layout.

To create a scroller, use the elm_scroller_add() function:

+Evas_Object *scroller;
+
+scroller = elm_scroller_add(parent);
+

To add an object to the scroller, use the elm_object_content_set() function:

Evas_Object *image;
+
+image = elm_image_add(parent);
+elm_image_file_set(image, "image.png", NULL);
+evas_object_show(image);
+evas_object_size_hint_min_set(image, 2560, 1600);
+elm_object_content_set(scroller, image);
+

In the above code, we set a minimum size of 2560 x 1600 pixels for the image. The scroller is smaller than the image, so you can scroll across the image.

If you want to be informed when the user begins scrolling the image, use the following code:

+evas_object_smart_callback_add(scroller, "scroll,drag,start", _scroll_start_cb, NULL);
+
+// Callback function for the "animate,begin" signal
+// This callback is called when the user begins scrolling the image
+void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   printf("Scroll starts\n");
+}

+ +

When scrolling content, the scroller may "bounce" when reaching the edge of the content. This is a visual way of indicating that there is no more content to scroll in that direction. Bounce is enabled by default for both axes. To enable or disable the bounce for either or both axes, use the elm_scroller_bounce_set() function. The following code disables the bounce for the horizontal axis and enables it for the vertical axis:

+ +

elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
+

The scroller can limit the scrolling to "pages". In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single "page" at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the elm_scroller_page_size_set() function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.

+ +

+ +

The scroller emits the following signals, which you can catch in your application:

+ +

"edge,left": The left edge of the content has been reached.
"edge,right": The right edge of the content has been reached.
"edge,top": The top edge of the content has been reached.
"edge,bottom": The bottom edge of the content has been reached.
"scroll": The content has been scrolled (moved).
"scroll,anim,start": The scrolling animation has started.
"scroll,anim,stop": The scrolling animation has stopped.
"scroll,drag,start": Dragging the contents has started.
"scroll,drag,stop": Dragging the contents has stopped.
"vbar,drag": The vertical scroll bar has been dragged.
"vbar,press": The vertical scroll bar has been pressed.
"vbar,unpress": The vertical scroll bar has been unpressed.
"hbar,drag": The horizontal scroll bar has been dragged.
"hbar,press": The horizontal scroll bar has been pressed.
"hbar,unpress": The horizontal scroll bar has been unpressed.
"scroll,page,changed": The visible page has changed.

+ +

A good example of the scroller is a picture slideshow: we add images to the scroller and limit the scrolling to pages (one picture at a time). In the following code, we disable the scroll bars for both axes, limit the scrolling to pages by using the elm_scroller_page_scroll_limit_set() function, and lock the scrolling on the Y axis by using the elm_object_scroll_lock_y_set() function:

elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
+elm_scroller_page_scroll_limit_set(scroller, 1, 0);
+elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
+

We create a horizontal box, which will contain all the images, and which itself will be contained by the scroller:

box = elm_box_add(scroller);
+elm_box_horizontal_set(box, EINA_TRUE);
+elm_object_content_set(scroller, box);
+evas_object_show(box);
+

We then create all the images and add them to the horizontal box:

img = elm_image_add(scroller);
+snprintf(buf, sizeof(buf), IMAGE_DIR"/%d.jpg", i);
+elm_image_file_set(img, buf, NULL);
+evas_object_show(img);
+pages = eina_list_append(pages, img);
+elm_box_pack_end(box, img);
+

We store references to the images in an eina_list for easy retrieval later.

Finally, we display the first page of the scroller:

elm_scroller_page_show(scroller, 0, 0);
+

The size of the scroller depends on the size of the parent. When the parent changes, for example when the window is resized or rotated, the scroller is also resized. Since we need to be informed when the scroller is resized, we add a callback on the EVAS_CALLBACK_RESIZE event for the scroller:

evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);

The callback retrieves the new size of the scroller by using the evas_object_geometry_get() function on the object pointer. The pointer is relative to the object that has been resized, which in our case is the scroller itself. We can then iterate through the images of the scroller and set the minimum size to fit the scroller size:

EINA_LIST_FOREACH(images, l, page)
+{
+   evas_object_size_hint_min_set(page, w, h);
+}
+

Finally, we set the page size of the scroller to match the scroller size and display the first page:

elm_scroller_page_size_set(obj, w, h);
+elm_scroller_page_show(obj, 0, 0);

+ +

+ +

A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).

+ +

+ +

To create a table, use the elm_table_add() function:

Evas_Object *table;
+table = elm_table_add(parent);

+ +

+ +

Items are added to the table with the elm_table_pack() function. This function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan). If we want to create an icon that takes 3 columns and rows and a button that only takes 1 row and column, the code will look like this:

ic = elm_icon_add(table);
+elm_image_file_set(ic, "icon.png", NULL);
+evas_object_show(ic);
+elm_table_pack(table, ic, 0, 0, 3, 3);
+
+btn = elm_button_add(table);
+elm_object_text_set(btn, "Click me i'm famous");
+evas_object_show(btn);
+elm_table_pack(table, btn, 3, 1, 1, 1);
+evas_object_show(table);
+

+ +

+ +

If you want to change the position of the item after adding it, use the elm_table_pack_set() function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).

+ +

To add padding around the item, use the elm_table_padding_set() function. The second parameter is the padding between columns, and the third parameter is the padding between rows:

elm_table_padding_set(table, 10, 10);

+ +

To change the alignment and size of an item, use the evas_object_size_hint parameters. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:

elm_table_homogeneous_set(table, EINA_TRUE);
+

+ +

+ +

To clear the table, use the elm_table_clear() function. If the clear parameter is EINA_TRUE, the table items are deleted. The evas_object_del() function will be called on each item.

+ + + + + +

+ +

+ + + + + + + + diff --git a/org.tizen.guides/html/native/ui/data_types_n.htm b/org.tizen.guides/html/native/ui/data_types_n.htm index 78ed779..91792ab 100644 --- a/org.tizen.guides/html/native/ui/data_types_n.htm +++ b/org.tizen.guides/html/native/ui/data_types_n.htm @@ -14,9 +14,9 @@ -

+ @@ -151,7 +152,7 @@ eina_strbuf_replace_all(mybuffer, "B-U-F-F-E-R", "Buffer");

To insert characters you can use the "insert" function, eina_strbuf_insert(Eina_Strbuf * buf, const char * str, size_t pos) will insert the given str at the position pos. eina_strbuf_insert_printf(Eina_Strbuf * buf, const char * fmt, size_t pos, ...) does the same but with formatted strings.

eina_strbuf_insert(mybuffer, "More buffer", 10);
 
-// Using  eina_strbuf_length_get to get the buffer length.
+// Using eina_strbuf_length_get to get the buffer length
 eina_strbuf_insert_printf(buf, " %s: %d", 6, "length", eina_strbuf_length_get(buf));

@@ -301,7 +302,7 @@ int remove_array() EINA_ARRAY_ITER_NEXT(array, i, item, iterator) printf("item #%d: %s\n", i, item); - // Flushing the array. + // Flushing the array eina_array_flush(array); // Free the array @@ -459,7 +460,7 @@ int new_iterator() acc = eina_array_accessor_new(array); // Random access to the data of the array elements - for(i = 1; i < 10; i += 2) + for (i = 1; i < 10; i += 2) { // Put the data in the variable 'data' eina_accessor_data_get(acc, i, &data); @@ -511,7 +512,7 @@ int new_iterator()

To add data as the last element of the inline array you can use eina_inarray_push(Eina_Inarray *array, const void *data) like in this example:

iarr = eina_inarray_new(sizeof(char), 0);
 
-// Adding a value to the Inline array
+// Adding a value to the inline array
 ch = 'a';
 eina_inarray_push(iarr, &ch);

@@ -554,7 +555,7 @@ eina_inarray_insert_at(iarr, 2, &ch)

Be careful, if position is bigger than the array length, it will fail.

If you want to insert data with your own criteria of position you can use eina_inarray_insert(Eina_Inarray *array, const void * data, Eina_Compare_Cb compare). In this example we insert before a greater value.

-// Defining the function with our own criteria of position.
+// Defining the function with our own criteria of position
 Eina_Compare_Cb cmp(const void *a, const void *b)
 {
    return *(int*)a > *(int*)b;
@@ -577,7 +578,7 @@ int inline_insert()
    a = 100;
    eina_inarray_push(iarr, &a);
 
-   /* Inserting data with our own criteria */
+   // Inserting data with our own criteria
    a = 99;
    eina_inarray_insert_sorted(iarr, &a, cmp);
 
@@ -934,7 +935,7 @@ _phone_entry_free_cb(void *data)
 {
    Eina_Hash *phone_book = NULL;
    phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
-   // Empty the phone book, but don't destroy it
+   // Empty the phone book, but do not destroy it
    eina_hash_free_buckets(phone_book);
    eina_hash_free(phone_book);
 }
@@ -1018,7 +1019,7 @@ nb_elm = eina_hash_population(phone_book);
 The first parameter is the hash, the second is the function called on each iteration and the last one is the data passed to the 'callback' function passed as second argument.
 The callback function has to return an Eina_Bool, EINA_TRUE if the iteration has to continue and EINA_FALSE if the iteration has to stop.
 // This callback function prints the key and the data of an hash entry 
-// here the name and the phone number.
+// here the name and the phone number
 static Eina_Bool
 pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
 {
@@ -1056,7 +1057,7 @@ while (eina_iterator_next(it, &data))
    printf("%s\n", name);
 }
 
-// You need to free the Iterator
+// You need to free the iterator
 eina_iterator_free(it);
 
 // Iterating over hash data 
@@ -1069,7 +1070,7 @@ while (eina_iterator_next(it, &data))
    printf("%s\n", number);
 }
 
-// You need to free the Iterator
+// You need to free the iterator
 eina_iterator_free(it);
 
 Using this method you can also iterate over a tuple composed of keys and data like eina_hash_foreach using eina_hash_iterator_tuple_new(const Eina_Hash *hash)
@@ -1103,7 +1104,7 @@ eina_iterator_free(tit); // Always free the iterator after its use
 To use an Eina_List you just have to declare it with NULL as default value and * call eina_list_append(Eina_List * list, const void * data). Pass the list and the data you want to append. This list must be a pointer to the first element of the list (or NULL). It returns a pointer to the list.
 int list()
 {
-   // Declaration of the Eina_List with NULL as default value;
+   // Declaration of the Eina_List with NULL as default value
    Eina_List *list = NULL;
 
    // Creating the first element of the list 
@@ -1214,11 +1215,11 @@ rev_copy = eina_list_reverse_clone(app_list);
 
 
 Searching and Sorting Lists
-You will probably need to search for data in a list, especially in large lists. Eina_List API provides functions to run powerful searches.
+You will probably need to search for data in a list, especially in large lists. The Eina List API (in mobile and wearable applications) provides functions to run powerful searches.
 If your list is unsorted and you need to get the data you can use eina_list_search_unsorted(const Eina_List *list, Eina_Compare_Cb func, const void *data). This function performs a lookup in unsorted lists, it takes the list as first parameter, a callback function for comparison as second parameter and the data you are looking for. eina_list_search_unsorted_list(const Eina_List *list, Eina_Compare_Cb func, const void *data) does the same but returns a "Eina_List".
 int search_list()
 {
-   // Declaring the List
+   // Declaring the list
    Eina_List *list = NULL; 
    Eina_List *l;
    // Little trick to use strcmp as Eina_Compare_Cb 
@@ -1253,8 +1254,8 @@ rev_copy = eina_list_reverse_clone(app_list);
 {
    const char *txt = d1;
    const char *txt2 = d2;
-   if(!txt) return(1);
-   if(!txt2) return(-1);
+   if (!txt) return(1);
+   if (!txt2) return(-1);
 
    return(strcmp(txt, txt2));
 }
@@ -1269,8 +1270,8 @@ list = eina_list_sort(list, 0, sort_cb);
 {
    const char *txt = NULL;
    const char *txt2 = NULL;
-   if(!d1) return(1);
-   if(!d2) return(-1);
+   if (!d1) return(1);
+   if (!d2) return(-1);
 
    return(strcmp((const char*)d1, (const char*)d2));
 }
@@ -1279,9 +1280,7 @@ Eina_List *sorted1;
 Eina_List *sorted2;
 Eina_List *newlist;
 
-/* 
- * put some values and sort your lists
- */
+// Put some values and sort your lists
 
 // Simply merge two lists without any process
 newlist = eina_list_merge(sorted1, sorted2);
@@ -1334,7 +1333,7 @@ list = eina_list_split_list(list, l, &other_list);
    list = eina_list_append(list, eina_stringshare_add("Philippe"));
    list = eina_list_append(list, eina_stringshare_add("billiob"));
 
-   for(l = list; l; l = eina_list_next(l))
+   for (l = list; l; l = eina_list_next(l))
       // Printing the data returned by eina_list_data_get
       printf("%s\n", (char*)eina_list_data_get(l));
 
@@ -1347,13 +1346,13 @@ list = eina_list_split_list(list, l, &other_list);
 
 In this example we also use eina_list_next (const Eina_List *list) to move through the list in a for statement. This function moves to the next element of the linked list.
 To set data in a list member you can use eina_list_data_set(Eina_List *list, const void *data) Pass the "list" (understand node) as first argument and the data to set as second.
-// Setting a new data for the last element.
+// Setting a new data for the last element
 eina_list_data_set(eina_list_last(list), eina_stringshare_add("Boris"));
 
In this example you can also see the usage of eina_list_last(const Eina_List *list) which returns the last element of a Eina_List.
 
 Moving in a List
 The usage of eina_list_last (const Eina_List *list) and eina_list_next (const Eina_List *list) are explained before. The other interesting function that allows movement in the list is eina_list_prev(const Eina_List *list): it gets the previous list node before the specified list node.
-for(l = eina_list_last(list); l; l = eina_list_prev(l))
+for (l = eina_list_last(list); l; l = eina_list_prev(l))
    printf("%s\n", (char*)eina_list_data_get(l));
 
 In this example, we scroll backwards starting from the end of the list.
@@ -1400,7 +1399,7 @@ list = eina_list_append(list, "tizen");
 list = eina_list_append(list, "tizen");
 list = eina_list_append(list, "tizen");
 
-// Using EINA_LIST_FOREACH_SAFE to free elements that match "tizen".
+// Using EINA_LIST_FOREACH_SAFE to free elements that match "tizen"
 
 EINA_LIST_FOREACH_SAFE(list, l, l_next, data)
    if (strcmp(data, "tizen") == 0) 
@@ -1572,7 +1571,7 @@ printf("v=%s (pointer: %p)\n", s, s);
 newstr = eina_value_to_string(&v);
 printf("v as string: %s (pointer: %p)\n", newstr, newstr);
 
-// Free the memory allocated by eina_value_to_string.
+// Free the memory allocated by eina_value_to_string
 free(newstr);
 
 eina_value_flush(&v); 
diff --git a/org.tizen.guides/html/native/ui/ecore_n.htm b/org.tizen.guides/html/native/ui/ecore_n.htm
index f680fb0..a146ace 100644
--- a/org.tizen.guides/html/native/ui/ecore_n.htm
+++ b/org.tizen.guides/html/native/ui/ecore_n.htm
@@ -14,16 +14,17 @@
  
  
 
- 
+ 
     
-        
+         
     
 
     
         Related Info
         
-        UI Tutorials
-		Ecore API
+        UI Framework Tutorials
+		Ecore API for Mobile Native
+		Ecore API for Wearable Native
             
     
 
diff --git a/org.tizen.guides/html/native/ui/edc_part_block_n.htm b/org.tizen.guides/html/native/ui/edc_part_block_n.htm
index e5087f9..ab4205c 100644
--- a/org.tizen.guides/html/native/ui/edc_part_block_n.htm
+++ b/org.tizen.guides/html/native/ui/edc_part_block_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -29,7 +29,11 @@
 				
 	Related Info
 		
-			UI Tutorials		
+			UI Framework Tutorials		
+			Edje API for Mobile Native
+			Evas API for Mobile Native
+			Edje API for Wearable Native
+			Evas API for Wearable Native			
 			
 	
 	
@@ -1182,7 +1186,7 @@ box/table
 }
 
 
-On a BOX part, this block is used to set other groups as elements of the box. These can be mixed with external objects set by the application through the edje_object_part_box* API.
+On a BOX part, this block is used to set other groups as elements of the box. These can be mixed with external objects set by the application through the edje_object_part_box*() functions.
 
 Item
 
diff --git a/org.tizen.guides/html/native/ui/edje_n.htm b/org.tizen.guides/html/native/ui/edje_n.htm
index 0eba262..2966660 100644
--- a/org.tizen.guides/html/native/ui/edje_n.htm
+++ b/org.tizen.guides/html/native/ui/edje_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -32,8 +32,13 @@
 		
 		Related Info
 		
-			UI Tutorials	
-			UI API			
+			UI Framework Tutorials	
+			Edje API for Mobile Native
+			Elementary API for Mobile Native		
+			Evas API for Mobile Native
+			Edje API for Wearable Native
+			Elementary API for Wearable Native		
+			Evas API for Wearable Native			
 			
 	
 	
@@ -84,7 +89,7 @@ edje_cc -sd ../edje/sounds -fd ../edje/fonts -id ../edje/images ../res/edje/hell
 
 
 
-The Tizen SDK compilation log extract shows you that if your EDC file uses pictures, they must be copied to the ./edje/images directory. fonts and sounds go to the ./edje/fonts and ./edje/sounds directory respectively. The SDK builds the helloworld.edj file in the ./res/edje/ folder.
+The Tizen SDK compilation log extract shows you that if your EDC file uses pictures, they must be copied to the ./edje/images directory. Fonts and sounds go to the ./edje/fonts and ./edje/sounds directory respectively. The SDK builds the helloworld.edj file in the ./res/edje/ folder.
 
 Writing Simple EDC File 
 The code example below shows you the structure of an EDC file. It is a collection of groups that contain parts and programs.
@@ -276,7 +281,7 @@ part
 Therefore, in order to create a 2x2 blue rectangle centered inside that green square, the top-left corner has to be (1, 1) and the bottom-right one has to be (2, 2).
 
 Figure: Offset indices 
- 
+ 
 
 Edje needs the following things defined:
 
@@ -316,7 +321,7 @@ rel2.to: "green rectangle";
 The image below shows how to refer pixels using relative positioning when the offsets are (0, 0).
 
 Figure: Relative positioning 
- 
+ 
 
 Note the addressing of pixels: (0, 0) is addressed through relative: 0 0; offset 0 0; and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through relative: 0.75 0.75; offset: 0 0; is at (3, 3) and not (2, 2)!.
 
@@ -398,11 +403,11 @@ evas_object_size_hint_request_set(object, 200, 200);
 The other parameters are aspect width and height ratio. These integers are used to calculate the proportions of the object. If aspect ratio terms are null, the object's container ignores the aspect and scale of the object and occupies the whole available area.
 
 Figure: Aspect control 
- 
+ 
  
- 
+ 
 
- 
+ 
 
 The following code example sets the aspect size hint to EVAS_ASPECT_CONTROL_BOTH with a width of 100 and a height of 200. So aspect ratio should be 1/2.
 
@@ -414,7 +419,7 @@ evas_object_size_hint_aspect_set(object, EVAS_ASPECT_CONTROL_BOTH, 100, 200);
 This sets the hints for the object's alignment. This hint is used when the object size is smaller than its parent's. The special EVAS_HINT_FILL parameter uses maximum size hints with higher priority, if they are set. Also, any padding hints set on objects are added up to the alignment space on the final scene composition.
 
 Figure: Alignment 
- 
+ 
 
 In the code below, the special EVAS_HINT_FILL parameter is used.
 
@@ -439,7 +444,7 @@ evas_object_size_hint_weight_set(object, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 This sets the hints for the object's padding space. Padding is extra space an object takes on each of its delimiting rectangle sides. The padding space is rendered transparent. Four hints can be defined, for the left, right, top, and bottom padding.
 
 Figure: Padding 
- 
+ 
 
 Here the padding hints are set to 5 pixels on each side of the object.
 
@@ -544,7 +549,7 @@ part
 
 Edje Swallow 
 
-The parent of all layout widgets is Edje. Edje as explained in the Edje Blocks is a library which convert edc files into Evas object. EDC is a description language. It means that the objects of interface are described by using text description. One of its main features is the possibility to create "Swallows" objects. When this kind of object is added in an Evas, it contains any other Evas_Object. To create a swallow part, create first the EDC file: 
+The parent of all layout components is Edje. Edje as explained in the Edje Blocks is a library which convert edc files into Evas object. EDC is a description language. It means that the objects of interface are described by using text description. One of its main features is the possibility to create "Swallows" objects. When this kind of object is added in an Evas, it contains any other Evas_Object. To create a swallow part, create first the EDC file: 
 
  collections
@@ -589,7 +594,7 @@ edje_object_file_set(edje, "container.edj", "container");
 Note
 
 
-edje_object_add as opposed as all elementary object, does not take an Evas_Object as a parent. Give it the Evas on which the object is added. As the parent is already added on an Evas by elementary, retrieve a reference on it by using the evas_object_evas_get API.
+edje_object_add as opposed as all elementary object, does not take an Evas_Object as a parent. Give it the Evas on which the object is added. As the parent is already added on an Evas by elementary, retrieve a reference on it by using the evas_object_evas_get() function.
 
 
  
@@ -615,11 +620,11 @@ edje_object_part_swallow(edje, "part.swallow", ic);
 
  
 
-Create complex layout for your application with Edje. It is may not be the most easy way, but it is the most powerful. This Edje layout is used all around elementary and is the basis of the layout widget.
+Create complex layout for your application with Edje. It is may not be the most easy way, but it is the most powerful. This Edje layout is used all around elementary and is the basis of the layout component.
 
 ELM Layout
 
-Layout is a container widget. The basic use of elm_layout, with default style is already documented in the Container Widgets guide. Elm layout takes a standard Edje design file and wraps it in a widget. Layouts are the basis of graphical widgets which are used in Elementary.
+Layout is a container component. For the basic use of the elm_layout with a default style, see the Layout Guide (in mobile and wearable applications). Elm layout takes a standard Edje design file and wraps it in a UI component. Layouts are the basis of graphical UI components which are used in Elementary.
 
 Adding Layout
 
@@ -676,7 +681,7 @@ collections
 elm_layout_file_set(layout, "edje_example.edj", "my_layout");
 
 
-The layout widget may contain as many parts/children as described in its theme file (EDC). Some of these children can have special types:
+The layout component may contain as many parts/children as described in its theme file (EDC). Some of these children can have special types:
 
 
 SWALLOW (content holder)
@@ -686,7 +691,7 @@ elm_layout_file_set(layout, "edje_example.edj", "my_layout")
 
 Only one object can be added to a SWALLOW. The elm_layout_content_set()/get/unset functions are used to manage objects in a SWALLOW part. After being set to this part, the object's size, position, visibility, clipping and other description properties are controlled by the description of the given part (inside the Edje theme file).
 
-The BOX layout can be used through the elm_layout_box_*() set of functions. It is very similar to the elm_box widget but the BOX layout's behavior is completely controlled by the Edje theme. The TABLE layout is like the BOX layout, the difference is that it is used through the elm_layout_table_*() set of functions.
+The BOX layout can be used through the elm_layout_box_*() set of functions. It is very similar to the elm_box component but the BOX layout's behavior is completely controlled by the Edje theme. The TABLE layout is like the BOX layout, the difference is that it is used through the elm_layout_table_*() set of functions.
 
 Signals
 Elm can send Edje signals to the EDC part by using the elm_layout_signal_emit. You can also use elm_layout_signal_callback_add to receive signals.
@@ -766,4 +771,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.guides/html/native/ui/efl_extension_n.htm b/org.tizen.guides/html/native/ui/efl_extension_n.htm
index c553119..a24fe93 100644
--- a/org.tizen.guides/html/native/ui/efl_extension_n.htm
+++ b/org.tizen.guides/html/native/ui/efl_extension_n.htm
@@ -14,19 +14,24 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
-	
-		
+		Content
+		
+			Working with Hardware Keys
+			Working with Rotary Events
+		
 		Related Info
 		
-			
-			Efl Extension Tutorial	
-			Efl Extension API			
+			Efl Extension Tutorial
+			Efl Extension API for Mobile Native	
+			Elementary API for Mobile Native
+			Efl Extension API for Wearable Native	
+			Elementary API for Wearable Native			
 			
 	
 	
@@ -35,42 +40,91 @@
 Efl Extension
 
 
-The Efl Extension API is an extension package for EFL. It provides functions to work with the hardware keys on devices.
+The Efl Extension is an extension package for EFL that provides functions to work with the hardware keys and rotary events.
+
+Working with Hardware Keys
+
+ 
+    
+     
+      
+     
+     
+      
+     
+    
+  Note
Hardware key events are only supported in mobile devices. 
 
 Normally, the key events are only delivered to the object in focus. However, with the EFL Extension functions, you can let visible objects without focus get events from the Menu and Back keys.
 
  Figure: Menu and Back keys 
- 
+ 
 
 The EFL Extension maintains its own object stack for determining which object to deliver events to. Only visible objects are added to this stack. The stack is based on the Evas layer. It means that if 2 objects are registered for the same EFL Extension event, the object on the higher Evas layer gets the event.
 
 The following figure shows an example of objects and their layers. Objects 1, 2, and 3 are registered with EFL Extension callbacks for the same event, such as a Back key event. When the event occurs, object 3, which is on the highest layer (layer 3), gets the event callback.
 
 Figure: Objects with layers 
- 
-
-If objects stay on the same layer, the object, which is registered to the callback first, gets the event.
+ 
 
-To register a callback for the Menu or Back key, use the following function:
--void eext_object_event_callback_add(Evas_Object *obj, Eext_Callback_Type type, Eext_Event_Cb func, void *data);
-
+If objects stay on the same layer, the object which is registered to the callback first gets the event.
 
-There are 2 types of Eext callbacks:
+To register a callback for the Menu or Back key, use the eext_object_event_callback_add() function with the application callback type:
 
 EEXT_CALLBACK_BACK: Hardware Back key event
 EEXT_CALLBACK_MORE: Hardware Menu key event
 
 
-The Eext_Event_Cb callback has the following signature:
-void (*Eext_Event_Cb)(void *data, Evas_Object *obj, void *event_info);
+To delete a registered event in the EFL Extension, use the eext_object_event_callback_del() function.
+
+The EFL Extension also provides other convenient functions to work with the Menu and Back keys for popup, ctxpopup, naviframe, and entry components (in mobile and wearable applications).
+
+Working with Rotary Events
+
+ 
+    
+     
+      
+     
+     
+      
+     
+    
+  Note
Rotary events are only supported in devices with a circular screen.  
+  
+You can use various functions to work with the rotary events. The functions manage the rotary events, which are fired from the rotary device and delivered to a suitable target. To receive rotary events, you must define an event callback or a handler function, and register it using the EFL Extension functions. There are 2 ways to receive the rotary events: the rotary event handler and the rotary object event callback.
+
+Rotary Event Handler
+
+The rotary event handler is suitable when you want to handle rotary events without taking care about an Evas Object or when the application is not implemented using an Evas Object. The handler works like the Ecore event in EFL:
+
+The application registers a rotary event handler with the eext_rotary_event_handler_add() function.
+
+The rotary event handlers are treated "first come first served". It means that the first registered handler is called first when rotary events happens. If the handler returns EINA_TRUE, the next handler is called. Otherwise, EFL Extension stops delivering the rotary events.
+
+To remove a rotary event handler, use the eext_rotary_event_handler_del() function.
+
+
+
+Rotary Object Event Callback
+
+The rotary object event callback is suitable when you want EFL Extension to handle the event delivery between objects. It means that EFL Extension manages a callback and an object list and decides which object's callback must be called when rotary events happen: 
+
+The application registers a callback using the eext_rotary_object_event_callback_add() function.
+
+EFL Extension treats callbacks based on the callback priority. If the application registers callbacks for a same object, the callback with the lowest priority number is called first. If this callback returns EINA_TRUE, the higher priority number is called. The above function registers the rotary event callback with a default priority number (value is 0). To register the rotary event callback with another priority number, use the eext_rotary_object_event_callback_priority_add() function.
+To remove a registered callback from an object, use the eext_rotary_object_event_callback_del() function:
+
+The rotary events are only delivered to 1 object named the activated object. If there is no activated object, the rotary event is not delivered to any object. If the activated object has registered callbacks and the callbacks return EINA_TRUE, the rotary events are delivered to the upper parents of the activated object until there is 1 callback that consumes the rotary event or it reaches the top parent object.
+To set the object as the activated object, use the eext_rotary_object_event_activated_set() function.
+
+Providing the activated parameter with the EINA_TRUE value sets the object as the activated object. Providing the EINA_FALSE value deactivates the object. Since there is only 1 object which is the activated object, if an object is set as the activated object, the previously activated object is deactivated and becomes a normal object. An activated signal named rotary,activated is sent when an object is set as the activated object, and the rotary,deactivated signal is sent when an object is deactivated.
 
-To delete a registered event in the EFL Extension, use the following function:
--void *eext_object_event_callback_del(Evas_Object *obj, Eext_Callback_Type type, Eext_Event_Cb);
+You can register callbacks for activated or deactivated signals with the evas_object_smart_callback_add() function.
 
-The EFL Extension also provides other convenient functions to work with the Menu and Back keys for popup, ctxpopup, naviframe, and entry widgets.
+For more information, see the Evas smart callback function (in mobile and wearable applications).
   
+

diff --git a/org.tizen.guides/html/native/ui/efl_n.htm b/org.tizen.guides/html/native/ui/efl_n.htm index 4bd7423..918ff5d 100644 --- a/org.tizen.guides/html/native/ui/efl_n.htm +++ b/org.tizen.guides/html/native/ui/efl_n.htm @@ -14,9 +14,9 @@ -

+ @@ -35,11 +35,11 @@

The UI API provides the functionality to create and manage your application user interface. The heart of the Tizen application UI is the native UI framework, which consists of the Enlightenment Foundation Libraries (EFL).

Tizen provides the functionality to create and manage your application user interface. The heart of the Tizen application UI is the native UI framework, which consists of the Enlightenment Foundation Libraries (EFL).

Figure: EFL

EFL

UI design with EFL consists of the following main parts:

@@ -55,7 +55,7 @@

The Edje library is part of EFL, and provides APIs for theming a Tizen application, by writing EDC file. EDC programming supports part positioning, resizing, and animations.

Elementary -

The Elementary library is part of EFL, and provides the basic toolkit for window and layout management, along with the UI and container widgets for the user interface. You can manage the widgets and their focus on the screen, as well as create customizations.

The Elementary library is part of EFL, and provides the basic toolkit for window and layout management, along with the UI and container components for the user interface (in mobile and wearable applications). You can manage the UI components and their focus on the screen, as well as create customizations.

@@ -65,14 +65,14 @@

Tizen supports various methods to create animations and effects in your application.

Event handling and main loop -

The user interface relies on callbacks, designed to react to EFL events generated by the system or the user. You can handle various events, from low-level Ecore system events to Evas smart object events that happen on object collections.

The Ecore library provides main loop abstraction that gets you data when it is available and sends you events. You can manage the main loop and use threads with the Ecore main loop.

The user interface relies on callbacks designed to react to EFL events generated by the system or the user. You can handle various events, from low-level Ecore system events to Evas smart object events that happen on object collections.

The Ecore library provides a main loop abstraction that gets you data when it is available and sends you events. You can manage the main loop and use threads with the Ecore main loop.

Font settings

Tizen supports various methods to change the font of your application to another system default font or your own font.

Scalability -

Elementary provides a way to scale widgets in order to be comfortably used with a finger make text more readable.

Elementary provides a way to scale UI components (in mobile and wearable applications) in order to be comfortably used with a finger and to make the text more readable.

@@ -85,13 +85,13 @@

The EFL are a set of layered libraries, as shown in the following diagram:

Figure: EFL layers

EFL layers

When you create a basic EFL application, you use the following main libraries as a basis:

Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life cycle of a view, and add widgets. The full list of widgets that can be used in Tizen can be found in Using Widgets.
Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in Edje and Customizing Widgets.
Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in Using UI Components (in mobile and wearable applications).
Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in Edje and Customizing UI Components.
Ecore is the library which manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in the Main Loop guide.
Evas is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in Rendering Concept and Method in Evas. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, calculate minimum drawing calls needed to get the job done, and so on.
Eina is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in Using Data Types.

Before writing an application, you should already have an answer to the following question: What is an application? An application is a process launched by the user. Every application has at least one window for presenting its content. Users can interact with the content through events. Different sources of events can modify the life cycle of the application. The application may receive data from a network connection, and it may also receive touch and key events. From the computer's point of view, an application is a collection of code that reacts to events and displays content on the screen. Elementary bridges this divide between the user and the code.

Elementary provides a variety of pre-built UI components, such as layout objects and widgets, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.

Elementary provides a variety of pre-built UI components, such as layout objects and components, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.

There are three main groups of objects provided by Elementary:

Widgets: These are the widgets with which you build your application UI.
Containers: These are the containers that hold the widgets.
UI components: These are the components with which you build your application UI.
Containers: These are the containers that hold the components.
Infrastructure: These are the modules that deal with Elementary as a whole.

EFL Hello World Tutorial shows you how to develop your first application with Elementary and the EFL.

The Hello World example shows you how to develop your first application with Elementary and the EFL.

Most of the time, your application has to manage multiple views. The easiest way to handle them with the EFL is to create a naviframe object. This object is a container. At first, it is used to contain the pages your application is composed of. Every Tizen application can use this top-layer object to facilitate navigation. More details can be found in Naviframe Tutorial.

Another interesting object that has to be present in every application is the conformant object. Conformant is a container widget that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.

Another interesting object that has to be present in every application is the conformant object. Conformant is a container component that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.

Figure: Basic EFL application structure

Basic EFL application structure

In Tizen, the life cycle of an application is handled by appcore. Appcore is a dedicated library developed for Tizen that provides a set of functions for handling the application life cycle. For example, appcore is responsible for sending the correct signals when the application is created, when the battery is low, when the application is sent to the background, and when the screen is rotated.

You can see appcore in action in Application Framework Tutorial.

You can see appcore in action in Handling the Application Fundamentals.

Content

Notification Window
Screenshot

The Notification Window API allows you to set and get the notification level of the notification window (which is of the EFL window type):

The EFL UTIL API allows you to set and get the notification level of the notification window (which is of the EFL window type):

efl_util_set_notification_window_level()
efl_util_get_notification_window_level()

Figure: Window layers

Window layers

Each window is set to a specific layer according to its type or properties. Most application windows belong to the normal layer. However, in case of an important alarm or other information crucial to the user, you can set the window to belong to the notification layer. This ensures that the user notices the information immediately, because the window belonging to the notification layer is always shown above the windows in the normal layer.

Figure: Notification levels

Notification levels

The following code snippets shown how to make a notification window with a higher level.

The Screen Shot API allows you to get the screen image to the user.

The EFL UTIL SCREENSHOT API (in mobile and wearable applications) allows you to get the screen image to the user.

First you must make the efl_util_screenshot_h structure and initialize the structure members with the efl_util_screenshot_initialize() function. To take the actual screenshot, create screen capture data and return it to the tbm_surface handler with the efl_util_screenshot_take_tbm_surface() function.

When no longer needed, remember to free the efl_util_screenshot_h structure with the efl_util_screenshot_deinitialize() function.

The Input Generator API allows you to generate input events (such as key and touch events).

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.

+ diff --git a/org.tizen.guides/html/native/ui/eina_tools_n.htm b/org.tizen.guides/html/native/ui/eina_tools_n.htm index 7bc0ac0..1d93570 100644 --- a/org.tizen.guides/html/native/ui/eina_tools_n.htm +++ b/org.tizen.guides/html/native/ui/eina_tools_n.htm @@ -14,9 +14,9 @@ -

Related Info

diff --git a/org.tizen.guides/html/native/ui/elementary_n.htm b/org.tizen.guides/html/native/ui/elementary_mn.htm similarity index 72% rename from org.tizen.guides/html/native/ui/elementary_n.htm rename to org.tizen.guides/html/native/ui/elementary_mn.htm index fd90395..d4e8f04 100644 --- a/org.tizen.guides/html/native/ui/elementary_n.htm +++ b/org.tizen.guides/html/native/ui/elementary_mn.htm @@ -10,11 +10,11 @@ - Elementary Widgets + Elementary -

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

Elementary widgets are built in a hierarchical fashion. The idea is to factorize as much code as possible between widgets that behave in a similar manner, so as to facilitate the creation of new widgets. The Elementary widgets that we will use inherit a lot of their code from the container widgets and the layout widget (a container widget that takes a standard Edje design file and wraps it very thinly). We can therefore use the container and layout functions on them. We can also use Elementary object functions on them, such as elm_object_part_content_set(), elm_object_part_content_get(), and elm_object_part_content_unset().

Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner, so as to facilitate the creation of new UI components. The Elementary UI components that we will use inherit a lot of their code from the container UI components and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). We can therefore use the container and layout functions on them. We can also use Elementary object functions on them, such as elm_object_part_content_set(), elm_object_part_content_get(), and elm_object_part_content_unset().

This programming guide does not describe the container widgets. More information about containers can be found in Container Widgets.

This programming guide does not describe the container components. More information about containers can be found in Containers.

Generally, an Elementary widget can be added with the elm_[widget_name]_add() function, which returns an Evas object (Evas_Object*). The Evas object is then be passed to the functions that are used to configure the widget.

Generally, an Elementary UI component can be added with the elm_[UI_component_name]_add() function, which returns an Evas object (Evas_Object*). The Evas object is then be passed to the functions that are used to configure the UI component.

At the end of your application, the elm_shutdown() function takes care of freeing the allocated Elementary objects, so there is no need to separately deallocate widgets.

At the end of your application, the elm_shutdown() function takes care of freeing the allocated Elementary objects, so there is no need to separately deallocate UI components.

@@ -69,7 +84,7 @@ int main(int argc, char **argv) Note - An Elementary application should use the ELM_MAIN() macro, which already calls the elm_init() function. EFL Hello World Tutorial shows a basic Elementary application that uses this macro. + An Elementary application should use the ELM_MAIN() macro, which already calls the elm_init() function. The Hello World example shows a basic Elementary application that uses this macro. @@ -78,7 +93,7 @@ int main(int argc, char **argv)

Objects created using Elementary are always of type Evas_Object*. This means that Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.

Since an Elementary object can take up a lot of memory, the Elm_Object_Item type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid widget, and save memory. Using the Elm_Object_Item type, an Elementary widget can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, Elm_Object_Item is bigger than expected, but it is still a good idea to use it.

Since an Elementary object can take up a lot of memory, the Elm_Object_Item type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid component, and save memory. Using the Elm_Object_Item type, an Elementary UI component can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, Elm_Object_Item is bigger than expected, but it is still a good idea to use it.

@@ -98,7 +113,7 @@ int main(int argc, char **argv)

Using the elm_object_signal_callback_add() function, this callback can be registered on a signal coming from an Elementary widget's theme. The callback has nothing to do with input events (keyboard or mouse).

Using the elm_object_signal_callback_add() function, this callback can be registered on a signal coming from an Elementary UI component's theme. The callback has nothing to do with input events (keyboard or mouse).

@@ -135,11 +150,11 @@ int main(int argc, char **argv)

char *profile = elm_config_profile_get();

An Elementary configuration allows you to configure widget scaling both in terms of interactive areas and readable areas. For more information about widget scaling, see Scaling Widgets.

An Elementary configuration allows you to configure UI component scaling both in terms of interactive areas and readable areas. For more information about UI component scaling, see Scaling UI Components.

Setting the global scaling factor to 2.0 will double the size of all scalable widgets:

Setting the global scaling factor to 2.0 will double the size of all scalable UI components:

elm_config_scale_set(2.0);

@@ -166,9 +181,9 @@ elm_config_cache_edje_collection_cache_size_set(500);

Elementary uses Edje to theme its widgets. Edje provides a default theme for each widget. This theme can be changed per application using the ELM_THEME environment variable, or it can be modified globally with the elementary_config utility.

Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component. This theme can be changed per application using the ELM_THEME environment variable, or it can be modified globally with the elementary_config utility.

When you need custom styles, use extensions. Extensions allow you to write styles for specific widgets. Once set, the extension will completely replace the default theme of the widget.

When you need custom styles, use extensions. Extensions allow you to write styles for specific UI components. Once set, the extension will completely replace the default theme of the UI component.

@@ -176,16 +191,16 @@ elm_config_cache_edje_collection_cache_size_set(500); - +

Note
When developing an extension, to respect the signals emitted and the elements that need to be in place, it is important to know how the widget is themed. If something is missing from the extension, it can break the widget's behavior.	When developing an extension, to respect the signals emitted and the elements that need to be in place, it is important to know how the UI component is themed. If something is missing from the extension, it can break the UI component's behavior.

The elm_theme_extension_add() function is used to add the new extension to the list of Elementary themes. The style can then be applied to the widget with the elm_object_style_set() function.

The elm_theme_extension_add() function is used to add the new extension to the list of Elementary themes. The style can then be applied to the UI component with the elm_object_style_set() function.

Overlay is another solution to modify Elementary themes. It can replace the look of all widgets by overriding the default styles. As with extensions, it is up to you to write the correct overlay theme for a widget. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. With overlays, it is therefore possible to replace the default view so that every widget is affected. This is very similar to setting the theme for the whole application, and will probably clash with end user options. It also runs the risk of none-matching styles across the application. Unless you have a very good reason to use them, avoid overlays. An overlay can be added with the elm_theme_overlay_add() function. It can be removed with the elm_theme_overlay_del() function.

Overlay is another solution to modify Elementary themes. It can replace the look of all UI components by overriding the default styles. As with extensions, it is up to you to write the correct overlay theme for a UI component. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. With overlays, it is therefore possible to replace the default view so that every UI component is affected. This is very similar to setting the theme for the whole application, and will probably clash with end user options. It also runs the risk of none-matching styles across the application. Unless you have a very good reason to use them, avoid overlays. An overlay can be added with the elm_theme_overlay_add() function. It can be removed with the elm_theme_overlay_del() function.

For more information about widget theme customization, see Customizing Widgets.

For more information about UI component theme customization, see Customizing UI Components.

@@ -202,7 +217,7 @@ elm_config_cache_edje_collection_cache_size_set(500); -

Elementary also supports focus chains, which allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the widgets were added to the code. It is also possible to define custom focus chains when needed.

Elementary also supports focus chains, which allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components were added to the code. It is also possible to define custom focus chains when needed.

To define a custom focus chain, create an Eina_List, and add the Elementary objects to it in the desired focus order. After you have inserted all the objects to the Eina_List, use the elm_object_focus_custom_chain_set() function to set this list as the custom focus chain of the parent object (here container_object).

@@ -219,7 +234,7 @@ elm_object_focus_custom_chain_set(container_object, list);

Use the elm_object_focus_next() function to programmatically cycle through the focus chain.

For detailed information about focus, see Managing Widget Focus.

For detailed information about focus, see Managing UI Component Focus.

We can show a highlight on the focused object:

@@ -238,7 +253,7 @@ elm_config_glayer_double_tap_timeout_set(0.5);

An Elementary configuration provides several functions for configuring scrolling in widgets.

An Elementary configuration provides several functions for configuring scrolling in UI components.

You can enable bouncing, which makes the scroller bounce when it reaches its viewport's edge during scrolling:

@@ -262,7 +277,7 @@ elm_config_scroll_thumbscroll_threshold_set(20);

Long press events can be configured using the elm_config API. Here, we get the current timeout before a long press event happens and increase it by 1 second:

Long press events can be configured using the Elementary Config API. Here, we get the current timeout before a long press event happens and increase it by 1 second:

// Get the long press timeout
 double lp_timeout = elm_config_longpress_timeout_get();
@@ -272,13 +287,13 @@ elm_config_longpress_timeout_set(lp_timeout + 1.0);

The duration after which a tooltip is shown can be configured through the elm_config API. Here, we set the delay to 2 seconds:

The duration after which a tooltip is shown can be configured through the Elementary Config API. Here, we set the delay to 2 seconds:

elm_config_tooltip_delay_set(2.0);

The password show last feature enables users to view the last input entered for a few seconds before it is masked. The following functions allow you to set this feature in the password mode of the entry widget and to change the duration over which the input has to be visible.

The password show last feature enables users to view the last input entered for a few seconds before it is masked. The following functions allow you to set this feature in the password mode of the entry component and to change the duration over which the input has to be visible.

First, we enable the password show last feature:

@@ -290,7 +305,7 @@ elm_config_longpress_timeout_set(lp_timeout + 1.0);

We can use elm_config to set the rendering engine that Elementary will use to draw the windows. The following rendering engines are supported:

We can use the Elementary Config API to set the rendering engine that Elementary will use to draw the windows. The following rendering engines are supported:

"software_x11"

Selection behavior can be set to be cleared when the entry widget is unfocused:

Selection behavior can be set to be cleared when the entry component is unfocused:

elm_config_selection_unfocused_clear_set(EINA_TRUE);

Elementary allows UI mirroring both on a single object and on the entire UI. If activated with the elm_object_mirrored_set() function, an Elementary widget will display as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the widget are mirrored. Text is not mirrored.

Elementary allows UI mirroring both on a single object and on the entire UI. If activated with the elm_object_mirrored_set() function, an Elementary UI component will display as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.

The default mirror mode of widgets can be set with elm_config. Here, we activate the mirror mode by default:

The default mirror mode of UI components can be set with the Elementary Config API. Here, we activate the mirror mode by default:

elm_config_mirrored_set(EINA_TRUE);

Elementary

+ +

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

+ +

Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner, so as to facilitate the creation of new UI components. The Elementary UI components that we will use inherit a lot of their code from the container UI components and the layout components (a container component that takes a standard Edje design file and wraps it very thinly). We can therefore use the container and layout functions on them. We can also use Elementary object functions on them, such as elm_object_part_content_set(), elm_object_part_content_get(), and elm_object_part_content_unset().

+ +

This programming guide does not describe the container components. More information about containers can be found in Containers.

+ +

At the end of your application, the elm_shutdown() function takes care of freeing the allocated Elementary objects, so there is no need to separately deallocate UI components.

+ +

+ +

A minimal Elementary application looks like this:

+ +

#include <Elementary.h>
+int main(int argc, char **argv)
+{
+   elm_init(argc, argv);
+   elm_run();
+   elm_shutdown();
+
+   return 0;
+}

+ +

First of all, before using the Elementary library, it has to be initialized with the elm_init() function. The Elementary main loop can then be started with the elm_run() function, which will not return, and will constantly loop and run the event and processing tasks. A call to the elm_exit() function will tell the main loop to stop and return to the main function. At the end of the application, the elm_shutdown() function will clean up all resources that were allocated with Elementary in the main loop, and finally shut down Elementary.

+ + + + + + + + + + +

Note
An Elementary application should use the ELM_MAIN() macro, which already calls the elm_init() function. The Hello World example shows a basic Elementary application that uses this macro.

An Elementary configuration can be used to store the desired set of options that fits your application. Below, we list the different options that can be saved in an Elementary profile.

+ +

+ +

The elm_config_save() function provides a way to save the current Elementary configuration so that it can be reused in another session:

+ +

elm_config_save();

+ +

When a profile is selected, we can ask Elementary to reload its configuration with the saved profile:

+ +

elm_config_reload();

+ +

+ +

A profile is a set of preconfigured options that affects the entire look and feel of an application.

+ +

We can list the existing profiles:

+ +

Eina_List *list = elm_config_profile_list_get();

+ +

We can set a particular profile:

+ +

elm_config_profile_set("myprofile");

+ +

We can get the current profile:

+ +

char *profile = elm_config_profile_get();

+ +

+ +

Setting the global scaling factor to 2.0 will double the size of all scalable UI components:

+ +

elm_config_scale_set(2.0);

+ +

We can also set the finger size:

+ +

elm_config_finger_size_set(1.5);

+ +

+ +

We can enable the globally configured cache flush, and we can then set the flush interval to 60 seconds:

+ +

elm_config_cache_flush_enabled_set(EINA_TRUE);
+elm_config_cache_flush_interval_set(60);

+ +

We can configure the font cache size to 500 bytes and the image cache size to 5 000 000 bytes:

+ +

elm_config_cache_font_cache_size_set(500);
+elm_config_cache_image_cache_size_set(5000000);

+ +

Finally, we can set the Edje collection cache size and the Edje file cache size:

+ +

elm_config_cache_edje_file_cache_size_set(500);
+elm_config_cache_edje_collection_cache_size_set(500);

+ +

+ +

When you need custom styles, use extensions. Extensions allow you to write styles for specific UI components. Once set, the extension will completely replace the default theme of the UI component.

+ + + + + + + + + + +

Note
When developing an extension, to respect the signals emitted and the elements that need to be in place, it is important to know how the UI component is themed. If something is missing from the extension, it can break the UI component's behavior.

+ +

The elm_theme_extension_add() function is used to add the new extension to the list of Elementary themes. The style can then be applied to the UI component with the elm_object_style_set() function.

+ +

For more information about UI component theme customization, see Customizing UI Components.

+ +

+ +

When an Elementary object has the focus, input events are directly passed to that object in the window of the application. The focused object can also change its decoration to show the user where the focus is. The focus can be set to an Elementary object at any time with the elm_object_focus_set() function. This will take the focus away from the previous focused object and give the focus to the new object. In an Elementary application, only one object can have the focus at a time. It is also possible to make an object unfocusable with the elm_object_focus_allow_set() function, so that the object will never take the focus.

+ + + + + + + + + + +

Note
Only visible objects can be focused.

+ +

Eina_List *obj_list = NULL;
+
+list = eina_list_append(list, obj1); 
+list = eina_list_append(list, obj4);
+list = eina_list_append(list, obj2); 
+list = eina_list_append(list, obj3);
+
+elm_object_focus_custom_chain_set(container_object, list);

+ +

Use the elm_object_focus_custom_chain_unset() function to remove the custom focus chain and use the default focus chain instead.

+ +

Use the elm_object_focus_next() function to programmatically cycle through the focus chain.

+ +

For detailed information about focus, see Managing UI Component Focus.

+ +

We can show a highlight on the focused object:

+ +

elm_config_focus_highlight_enabled_set(EINA_TRUE);

+ +

We can also activate an animation when the focus shifts from one object to another:

+ +

elm_config_focus_highlight_animate_set(EINA_TRUE);

+ +

+ +

We can configure the duration of the long tap and double tap events on gesture layer objects. Here, we set the duration to 500 ms:

+ +

elm_config_glayer_long_tap_start_timeout_set(0.5);
+elm_config_glayer_double_tap_timeout_set(0.5);

+ +

+ +

An Elementary configuration provides several functions for configuring scrolling in UI components.

+ +

You can enable bouncing, which makes the scroller bounce when it reaches its viewport's edge during scrolling:

+ +

elm_config_scroll_bounce_enabled_set(EINA_TRUE);

+ +

You can control the inertia of the bounce animation. Here, the inertia is set to 0.5:

+ +

elm_config_scroll_bounce_friction_set(0.5);

+ +

You can also set the friction for a page scroll, include animations, and zoom animations.

+ +

You can use the elm_config_scroll_thumbscroll_enabled_set() function to set the scroller to be draggable. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.

+ +

Here, we set the scroller to be draggable, and we set the number of pixels one should travel while dragging the scroller's view to actually trigger scrolling to 20 pixels:

+ +

// Set the scroller to be draggable
+elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
+
+// Set the thumbscroll threshold to 20 pixels
+elm_config_scroll_thumbscroll_threshold_set(20);

+ +

+ +

Long press events can be configured using the Elementary Config API. Here, we get the current timeout before a long press event happens and increase it by 1 second:

+ +

// Get the long press timeout
+double lp_timeout = elm_config_longpress_timeout_get();
+
+// Increase it by 1 second
+elm_config_longpress_timeout_set(lp_timeout + 1.0);

+ +

+ +

The duration after which a tooltip is shown can be configured through the Elementary Config API. Here, we set the delay to 2 seconds:

+ +

elm_config_tooltip_delay_set(2.0);

+ +

+ +

The password show last feature enables users to view the last input entered for a few seconds before it is masked. The following functions allow you to set this feature in the password mode of the entry component and to change the duration over which the input has to be visible.

+ +

First, we enable the password show last feature:

+ +

elm_config_password_show_last_set(EINA_TRUE);

+ +

Then, we set the visibility timeout to 5 seconds:

+ +

elm_config_password_show_last_timeout_set(5.0);

+ +

+ +

We can use the Elementary Config API to set the rendering engine that Elementary will use to draw the windows. The following rendering engines are supported:

+ +

"software_x11"
"fb"
"directfb"
"software_16_x11"
"software_8_x11"
"xrender_x11"
"opengl_x11"
"software_gdi"
"software_16_wince_gdi"
"sdl"
"software_16_sdl"
"opengl_sdl"
"buffer"
"ews"
"opengl_cocoa"
"psl1ght"

+ +

Here, we set the engine to "opengl_x11":

+ +

elm_config_engine_set("opengl_x11");

+ +

+ +

When the access mode is active, information about an Elementary object is read when the object receives an EVAS_CALLBACK_MOUSE_IN event. Here, we activate the access mode:

+ +

elm_config_access_set(EINA_TRUE);

+ +

+ +

Selection behavior can be set to be cleared when the entry component is unfocused:

+ +

elm_config_selection_unfocused_clear_set(EINA_TRUE);

+ +

+ +

The default mirror mode of UI components can be set with the Elementary Config API. Here, we activate the mirror mode by default:

+ +

elm_config_mirrored_set(EINA_TRUE);

+ +

+ +

We can also set the frames per second (FPS) value for ecore_animator_frametime and edje_frametime calculations. Here, we set the FPS to 60:

+ +

elm_config_fps_set(60.0);

+ + + + +

External Output Manager (EOM)

EOM

External Output Manager(EOM) is a module to control external output devices.

Until Tizen 2.3, Devicemgr(private module) is used for external output. But Devicemgr has some problems.

- Devicemgr problems

1. Cannot know video-only mode start and stop.

2. Doesn't have method to notify to application about external output informations.

3. Application cannot display specific images to external output.)

So module for external output is replaced to EOM from Tizen 2.4. EOM fixes devicemgr's problems and manages all convergence scenarios of external output.

EOM is a module of enlightenment. And EOM has X and Walyland backend.

EOM has two modes. One is Mirror mode, the other is Presentation mode.

Figure: EOM mode

Window layers

Mirror mode is default mode. So if any application doesn't set presentation mode, Mirror mode will work by EOM module when external output device is connected.

Presentation mode can be set by application. If application wants to display it's own image or video to external output device, application must use presentation mode.

The External Output Manager (EOM) is a module for controlling the external output devices.

The main features of the EOM API include:

Managing modes +

The mirror mode is the default mode. If a mode is not specified, the EOM uses the mirror mode when an external output device is connected. + +
Figure: Mirror mode
+
+ +

The presentation mode can be set by an application. If the application wants to display an image or video only in an external output device, the presentation mode must be used. +

Figure: Presentation mode

Presentation mode

+ +

You must use the EOM attributes to set the presentation mode by defining the EOM priority. With these attributes, you can display a fullscreen window on the external output device.

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

Table: Presentation mode attributes
Attribute	Description
EOM_OUTPUT_ATTRIBUTE_NORMAL	This priority can be set, if the current priority is none (mirror mode) or NORMAL. + This priority cannot be set, if the current priority is EXCLUSIVE_SHARE or EXCLUSIVE. +
EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE	This priority can be set, if the current priority is none (mirror mode), NORMAL, or EXCLUSIVE_SHARE. + This priority cannot be set, if the current priority is EXCLUSIVE. +
EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE	This priority can be set, if the current priority is none (mirror mode), NORMAL, or EXCLUSIVE. + This priority cannot be set, if the current priority is EXCLUSIVE_SHARE. +

In most applications, the EOM_OUTPUT_ATTRIBUTE_NORMAL priority is the best option.

Applications have to use EOM attributes to set presentation mode.

There are three priorities of EOM attribute. The meaning of set attribute is the application wants to display a window with fullscreen size on the external output.

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

- Table: Attribute for presentation mode -
Attribute	Description
EOM_OUTPUT_ATTRIBUTE_NORMAL	Can set normal if none(mirror mode) or normal attribute state
EOM_OUTPUT_ATTRIBUTE_NORMAL	Cannot set normal if exclusive_share or exclusive attribute state
EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE	Can set exclusive_share if none(mirror mode), normal or exclusive_share attribute state
EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE	Cannot set exclusive_share if exclusive attribute set state
EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE	Can set exclusive if none(mirror mode), normal or exclusive_share attribute state
EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE	Cannot set exclusive if exclusive attribute set state

Receiving notifications +
The EOM can send a notification event to the application. The EOM tracks several changes, such as additions and removals in the external output, mode changes, and attribute state changes, and can notify the application about them.
Getting information about the external output device +
You can get information about the external output device by using various functions. For example, to get the ID of the external output device, use the eom_get_eom_output_ids() function, and to get attribute information, use the eom_get_output_attribute() function.
+
Setting the external output +
The application can set information (such as attributes and window size) in the EOM.
+
Use the eom_set_output_attribute() function to set the presentation mode, and use the eom_set_output_window() function to set the window to the external output with the best resolution of the external output device.
+

EOM can send notification event to application. Eom checks several changes(external output add and remove, mode change, attribute state change) and sends notification events to EOM client.

So application(EOM client) can get the status of external output. EOM client has to register callback functions to get information.

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

- Table: EOM Notify event -
Callback Type	Description	Function
eom_output_add_cb	Send event when the external output is connected	eom_set_output_added_cb, eom_unset_output_added_cb
eom_output_remove_cb	Send event when the external output is disconnected	eom_set_output_removed_cb, eom_unset_output_removed_cb
eom_mode_change_cb	Send event when the EOM output mode is changed	eom_set_mode_changed_cb, eom_unset_mode_changed_cb
eom_attribute_change_cb	Send event when the state of the EOM output attribute is changed	eom_set_attribute_changed_cb, eom_unset_attribute_changed_cb

By using below APIs, application can get information of external output device from EOM.

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

- Table: APIs for get external output device information -
Function	Description
eom_get_eom_output_ids	Gets the ID of external output devices
eom_get_output_type	Gets the connection type of external output (HDMI, Virtual, VGA, etc)
eom_get_output_mode	Gets the mode of external output (NONE, MIRROR, PRESENTATION)
eom_get_output_attribute	Gets the attribute information (NORMAL, EXCLUSIVE_SHARE, EXCLUSIVE)
eom_get_output_attribute_state	Gets the attribute state information (NONE, ACTIVE, INACTIVE, LOST)
eom_get_output_resolution	Gets the best resolution of external output device
eom_get_output_physical_size	Gets the physical size of external output device

+ -

By using below APIs, application can set information to EOM.

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

- Table: APIs for set information -
Function	Description
eom_set_output_attribute	Sets to presentation mode by setting attribute to EOM
eom_set_output_window	Sets window to the external output best resolution of external output device

diff --git a/org.tizen.guides/html/native/ui/evas_n.htm b/org.tizen.guides/html/native/ui/evas_n.htm index fa9260c..97f7adc 100644 --- a/org.tizen.guides/html/native/ui/evas_n.htm +++ b/org.tizen.guides/html/native/ui/evas_n.htm @@ -14,9 +14,9 @@ -

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

Evas optimizes the rendering pipeline to minimize effort in redrawing changes made to the canvas and so takes this work out of the programmers hand, saving a lot of time and energy.

It is designed to work on embedded systems all the way to large and powerful multi-cpu workstations. It can be compiled to only have the features you need for your target platform if you so wish. It has several display back-ends, allowing it display on several display systems, making it portable for cross-device and cross-platform development.

Evas is not a widget set or a widget toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.

Evas is not a UI component set or a UI component toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.

It is not dependent or aware of main loops, input or output systems. Input must be polled from various sources and fed to Evas. It does not create windows or report windows updates to your system, but draws the pixels and reports to the user the areas that are changed. These operations are ready to be used in Ecore, particularly in Ecore_Evas wrapper/helper set of functions.

@@ -60,7 +65,7 @@ scale bitmap_handle to size 100 x 100; draw image bitmap_handle at position (10, 30);

The series of commands is executed by the windowing system and the results are typically displayed on the screen. Once the commands are executed, the display system does not know how to reproduce this image again, and has to be instructed by the application on how to redraw sections of the screen if needed. Each successive command is executed as instructed by the application and either emulated by software or sent to the graphics hardware on the device to be performed.

The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of widget sets, custom display widgets and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.

The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of UI component sets, custom display components and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.

For example, if in the scene below, the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the "expose event"). Then the programmer calculates manually the updates and repaints it again.

 Redraw from position (0, 0) to position (50, 50):
@@ -101,12 +106,12 @@ render scene;
 
 This looks longer, but when the display needs to be refreshed or updated, the programmer only moves, resizes, shows, hides etc. the objects that need to change. The programmer thinks at the object logic level, and the canvas software does the rest of the work, figuring out what changed in the canvas since it was last drawn, how to most efficiently redraw the canvas and its contents to reflect the current state, and doing the actual drawing of the canvas.
 This allows the programmer think in a more natural way when dealing with a display, and saves time and effort of working out how to load and display images, to render given the current display system etc. Since Evas is portable across different display systems, this gives the programmer the ability to port and display the code on different display systems with little work.
-Evas is a display system somewhere between a widget set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.
+Evas is a display system somewhere between a UI component set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.
 
 For more information on the UI rendering modes (immediate and retained), see UI Rendering Mode.
 
 Evas Object 
-An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of widgets, is an Evas object.
+An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of UI components, is an Evas object.
 
 Primitive Renderable Objects
 Primitive objects are the base upon which to build a complex interface: rectangles, lines, polygons, images, textblocks, and texts.
@@ -123,7 +128,7 @@ render scene;
 A common requirement of Evas programs is to have a solid color background, which can be accomplished with the following code.
 Evas_Object *bg = evas_object_rectangle_add(evas_canvas);
 
-//Here we set the rectangles red, green, blue and opacity levels
+// Here we set the rectangles red, green, blue and opacity levels
 evas_object_color_set(bg, 255, 255, 255, 255); // opaque white background
 evas_object_resize(bg, WIDTH, HEIGHT); // covers full canvas
 evas_object_show(bg);
@@ -189,7 +194,7 @@ evas_object_show(text);
 
 
 Primitive Smart Objects
-A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object's user. They could be, for example, a group of objects that move together, or implementations of whole complex UI widgets, providing some intelligence and extension to simple Evas objects.
+A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object's user. They could be, for example, a group of objects that move together, or implementations of whole complex UI components, providing some intelligence and extension to simple Evas objects.
 
 Primitive Container Objects
 A container is a Smart object that holds children Evas objects in a specific fashion.
@@ -291,7 +296,7 @@ evas_object_table_pack(table, rect, 2, 3, 1, 1);
 The image formats that Evas supports include bmp, edj, gif, ico, jpeg, pmaps, png, psd, svg, tga, tiff, wbmp, webp, and xpm.
 
 	Figure: Evas image loader 
-	  
+	  
 
 Evas Object Image Functions
 
@@ -362,20 +367,20 @@ int main(int argc, char **argv)
 }
 
 	Figure: Image object display 
-	  
+	  
   
 Image Scaling
 Users can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the evas_object_image_fill_set() function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.
 
 	Figure: Image scaling 
-	  
+	  
 
 	
-	 
-	 
-	 
+	 
+	 
+	 
@@ -448,8 +453,8 @@ int main(int argc, char **argv)
   
-   
-   
+   
+   
@@ -523,8 +528,8 @@ evas_object_image_data_update_add(image, 180, 100, 50, 50);
 evas_object_image_data_update_add(image, 85, 200, 160, 80);
 
  
- 	        Figure: Partial image update 
-    
+  Figure: Partial image update 
+  
The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the evas_object_image_save() function.
 
@@ -610,8 +615,8 @@ int main(int argc, char **argv)
   
-   
-   
+   
+   
@@ -815,7 +820,7 @@ evas_map_free(m);
 The immediate mode is the most commonly used in graphics toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the portion of the client area that is invalidated.
Figure: Immediate mode 
- 
+
The application commands any drawing issues as it needs, and the display system draws some GUIs. After the drawing is done, it appears in the destination. This mode allows you to have a exact control over the render cycles. However, if the draw commands are misused, unnecessary drawing can be performed or drawing never happen at all.
The following example explains the common usage of the immediate mode: 
@@ -856,7 +861,7 @@ void update()
 A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated.
Figure: Retained mode 
- 
+
Since Evas works with the retained mode, there is no need to command any drawings. The following example shows how to write a GUI code with Evas for your application:
 
@@ -916,7 +921,7 @@ void update()
 Tizen Native applications work on the ecore main loop, and the loop goes on a few steps for every frame. Evas redraws some changes in the objects when the main loop goes to the idle enterer step. If there are no changes, Evas rendering is skipped. Otherwise, Evas calculates any changed portions of all display objects and redraws them.
Figure: Evas rendering in the main loop 
- 
+
To minimize the rendering, Evas tracks the states of all display objects, such as position, size, visibility, and color. Even if some of these states are changed but the object is hidden by other obscured objects, it is not redrawn. In other words, Evas draws only the necessary changes in the screen.
 
@@ -925,27 +930,27 @@ void update()
 In the first example, there is a blue-color background object (a sky-blue color rectangle) and a partially hidden cloud image object. Above them, there are a red and green rectangle, and the "Hello out there" text is printed on the green rectangle.
 
 Figure: Evas redrawing example 1 
-
 
+ 
 
 In the second example, some of the objects have moved (the cloud image is moved to right and the green rectangle is moved downwards).
 
 Figure: Evas redrawing example 2 
-
 
+ 
 
 As a result, the third example illustrates some regions that require updates.
 
 Figure: Evas redrawing example 3 
-
 
+ 
 
 Evas decides which portions are invalid and to be redrawn. The fourth example shows the cleaned portion of the screen, which is the redrawn area.
 Evas redraws the content only in the redrawn portions. 
 Figure: Evas redrawing example 4 
- 
+ 
 
 Finally, the fifth example shows how the screen is updated and the result is visible. 
 
 Figure: Evas redrawing example 5 
-
+
 
 If Evas worked in an immediate mode style, the application would need to calculate the changed areas themselves, adding extra work. With Evas, you can let Evas figure out the updates and you can yourself concentrate on the application and UI core and logic.
 
diff --git a/org.tizen.guides/html/native/ui/event_types_n.htm b/org.tizen.guides/html/native/ui/event_types_n.htm
index cd03d01..3838e2e 100644
--- a/org.tizen.guides/html/native/ui/event_types_n.htm
+++ b/org.tizen.guides/html/native/ui/event_types_n.htm
@@ -14,9 +14,9 @@
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -31,7 +31,15 @@
 		
 	Related Info
 		
-			Event and Effect Tutorials			
+			Event and Effect Tutorials
+			Ecore API for Mobile Native
+			Edje API for Mobile Native
+			Elementary API for Mobile Native				
+			Evas API for Mobile Native
+			Ecore API for Wearable Native
+			Edje API for Wearable Native
+			Elementary API for Wearable Native				
+			Evas API for Wearable Native			
 		
 	
 	
@@ -54,7 +62,7 @@
 
 
 Ecore events are used for low-level handling of events such as key presses, network connections, and communication with sub-processes.
-The low-level handling of key presses is particularly useful for shortcuts: instead of adding a signal handler to a specific graphical element, you can add one globally. This guarantees that no matter which widget is currently receiving events, the shortcut is caught.
+The low-level handling of key presses is particularly useful for shortcuts: instead of adding a signal handler to a specific graphical element, you can add one globally. This guarantees that no matter which UI component is currently receiving events, the shortcut is caught.
 Note that ecore events are also used to implement new graphical back-ends, but they are low-level and not useful for most applications.
 Ecore Events Useful for Shortcuts
 
@@ -349,14 +357,14 @@ elm_object_signal_callback_add(Evas_Object *obj, const char *emission, const cha
 
 
 Usual Usage for Parts Aggregated in Groups: with Layouts
-Most of the time, edje and elementary are used together. In particular, you can define a group in Edje and use it as a layout in Elementary. This enables doing the theming and object placement in Edje while benefiting from the higher-level functions of Elementary. This is achieved through layouts, which contain several parts and are explained in the Layout Container guide.
+Most of the time, edje and elementary are used together. In particular, you can define a group in Edje and use it as a layout in Elementary. This enables doing the theming and object placement in Edje while benefiting from the higher-level functions of Elementary. This is achieved through layouts, which contain several parts and are explained in the Layout guide (in mobile and wearable applications).
 Since there are several parts in a layout, it is not possible to use elm_object_signal_callback_add() and edje_object_signal_callback_add(), as they require a single emitter object. The solution is to use the dedicated function elm_layout_signal_callback_add(). Its prototype is shown below.
 void
 elm_layout_signal_callback_add(Evas_Object *obj, const char *emission, const char *source,
                                Edje_Signal_Cb func, void *data)
 
 
-elm_layout_signal_callback_add() works very similarly to the functions described in the previous section. The only difference is the type of the object in the first parameter. For elm_layout_signal_callback_add() it is a pointer to an Evas_Object, which is obtained through elm_layout_add() as described in the Layout Container guide. 
+elm_layout_signal_callback_add() works very similarly to the functions described in the previous section. The only difference is the type of the object in the first parameter. For elm_layout_signal_callback_add() it is a pointer to an Evas_Object, which is obtained through elm_layout_add() as described in the Layout guide (in mobile and wearable applications). 
 
   
 
diff --git a/org.tizen.guides/html/native/ui/events_effects_n.htm b/org.tizen.guides/html/native/ui/events_effects_n.htm
index a7e0b05..65010d8 100644
--- a/org.tizen.guides/html/native/ui/events_effects_n.htm
+++ b/org.tizen.guides/html/native/ui/events_effects_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -29,7 +29,8 @@
 		Related Info
 		
 			Event and Effect Tutorials	
-			UI API
+			Ecore API for Mobile Native
+			Ecore API for Wearable Native
 		
 	
 	
@@ -58,8 +59,8 @@
 Evas events are events on the graphical canvas as a whole. They are fairly low-level and mostly useful when drawing directly on the canvas.
 
 
-         Figure: Event types in the EFLs: Inner boxes are more specific than outer ones 
-  
+  Figure: Event types in the EFLs: Inner boxes are more specific than outer ones 
+  
   
        
 
@@ -82,8 +83,8 @@
 Events enable operations taking more than a few milliseconds' time to be executed outside of the mainloop, therefore not blocking UI redraws.
 Below is an illustration for the event flow that follows a click on the screen.
 
-         Figure: Event flow for a user click 
-  
+  Figure: Event flow for a user click 
+  
   
    
   Creating Animations and Effects
diff --git a/org.tizen.guides/html/native/ui/font_setting_n.htm b/org.tizen.guides/html/native/ui/font_setting_n.htm
index 5b555d5..3d1189a 100644
--- a/org.tizen.guides/html/native/ui/font_setting_n.htm
+++ b/org.tizen.guides/html/native/ui/font_setting_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -25,8 +25,10 @@
 		Related Info
 		
 			Font Setting Tutorial	
-			Edje Text class API	
-			Elementary Fonts API
+			Edje API for Mobile Native
+			Elementary API for Mobile Native
+			Edje API for Wearable Native
+			Elementary API for Wearable Native			
 			
 	
 	
@@ -36,14 +38,14 @@
   Font Setting 
 	
 
-Tizen provides various methods for setting fonts of the application text. Basically, all widgets have a default font, which can be changed according to the system settings.
+Tizen provides various methods for setting fonts of the application text. Basically, all UI components have a default font, which can be changed according to the system settings.
 
 The font handling methods include:
 
  
-   Setting the font for a widget using the Elementary Fonts API 
+   Setting the font for a UI component using the Elementary Fonts API (in mobile and wearable applications) 
    Setting the font using EDC
-   Changing the font and text size using the Edje Text class API 
+   
Changing the font and text size using the Edje Class: Text API (in mobile and wearable applications) 
    
    Certain words for text_class are reserved for the system default and used for applying the system setting about font and font size. To change the font on your textblock and text parts in the EDC according to the system setting, you can use the reserved words for the text class:
 
diff --git a/org.tizen.guides/html/native/ui/main_loop_n.htm b/org.tizen.guides/html/native/ui/main_loop_n.htm
index b8b96aa..7598bb6 100644
--- a/org.tizen.guides/html/native/ui/main_loop_n.htm
+++ b/org.tizen.guides/html/native/ui/main_loop_n.htm
@@ -14,9 +14,9 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
@@ -31,8 +31,11 @@
 		
 		Related Info
 		
-			UI Tutorials	
-			UI API
+			UI Framework Tutorials	
+			Ecore API for Mobile Native
+			Evas API for Mobile Native
+			Ecore API for Wearable Native
+			Evas API for Wearable Native			
 		
 	
 	
@@ -158,7 +161,7 @@ ecore_animator_timeline_add(5., my_anim_cb, my_data);
 
 
 Figure: Position maps 
- 
+ 
 
 Delete an animator using ecore_animator_del(animator). To delete the animator, it must still be running, that is, it has not returned a false value meaning that it cannot be called any more.
 
@@ -302,7 +305,7 @@ ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end, m
 When the rendering is done and all work finished, the main loop enters its idle state until the next loop. You can get functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called Ecore_Idle_Enterer, Ecore_Idle_Exiter, and Ecore_Idler.
 
 Figure: Idle loop 
- 
+ 
 
 Idle enterers, exiters, and idlers have the same prototype: Eina_Bool my_idler(void *data), receiving data, and returning ECORE_CALLBACK_RENEW or ECORE_CALLBACK_CANCEL to tell Ecore whether it wants to be called again or if its treatment is finished.
 
diff --git a/org.tizen.guides/html/native/ui/multiple_screens_n.htm b/org.tizen.guides/html/native/ui/multiple_screens_n.htm
index 278cc9a..cc63135 100644
--- a/org.tizen.guides/html/native/ui/multiple_screens_n.htm
+++ b/org.tizen.guides/html/native/ui/multiple_screens_n.htm
@@ -14,16 +14,27 @@
   
  
  
- 
+ 
 	
-		
+		 
 	
 	
 	
 	Content
 			
 			Key Concepts
-			Applying the Base Scale						
+			Applying the Base Scale
+			Scaling without the Base Scale			
+		
+	Related Info
+		
+			UI Framework Tutorials		
+			Edje API for Mobile Native
+			Elementary API for Mobile Native
+			Evas API for Mobile Native
+			Edje API for Wearable Native
+			Elementary API for Wearable Native
+			Evas API for Wearable Native			
 		
 	
 	
@@ -52,7 +63,7 @@
   The following figure illustrates a 50 px wide object in a 1280 px wide monitor. If the same object is displayed with not scaling in mobile environment, it looks very small. To show the object in mobile environment in the similar size as in the monitor, define the scale is 2.0, so that the object size is 100 px instead of 50 px.
   
   Figure: Scaling from desktop to mobile 
-     
+    
   
   Base Scale 
   The object scaling must be defined in the config.xml file of this application to show the application in a proper size in other devices. However, the scaling must be based on scale 1.0 or, if the application is based on another scale, this scale must be defined in the config.xml file. This predefined scale is called the "base scale".  
@@ -60,7 +71,7 @@
   The size of a scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object (on the left) with the size 10 is created in a device with scale 1.0, the size of the object is 20 in a device with scale 2.0, and 40 in a device with scale 4.0.
   
   Figure: Base scale 
-     
+    
   
   The middle object has a base scale 2.0. The following example shows its scaling in a device with scale 4.0:
   
@@ -88,7 +99,47 @@
    EDC 
    C code 
    
-  Setting the Base Scale in EDC 
+  
+  Calculating the Base Scale
+
+To get the base scale value of your own display, you must know the DPI of the display. Based on the display DPI, you can calculate the base scale, since it is basically proportional to the display DPI with the following formula:
+
++base_scale = (DPI / 90) * profile_factor
+
+The profile factor is the value for fitting the object size as a profile. The distance between the user eye and the display differs for each profile. This means that the object size must be different if the device display is changed.
+
+The following table lists the profile factors for various profiles.
+
+

 	
 	 
 	
 	
      evas_object_image_fill_set(obj, 50, 0, 300, 300)
Figure: Smooth scaling effects
   
   
   
   
    Smooth scaling enabled  
 
 
Figure: Blur effect
   
   
   
   
    Before
 
  
 
  
 
 
  
 
 
 
  
 
  
  
+
+
+
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+  
+ 
+ 
+ 
+ 
+ Table: Profile factorsProfile Profile factor
Wearable 0.4
Mobile 0.7
Desktop 1.0
+
+For example, if your display has 233 dpi and the platform uses the mobile profile, the base scale is calculated like this:
++1.8 = (233 / 90) * 0.7
+
+The base scale of the device is 1.8. If the application is made in the environment using 233 dpi and mobile profile, its base scale must be set to 1.8. For a desktop, the DPI is 90, and its base scale is 1.0.
+
+ 
+Setting the Base Scale in EDC 
   The application must specify the scale its base scale. The edje objects are scaled properly if the base scale is set in the collection of the edc file, as in the following example: 
   
   
@@ -136,6 +187,58 @@ evas_object_resize(object, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
  
   You can use ELM_SCALE_SIZE macro in any API related with setting objects sizes in Tizen native applications. 
   
+  Scaling without the Base Scale   
+
+In Tizen, each device has a scale value in proportion to the display. If scaling is enabled, the objects are drawn on the display by multiplying with the user-defined object size and the device scale. If the base scale is set, the objects are drawn by dividing the user-defined object size with the base scale and multiplying it by the device scale.
+
+If you use the scale feature without setting the base scale, the result is the same as if you set the base scale to 1.0. Then you do not need to care about the base scale variables, because the pixels roll like a virtual pixel. For example, if you set 1 pixel in 129 dpi without setting the base scale value, the 1 pixel before scaling is equivalent to 1 real physical pixel after scaling. In case of 233 dpi, it is the same with 1.8 pixels after scaling. 
+
+Always consider the pixel before scaling when defining the application UI, in order to ensure a proper UI display on the screen with a diversity of densities.
+
+int app_create(void *data)
+[ Conversion Formula ]
+Real physical pixel = (a pixel before scaling) x (dpi / 90) x 0.7
+ 
+Where  90 is the default DPI on a desktop and 0.7 is the mobile profile factor.
+
+The following table shows some examples.
+
+
+
+
+
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+  
+ 
+ 
+ 
+ 
+ 
+  
+ 
+ 
+ 
+ 
+ 
+  
+ 
+ 
+ 
+ 
+ 
+  
+  
+ Table: Pixel conversions Base Low-density device (such as WVGA) High-density device (such as HD)
DPI 129 233 306
A pixel before scaling 100 100 100
Real physical pixel 100 180 240
Actual base scale 1.0 1.8 2.4
+
+

diff --git a/org.tizen.guides/html/native/ui/preferences_n.htm b/org.tizen.guides/html/native/ui/preferences_n.htm new file mode 100644 index 0000000..0cc628d --- /dev/null +++ b/org.tizen.guides/html/native/ui/preferences_n.htm @@ -0,0 +1,686 @@ + + + + + + + + + + + + + UI Component Preferences + + + + + +

+ +

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

+ +

+ + +

Elementary UI components use the Edje library EDC themes to manage their look.

+ +

+ +

An Elementary theme is an Edje EDC file that contains groups composed of parts and programs. For more information about Edje, refer to the Edje guide.

+ +

+ +

Elementary UI components provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one UI component. For example, you can create a new style for a button component to change its appearance without modifying the default theme.

+ + + + + + + + + + +

Note
When creating a new style, knowledge of how each UI component is themed is required, because setting another style always replaces the entire group used by the UI component. Important signals and parts must be there for the object to behave properly.

+ +

When several styles are loaded in the current theme, you can set a different style to a specific UI component using the elm_object_style_set() function. It is also possible to see the current style with the elm_object_style_get() function.

+ +

The default theme specifies several styles for the button component. The code below shows how to set the "anchor" style of a newly created button component.

+ +

+Evas_Object *parent, *button;
+
+// Create a button object 
+button = elm_button_add(parent);
+
+// Set its style to "anchor""
+elm_object_style_set(button, "anchor");
+

+ +

+ +

Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:

overlays
extensions

+ +

When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the UI component, it looks at the extensions list.

+ +

+ +

An overlay can replace the look of all UI components by overriding the default style. If we create a new style called "default" for the button component and add it as an overlay, the Elementary uses the overlay for all button components overriding the default theme.

+ +

Here is how to add an overlay to your application's theme.

+ +

+elm_theme_overlay_add(NULL, "./theme_button.edj");
+

+ + + + + + + + + + +

Note
Here we assume that the "theme_button.edj" file only contains a new theme for the button component.

+ + + + + + + + + + +

Note
Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button components defined in the application. You must make sure that the "theme_button.edj" file reimplements everything that was previously defined in the default theme concerning the button component.

+ +

This is how to remove the previously added overlay to return to the default theme.

+ +

+elm_theme_overlay_del(NULL, "./theme_button.edj");
+

+ +

+ +

With extensions, we can write styles that we can apply to some UI components (not all of them) by using the elm_object_style_set() function.

+ +

The application adds a theme to the list of extensions with the following call.

+ +

+elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
+

+ + + + + + + + + + +

Note
Here we assume that the "theme_button_style_custom.edj" file contains a new button style called "custom".

+ +

This is how to use the new "custom" style on a button component.

+ +

+Evas_Object *parent, *button;
+
+// Create a button object 
+button = elm_button_add(parent);
+
+// Set its style to "custom" 
+elm_object_style_set(button, "custom");
+

+ + + + + + + + + + +

Note
When using elm_theme_extension_add or elm_theme_overlay_add to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the elm_theme_flush function to flush Elementary theme caches. Thus, the theme of all UI components that use the default theme is reloaded.

+ +

+ +

This is how to create a new theme object.

+ +

+Elm_Theme *new_theme = elm_theme_new();
+

+ +

This function creates an empty specific theme that only uses the default theme. It has its own private set of extensions and overlays (which are empty by default). Specific themes do not fall back to the themes of parent objects. They are not intended for this use.

+ +

This is how to apply this theme to a UI component and its children (a button, for example).

+ +

+// Create a button component 
+Evas_Object *button = elm_button_add();
+
+// Set the new theme to the button component 
+elm_object_theme_set(button, new_theme);
+

+ +

+ +

UI component themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see the Edje guide.

+ +

A new Edje style can be added for a UI component. The best way is to copy the existing "default" style, rename it, and update it to your needs.

+ +

+ +

As an example, we show how to create a new style for the check component. The aim is to update the background and the main pictures of this UI component with custom pictures.

+ +

The EDC source file concerning the check component (check.edc file) is composed of several groups.

+ +

+group 
+{
+   name: "elm/check/base/default";
+}
+
+group 
+{
+   name: "elm/check/base/toggle";
+}
+

+ +

Those two groups define two different styles for the check component (the "default" style and the "toggle" style).

+ +

We copy the group corresponding to the "default" style in a new file to create a new style called "custom". This new style is saved in the "check_custom.edc" file.

+ +

+group 
+{
+   name: "elm/check/base/custom";
+   // Here is the copy of the content of "default" style 
+}
+

+ +

In the new group ("elm/check/base/custom"), we have to find the parts we want to modify. Here, the appropriate parts are "bg" and "check" parts.

+ +

+part 
+{
+   name: "bg";
+   mouse_events: 0;
+   scale: 1;
+   description 
+   {
+      state: "default" 0.0;
+      rel1.offset: 1 1;
+      rel2.relative: 0.0 1.0;
+      rel2.offset: 1 -2;
+      align: 0.0 0.5;
+      min: 16 16;
+      max: 16 16;
+      aspect: 1.0 1.0;
+      aspect_preference: VERTICAL;
+      image 
+      {
+         normal: "check_base.png";
+         border: 5 5 5 5;
+         middle: 0;
+      }
+      fill.smooth: 0;
+   }
+}
+part 
+{
+   name: "check";
+   mouse_events: 0;
+   scale: 1;
+   description 
+   { 
+      state: "default" 0.0;
+      rel1 
+      {
+         to: "bg";
+         offset: 1 1;
+      }
+      rel2 
+      {
+         to: "bg";
+         offset: -2 -2;
+      }
+      visible: 0;
+      color: 255 255 255 255;
+      image.normal: "check.png";
+   }
+   description 
+   {
+      state: "visible" 0.0;
+      inherit: "default" 0.0;
+      visible: 1;
+   }
+   description 
+   {
+      state: "disabled" 0.0;
+      inherit: "default" 0.0;
+      visible: 0;
+      color: 128 128 128 128;
+   }
+   description 
+   {
+      state: "disabled_visible" 0.0;
+      inherit: "default" 0.0;
+      color: 128 128 128 128;
+      visible: 1;
+   }
+}
+

+ +

We do not detail all the options that can be modified here, but assume that the user is familiar with Edje and knows Edje basics.

+ +

Our custom pictures filenames are:

check_base_custom.png for the bg part
check_custom.png for the check part

+ +

We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.

+ +

+part 
+{
+   name: "bg";   
+   description 
+   {
+      state: "default" 0.0;
+
+      image 
+      {
+         normal: "check_base_custom.png";
+         border: 5 5 5 5;
+         middle: 0;
+      }
+                
+   }
+}
+part 
+{
+   name: "check";
+        
+   description 
+   {
+      state: "default" 0.0;
+            
+      image.normal: "check_custom.png";
+   }
+        
+}
+

+ + + + + + + + + + +

Note
Here, we assume that the custom images are the same size as the "default" images.

+ +

+ +

Once written, the check_custom.edc file is put in the /res/edje/. directory of the application project in the SDK.

+ +

When building the application, the SDK calls the Edje tools automatically to build the final check_custom.edj file. This file can be loaded from our application.

+ +

+ +

This is how to add the new theme file as an extension in the application.

+ +

+char edj_path[PATH_MAX] = {0, };
+
+// Get the full path of the edj file 
+app_get_resource("/edje/check_custom.edj", edj_path, (int)PATH_MAX);
+
+// Load check custom style as an extension 
+elm_theme_extension_add(NULL, edj_path);
+

+ +

Use the "custom" style on a new check component.

+ +

+Evas_Object *parent, *check;
+
+// Create a check object 
+check = elm_check_add(parent);
+
+// Set its style to "custom" 
+elm_object_style_set(check, "custom");
+

+ +

+ +

Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type TEXT are modified using the elm_object_part_set_text() function. The content of SWALLOW parts is updated using the elm_object_part_content_set() function.

+ +

+ +

In the previous example (the check component "default" style), there is a part called "elm.swallow.content" that is of the type SWALLOW.

+ +

+part 
+{
+   name: "elm.swallow.content";
+   type: SWALLOW;
+   scale: 1;
+   description 
+   {
+      state: "default" 0.0;
+      fixed: 1 0;
+      visible: 0;
+      align: 0.0 0.5;
+      rel1.to_x: "bg";
+      rel1.relative: 1.0 0.0;
+      rel1.offset: 1 1;
+      rel2.to_x: "bg";
+      rel2.offset: 1 -2;
+      rel2.relative: 1.0 1.0;
+   }
+   description
+   {
+      state: "visible" 0.0;
+      inherit: "default" 0.0;
+      fixed: 1 0;
+      visible: 1;
+      aspect: 1.0 1.0;
+      min: 16 16;
+   }
+   description 
+   {
+      state: "disabled" 0.0;
+      inherit: "default" 0.0;
+      color: 255 255 255 128;
+   }
+   description 
+   {
+      state: "disabled_visible" 0.0;
+      inherit: "default" 0.0;
+      color: 255 255 255 128;
+      fixed: 1 0;
+      visible: 1;
+      aspect: 1.0 1.0;
+   }
+}
+

+ +

We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.

+ +

+Evas_Object *parent, *check1, *content;
+
+// Create a check object 
+check1 = elm_check_add(parent);
+
+// Set the content of the check object 
+elm_object_part_content_set(check1, "elm.swallow.content", content);
+

+ + + + + + + + + + +

Note
We can add new SWALLOW parts when customizing a UI component's style, if we want to be able to control more content from the application. Note that removing existing SWALLOW parts changes the UI component's behavior.

+ +

+ +

The same is done with parts of the type TEXT. The check "default" style contains a part named "elm.text".

+ +

+part 
+{
+   name: "elm.text";
+   type: TEXT;
+   mouse_events: 0;
+   scale: 1;
+   description
+   {
+      state: "default" 0.0;
+      visible: 0;
+      rel1.to_x: "elm.swallow.content";
+      rel1.relative: 1.0 0.0;
+      rel1.offset: 1 1;
+      rel2.relative: 1.0 1.0;
+      rel2.offset: -2 -2;
+      color: 0 0 0 255;
+      text 
+      {
+         font: "Sans,Edje-Vera";
+         size: 10;
+         min: 0 1;
+         align: -1.0 0.5;
+      }
+   }
+   description
+   {
+      state: "visible" 0.0;
+      inherit: "default" 0.0;
+      visible: 1;
+      text.min: 1 1;
+   }
+   description 
+   {
+      state: "disabled" 0.0;
+      inherit: "default" 0.0;
+      color: 0 0 0 128;
+      color3: 0 0 0 0;
+   }
+   description
+   {
+      state: "disabled_visible" 0.0;
+      inherit: "default" 0.0;
+      color: 0 0 0 128;
+      color3: 0 0 0 0;
+      visible: 1;
+      text.min: 1 1;
+   }
+}
+

+ +

This is how to modify the content of the "elm.text" part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.

+ +

+Evas_Object *parent, *check2;
+
+// Create a check object 
+check2 = elm_check_add(parent);
+
+// Set the text of the check object 
+elm_object_part_text_set(check2, "elm.text", "Test text");
+

+ +

+ +

+ +

Focus is a graphical user interface concept. A component, for example, a UI component, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press.

+ +

+ +

Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press).

+ +

There are mainly two ways to set focus on a graphical elements:

+ +

Direct selection: this is done by clicking on the element.
Relative selection: this is done by moving the selection from a UI component to another, such as going to the previous or next one; this is done with a keyboard.

+ +

Direct selection does not really need any kind of special treatment as the user explicitly selects the UI component to interact with.

+ +

Relative selection' default order is the one the UI components have been added to the canvas. That may not be appropriate, if they are added programmatically in different order than they appear on-screen.

+ +

+ +

The order the focus goes from a UI component to another is called the focus chain. As said before, the default focus chain is set to the order the UI components have been added to the canvas.

+ +

An object can be focused if the following conditions apply:

+ +

object is visible
object is enabled
object accepts focus
object's subtree (if any) is focusable
all of object's parents have their subtrees focusable

+ +

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

+ +

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

+ +

If you have created a form with labels and text entries next to them, the focus moves to the entry field when the user clicks on the associated label.
If you have created an interface with several columns (table), set the focus chain as you wish, for example, going horizontally instead of going vertically, regardless whatever the order the UI components are added.

+ +

+ +

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

+ +

ELM_FOCUS_NEXT: next UI component in natural order
ELM_FOCUS_PREVIOUS: previous UI component in natural order
ELM_FOCUS_UP: UI component to focus when going up
ELM_FOCUS_DOWN: UI component to focus when going down
ELM_FOCUS_RIGHT: UI component to focus when going right
ELM_FOCUS_LEFT: UI component to focus when going left

+ +

Set the object next to another in a specific direction using elm_object_focus_next_object_get(object, direction).

+ +

+ +

To customize the application's custom chain:

+ +

+Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
+
+Eina_List *focus_chain = NULL;
+focus_chain = eina_list_append(focus_chain, obj3);
+focus_chain = eina_list_append(focus_chain, obj2);
+// The chain is obj3, then obj2. We set it.
+elm_object_focus_custom_chain_set(main, focus_chain);
+// Here we prepend obj5 at the beginning of the chain.
+elm_object_focus_chain_prepend(main, NULL, obj5);
+// We append obj1 after obj3.
+elm_object_focus_chain_append(main, obj3, obj1);
+// We prepend obj4 before obj1.
+elm_object_focus_chain_prepend(main, obj1, obj4);
+

+ +

The focus chain is obj5, obj3, obj4, obj1, obj2.

+ +

This actually applies to any container: it is possible to set the focus chain of, for example, a box.

+ +

+ +

If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.

+ +

Following on the previous example, if obj4 has obj5 defined as its next object, the actual focus chain is obj5, obj3, obj4, and loop back to obj5.

+ +

+ +

If your Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component if applicable.

+ +

Use elm_object_focus_get(object) to set whether a specific object has the focus. Set the focus to an object using elm_object_focus_set(object, set), where set is a Boolean value. If it is set to EINA_TRUE, the focus is set to that given object. If it is set to EINA_False, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after evas_object_show(object) has been called. Call the function back when the object receives or loses focus by registering on smart event "focused" or "unfocused"

+ +

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

+ +

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

+ + + +

+ +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.guides/html/native/ui/scalability_n.htm b/org.tizen.guides/html/native/ui/scalability_n.htm new file mode 100644 index 0000000..f908bab --- /dev/null +++ b/org.tizen.guides/html/native/ui/scalability_n.htm @@ -0,0 +1,765 @@ + + + + + + + + + + + + + Scalability Support + + + + + +

+ +

To ensure that your application works well in diverse devices, you must consider scalability when designing the application layout:

Key concepts
Scalability using Elementary UI components
Scalability using Edje
Aspect ratio

+ +

+ +

When designing the application layout to be scalable, you must pay attention to the following key concepts:

+ +

Understand the character of the relative position and the fixed position + +
In the relative position, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.
+ +
Figure: Relative position
+

+ +
In the fixed position, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.
+ +
Figure: Fixed position
+
Use the relative position +
If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.
+ +
Figure: Scaling relative position
+
Multiply the scaling value, if you use the fixed size +
If you use the EDC file to set up the layout, you can set the scale in the part element:
+
```
+parts 
+{
+   part 
+   { 
+      name: "box"; 
+      type: RECT;
+      scale: 1;
+   }
+}
+
```
+ +
If you set the fixed size in C code, you can use the ELM_SCALE_SIZE macro:
+
```
evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));
```
+ +
For more information see Applying the Base Scale.
Do not fill the width or height out with a fixed size only +
If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size.
+ +
Figure: Height filled with a fixed size
+

+ +
If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.
+ +
Figure: Height with a flexible area
+

+ + + +

+ +

The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using elementary UI components, make sure you understand the following core concepts on how scalability works with elementary UI components.

+ + + + + + + + + + +

Note
The Elementary library provides 3 groups of APIs: + Infrastructure: to control the behavior of elementary. + Container: UI components that can contain other UI components. + UI components: elementary UI components, such as buttons, lists, and check and radio boxes.

+ +

+ +

The Elementary library provides several containers to display UI components in an effective layout. The containers have no visual identity of their own.

+ +

Box + +
The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components' size:
+
- A vertical box calculates its height as the sum of its children's height and its width as the width of the widest child.
- A horizontal box calculates its width as the sum of its children's width and its height as the height of the tallest child.
+ +
Figure: Box layout
+

+ +
The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.
Grid + +
The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then packs the child UI components into the grid while setting their position and size based on the virtual size of the grid.
+ +
Figure: Grid layout
+

+ +
The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.

+ + +

+ +

To make a layout scalable with UI components, the UI components must be packed into a container using only the weight and align properties based on their minimum size. Do not resize the UI components directly using pixels.

+ +

The weight and align properties are associated with every elementary UI component, and they serve as hints for the container they are in. They tell the container how the UI component wants to occupy the space and pack itself with other UI components in the container.

+ +

+ +

You can set the weight property with the evas_object_size_hint_weight_set(x_weight, y_weight) function:

+ +

Containers use the weights of the child UI components by normalizing them across all child UI components along both X and Y directions.
The parameter values can be 0 or positive values (default: 0.0). +
0.0 means that the container allocates a minimum size of the UI component area.
+
1.0 (EVAS_HINT_EXPAND) means that the container allocates all of the remaining area to the UI component.
If the container has several UI components, it allocates the UI component area relative to the weights of other UI components.

+ +

Figure: Weight hint

Weight hint

+ +

Figure: Weight hint across multiple child UI components

Weight hint across multiple child UI components

+ +

+ +

You can set the align property with the evas_object_size_hint_align_set(x_align, y_align) function:

+ +

UI components use the alignment for their position or size along both X and Y directions.
The parameter values can be from 0.0 to 1.0 or -1.0 (default: 0.5).
The values define positions as follows: left is (x=0.0), right is (x=1.0), top is (y=0.0), and bottom is (y=1.0). The center is (x=0.5, y=0.5). +
-1.0 (EVAS_HINT_FILL) means that the UI component fills all of the allocated area.

+ +

Figure: Alignment hint

Alignment hint

+ +

+ +

The Tizen platform provides a complex graphical design and layout library called Edje, which provides an abstraction layer between the application code and the interface. You can use Edje in your Tizen applications to create visual elements and control the layout, look, and feel.

Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an Edje .edj file. The file can be produced by using Edje_cc to take a text file (a .edc file) and "compile" an output .edj file that contains the state graph information, images, and any other needed data.

+ +

While creating Edje, you set specific element properties to control the scalable behavior of the UI. Before creating a scalable UI using Edje, you must be familiar with the following scalability properties and part types.

+ +

Parts are used to represent the most basic layout elements, such as a line in a border or a text on an image.

The parts can have the following property:

scale: 0-1 +
Specifies whether the part scales its size with the scaling factor (Tizen has a scaling factor to resize the application layout and object). This property is used to scale properties, such as font size or min/max size of the part.
+
The default value is 0 (off) and the default scaling factor is 1.0. To make a part scalable, set the property to 1 (on).
+

+ +

Every part can have one or more description blocks to define the layout properties of the part.

The descriptions can have the following properties:

+ +

min/max: width height +
Specifies the minimum or maximum size of the part in pixels. It has no effect on the container size.
+
When the scale property of the part is set to 1 (on), the size is multiplied by the scaling factor.
fixed: 0-1 0-1 +
When the min or max property is set, this property sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application whether it must be scaled when resized.
+
The default value is 0 0. To fix a part size to its min or max, set the value to 1.
align: X-axis Y-axis +
When the displayed object size is smaller than its container, this property moves it along both axes using the relative position.
+
To move the property, use x = 0.0 to move to left, x = 1.0 to move to right, y = 0.0 to move to the top, and y = 1.0 to move to the bottom. The x = 0.5, y = 0.5 value sets the object at the center of its container.
+
The default value is 0.5 0.5.

rel1/rel2 +

Specifies the position of the left-top and bottom-right corners of the part's container.

relative: X-axis Y-axis +
Specifies the relative position of the part's container.
+
The default value is 0.0 0.0 for rel1.relative and 1.0 1.0 for rel2.relative.
to/to_x/to_y +
Specified that a corner must be positioned relatively to another part's container.
+
By default, the corners of a part are placed to the whole interface.

+ + + + + + + + +

Table: Edje part property example

+collections 
+{
+   group 
+   {
+      name: "property_test";
+                                                                 
+      images 
+      {
+         image: "panorama.png" COMP;
+      }  
+                                                                 
+      parts 
+      {
+         part 
+         {
+            name: "rect1";
+            type: RECT;
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.3 0.4;}
+               rel2 {relative: 0.7 0.6;}
+               color: 0 127 255 255;
+            }
+         }
+         part 
+         {
+            name: "rect2";
+            type: RECT;
+            // Affected by scaling factor
+            scale: 1; 
+            description 
+            {
+               state: "default" 0.0;
+               fixed: 0 1;
+               // Height: 100 pixels (when the scaling factor is 1.0)
+               min: 0 100;
+               rel1 {relative: 0.0 1.0;}
+               rel2 {relative: 1.0 1.0;}
+               // Bottom-aligned
+               align: 0.5 1.0;
+               color: 255 127 0 255;
+            }
+         }
+         part 
+         {
+            name: "image";
+            // Affected by scaling factor
+            scale: 1;
+            description 
+            {
+               state: "default" 0.0;
+               fixed: 1 1;
+               // Image size: 720 x 180 pixels (when the scaling factor is 1.0)
+               min: 720 180;
+               // Y-axis is positioned relative to "rect2" part
+               rel1 {relative: 0.5 0.0; to_y: "rect2";}
+               rel2 {relative: 0.5 0.0; to_y: "rect2";}
+               // Bottom-aligned
+               align: 0.5 1.0;
+               image.normal: "panorama.png";
+            }
+         }
+      }
+   }
+}

Part example

aspect: min max +
Specifies the width to height ratio to keep when the part is resized. When both values are the same, the ratio is fixed. When they differ, the part is forced to keep the ratio between the min and max properties when resized.
+
The default value is 0.0 0.0.

aspect_preference: dimension +

Specifies the scope of the aspect property to a given dimension.

The possible values are BOTH, VERTICAL, HORIZONTAL, and NONE. The default is NONE.

+ + + + + + + + +

Table: Edje part property aspect example

+collections 
+{
+   group 
+   {
+      name: "property_test";
+
+      images 
+      {
+         image: "island.png" COMP;
+      }
+   
+      parts 
+      {
+         part 
+         {
+            name: "image";
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 1.0;}
+               image.normal: "island.png";
+               aspect: 8/5 8/5;
+               // Keep the aspect ratio based on the part width
+               aspect_preference: HORIZONTAL;
+            }
+         }
+      }
+   }
+}

Part aspect example

+ +

The text elements are used to display text on the screen.

The texts can have the following properties:

+ +

size: font-size +
Specifies the font size for the text. When the scale property of the part is set to 1 (on), the size is multiplied by the scaling factor.
min: horizontal vertical +
Specifies a pair of boolean values that define whether the container can be reduced further than the text size. The property is used to prevent the container from chopping the text.
+
When min is set horizontally or vertically, the minimum height or width of the part is decided by the text size.
+
The default value is 0 0.

max: horizontal vertical +

Specifies a pair of boolean values that define whether the container can be expanded further than the text size.

When max is set horizontally or vertically, the maximum height or width of the part is decided by the text size.

The default value is 0 0.

+ + + + + + + + +

Table: Edje text property example

+collections 
+{
+   group 
+   {
+      name: "property_test";
+
+      parts 
+      {
+         part 
+         {
+            name: "text";
+            type: TEXT;
+            scale: 1;
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 0.0;}
+               align: 0.5 0.0;
+               color: 108 108 108 255;
+               text 
+               {
+                  font: "TIZEN";
+                  // Affected by scaling factor
+                  size: 80;
+                  // Minimum height of the part container is decided by the text size
+                  min: 0 1;
+                  text: "Test properties!!";
+               }
+            }
+         }
+      }
+   }
+}

Text example

+ +

fit: horizontal vertical +

Specifies a pair of values that define whether the text is scaled to fill its container horizontally and/or vertically.

The default value is 0 0.

+ + + + + + + + +

Table: Edje text property fit example

+collections 
+{
+   group 
+   {
+      name: "property_test";
+
+      parts 
+      {
+         part 
+         {
+            name: "text";
+            type: TEXT;
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 0.1;}
+               color: 108 108 108 255;
+               text 
+               {
+                  font: "TIZEN";
+                  // Resize text to fill the container height
+                  fit: 0 1;
+                  text: "Test properties!!";
+               }
+            }
+         }
+      }
+   }
+}

Text fit example

+ + +

The image elements are used to display images on the screen.

The images can have the following properties:

+ +

border: left right top bottom +
Specifies the border size of the image in pixels. This property sets the area of each side of the image to be displayed as a fixed size border, preventing the corners from being changed on a resize.

border_scale +

Specifies whether the border scales its size according to the scaling factor.

The default value is 0 (off). To make the border scalable, the value must be set to 1 (on).

+ + + + + + + + +

Table: Edje image property example

+collections 
+{
+   group 
+   {
+      name: "property_test";
+
+      images 
+      {
+         image: "00_button_01_normal.png" COMP;
+      }
+
+      parts 
+      {
+         part 
+         {
+            name: "image";
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.6;}
+               rel2 {relative: 1.0 0.7;}
+               image.normal: "00_button_01_normal.png";
+            }
+         }
+         part 
+         {
+            name: "ninepatch_image";
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.8;}
+               rel2 {relative: 1.0 0.9;}
+               image 
+               {
+                  normal: "00_button_01_normal.png";
+                  border: 4 4 0 0;
+                  // Affected by scaling factor
+                  border_scale: 1;
+               }
+            }
+         }
+      }
+   }
+}

Image example

+ +

The image set elements are used to display a specific image on the screen based on the container size.

The image sets can have the following properties:

+ +

name: image-name +
Specifies the name of the image file.

size: minw minh maxw maxh +

Specifies the minimum and maximum size that causes a specified image to be selected and shown.

The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part's container, an appropriate image is loaded.

+ + + + + + + + +

Table: Edje image set property example

+collections 
+{
+   group 
+   {
+      name: "property_test";
+
+      images 
+      {
+         set 
+         {
+            name: "alternative_animal";
+            image 
+            {
+               image: "pig.png" COMP;
+               size: 640 800 1200 1500;
+            }
+            image 
+            {
+               image: "monkey.png" COMP;
+               size: 400 500 639 799;
+            }
+            image 
+            {
+               image: "cat.png" COMP;
+               size: 240 300 399 499;
+            }
+            image 
+            {
+               image: "mouse.png" COMP;
+               size: 80 100 239 299;
+            }
+            image 
+            {
+               image: "snail.png" COMP;
+               size: 0 0 79 99;
+            }
+         }
+      }
+
+      parts 
+      {
+         part 
+         {
+            name: "image1";
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.0;}
+               rel2 {relative: 1.0 0.45;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+         part 
+         {
+            name: "image2";
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.5;}
+               rel2 {relative: 1.0 0.75;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+         part 
+         {
+            name: "image3";
+            description 
+            {
+               state: "default" 0.0;
+               rel1 {relative: 0.0 0.8;}
+               rel2 {relative: 1.0 1.0;}
+               image.normal: "alternative_animal";
+               aspect: 4/5 4/5;
+               aspect_preference: BOTH;
+            }
+         }
+      }
+   }
+}

Image set example

+ +

You can use fixed and flexible parts:

+ +

Fixed parts + +
- Fixed parts have a minimum size (at least width or height).
- When the part scale property is set to 1 (on), the scaling factor has an effect on the minimum size.
- Fixed parts are used when the parts must keep a fixed size in any device or any orientation.
Flexible parts +
- Flexible parts resize according to the container size and other fixed parts' size.
- Flexible parts are used when the parts can be resized in any device or any orientation.

+ +

Figure: Fixed and flexible parts

Fixed and flexible parts

+ + +

+ +

In Tizen, the application generally fills out the screen. However, sometimes you want the application to be shown in a specific aspect ratio, regardless of the screen size.

As images are scaled in different devices, they are resized based on the container size. The images have specific properties that define the area to be shown when resized.

+ +

For example, the following table illustrates what happens to the parts marked with yellow rectangles in the following figures, when scaling properties are applied.

+ +

Figure: Original image [1920x1280 (8:5)]

Original image [1920x1280 (8:5)]

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

Note
To set the required aspect ratio, use the evas_object_size_hint_aspect_set() function or the aspect_preference attribute in the EDC.

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

Table: Image resizing effects with a specific aspect ratio
Aspect	Container area
Aspect	720x384 (15:8)	720x640 (9:8)
HORIZONTAL + Resizing based on the container width while keeping the image aspect ratio. + Extra height goes outside the image area and is clipped.
VERTICAL + Resizing based on the container height while keeping the image aspect ratio. + Extra width goes outside the image area and is clipped.
BOTH + Resizing based on the container area while keeping the image aspect ratio. + No extra width or height goes outside the image area, so the entire image is always shown.
NONE + Resizing to fill the available area while keeping the image aspect ratio. + Extra width or height goes outside the image area and is clipped.

+ +

In case of an image object, you can set its aspect ratio with additional APIs:

+ +

elm_image_fill_outside_set() +
If the function is set to TRUE, the image resizes to fill the entire area while keeping its aspect ratio. It lets the extra width or height go outside of the area (same result as with the aspect NONE in the above table).
elm_image_aspect_fixed_set() + +
If the function is set to FALSE, the image resizes to fill the entire area without keeping its original aspect ratio. The image can be distorted to fit the area.
+ + + + + + + + + + + + + + +
Table: Image resizing without keeping the aspect ratio
Container area
720x384 (15:8) 720x640 (9:8)
+

+ + + + + +

+ +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.guides/html/native/ui/styles_mn.htm b/org.tizen.guides/html/native/ui/styles_mn.htm new file mode 100644 index 0000000..6841480 --- /dev/null +++ b/org.tizen.guides/html/native/ui/styles_mn.htm @@ -0,0 +1,928 @@ + + + + + + + + + + + + + UI Component Styles + + + + + +

+ +

+ +

For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the elm_object_style_set function.

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

+ +

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
Style	Text part	Swallow part	Notes
elm/button/base/default	elm.text	elm.swallow.content
elm/button/base/anchor	elm.text	elm.swallow.content
elm/button/base/bottom	elm.text	elm.swallow.content	This style is used widely at the bottom of the screen.
elm/button/base/circle	elm.text	elm.swallow.content
elm/button/base/dropdown	elm.text
elm/button/base/hoversel_horizontal/default	elm.text	elm.swallow.content
elm/button/base/hoversel_horizontal_entry/default	elm.text	elm.swallow.content
elm/button/base/hoversel_vertical/default	elm.text	elm.swallow.content
elm/button/base/hoversel_vertical_entry/default	elm.text	elm.swallow.content
elm/button/base/icon_reorder
elm/button/base/naviframe/drawers
elm/button/base/naviframe/title_cancel
elm/button/base/naviframe/title_done
elm/button/base/option

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

Table: Check styles
Style	Sample
elm/check/base/default
elm/check/base/favorite
elm/check/base/on&off

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

Table: Colorselector styles
Style	Sample	Notes
elm/colorselector/item/color/colorplane		Use the following command: elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);

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

Table: Progressbar styles
Style	Sample
default
wheel

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

Table: Radio styles
Style	Sample
default

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

Table: List styles
Style	Sample	Text part	Swallow part
default		elm.text	elm.swallow.icon: for the icon on the left. + elm.swallow.end: for the icon on the right.

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

Table: Multi Button Entry styles
Style	Sample	Text part	Notes
elm/multibuttonentry/base/default		elm.text, guide	The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.

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

Table: Toolbar styles
Style	Text part	Swallow part	Notes
elm/toolbar/base/default
elm/toolbar/base/navigationbar
elm/toolbar/base/tabbar_with_title
elm/toolbar/item/default	elm.text	elm.swallow.icon	This style is for the toolbar's item. Check the elm_toolbar_item_append() function to set the text and the icon.
elm/toolbar/item/navigationbar	elm.text		This style is for the toolbar's item. Check the elm_toolbar_item_append() function to set the text and the icon.

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

Table: Flipselector styles
Style	Sample
default

+ +

The style of the genlist's item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item's style.

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

Table: Genlist styles
Style	Text part	Swallow part	Notes
default	elm.text	elm.swallow.icon: for the icon on the left. + elm.swallow.end: for the icon on the right.
default_style	elm.text	elm.swallow.icon: for the icon on the left. + elm.swallow.end: for the icon on the right.
double_label	elm.text: for the main text. + elm.text.sub: for the sub text.	elm.swallow.icon: for the icon on the left. + elm.swallow.end: for the icon on the right.
end_icon	elm.text	elm.swallow.icon
full		elm.swallow.content	The swallow part is the full size of the item. There is no padding in the item.
group_index	elm.text	elm.swallow.icon: for the icon on the left. + elm.swallow.end: for the icon on the right.
one_icon	elm.text	elm.swallow.icon
message	elm.text: for the text on the top. + elm.title.1: for the text in the middle. + elm.title.2: for the text on the bottom.

+ +

The style of the gengrid's item is not set by external APIs. For more information on using the item class to set the item's style, see the guide of gengrid.

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

Table: Gengrid styles
Style	Text part	Swallow part	Notes
default		elm.swallow.icon
album-preview	elm.text	elm.swallow.icon
block			This style is used to show an empty area.
group_index	elm.text	elm.swallow.icon
default_grid		elm.swallow.icon
default_gridtext2	elm.text	elm.swallow.icon
default_gridtext	elm.text	elm.swallow.icon
default_style	elm.text	elm.swallow.icon

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

Table: Segmentation Control styles
Style	Sample
default

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

Table: Index styles
Style	Sample	Notes
default		This style is for supporting the vertical style.
default		This style is for supporting the horizontal style. To set a horizontal index, use the elm_index_horizontal_set.
pagecontrol		This style is used for the "page control" layout. For more information, refer to the Core Control sample application.

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

Table: Contextual Popup (Ctxpopup) styles
Style	Sample	Notes
default
dropdown/list		The size of the item and the ctxpopup follow the size of the screen.
dropdown/label		The size of the item and the ctxpopup follow the maximum length of the item.

Table: Icon styles
Style	Sample
apps
arrow_down
arrow_left
arrow_right
arrow_up
chat
clock
close
delete
edit
file
home
media_player/forward
media_player/info
media_player/next
media_player/pause
media_player/play
media_player/prev
media_player/rewind
media_player/stop
menu/apps
menu/arrow_down
menu/arrow_left
menu/arrow_right
menu/arrow_up
menu/chat
menu/clock
menu/close
menu/delete
menu/edit
menu/file
menu/folder
menu/home
menu/refresh
no_photo
photo/no_photo
refresh
toolbar/apps
toolbar/arrow_down
toolbar/arrow_left
toolbar/arrow_right
toolbar/arrow_up
toolbar/chat
toolbar/clock
toolbar/close
toolbar/delete
toolbar/edit
toolbar/file
toolbar/folder
toolbar/home
toolbar/more_menu
toolbar/refresh

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

Table: Entry styles
Style	Sample	Text part	Swallow part	Notes
default		elm.guide: for the guide text. + elm.text: for the main text.		The guide text is automatically erased when the main text is entered.

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

Table: Datetime styles
Style	Sample
date_layout
time_layout
time_layout_24hr

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

Table: Panel (drawer) styles
Style	Sample	Swallow part	Notes
default		elm.swallow.content	For more information on the drawer, see the [UI Sample] Core Control guide.

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

Table: Slider styles
Style	Sample	Swallow part
horizontal/default		elm.swallow.icon
horizontal/center_point		elm.swallow.icon
vertical/center_point
vertical/default

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

Table: Popup styles
Style	Sample
default
toast

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

Table: Spinner styles
Style	Sample
base/horizontal
base/vertical

+ + + +

+ +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.guides/html/native/ui/styles_wn.htm b/org.tizen.guides/html/native/ui/styles_wn.htm new file mode 100644 index 0000000..80b54eb --- /dev/null +++ b/org.tizen.guides/html/native/ui/styles_wn.htm @@ -0,0 +1,659 @@ + + + + + + + + + + + + + UI Component Styles + + + + + +

+ +

+ + +

For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the elm_object_style_set function.

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ + +

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 (wearable core)
Style	Text part	Swallow part	Notes
default	elm.text	elm.swallow.content
green	elm.text	elm.swallow.content
orange	elm.text	elm.swallow.content
red	elm.text	elm.swallow.content
nextdepth
naviframe/title_icon		elm.swallow.content	The icon can be set with the elm_object_part_content_set(btn, "icon", ic) function.

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

Table: Button styles (Gear O)
Style	Sample	Text part	Swallow part	Notes
default		elm.text	elm.swallow.content
bottom		elm.text	elm.swallow.content

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

Table: Check styles (wearable core)
Style	Sample
default
on&off

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

Table: Check styles (Gear O)
Style	Sample
default
small
on&off

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

Table: Contextual popup (Ctxpopup) styles (wearable core)
Style	Sample	Notes
default		Use the elm_ctxpopup_item_append() function to add both text and an icon to the list.

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

Table: Contextual popup (Ctxpopup) styles (Gear O)
Style	Sample	Notes
select_mode
select_mode/top		Pair this style with select_mode/bottom.
select_mode/bottom		Pair this style with select_mode/top.

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

Table: Datetime styles (wearable core)
Style	Sample
datepicker_layout
timepicker_layout

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

Table: Datetime styles (Gear O)
Style	Sample
datepicker/circle
timepicker/circle

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

Table: Entry styles
Style	Sample	Text part	Swallow part	Notes
default		elm.guide: for the guide text. + elm.text: for the main text.		The guide text is automatically erased when the main text is entered.

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

Table: Genlist styles (wearable core)
Style	Text part	Swallow part
default	elm.text	elm.swallow.icon: for the icon on the left. + elm.swallow.end: for the icon on the right.
group_index	elm.text: for the main text. + elm.text.1: for the sub text.	elm.icon
1text	elm.text
1text.1icon	elm.text	elm.icon
2text	elm.text: for the main text. + elm.text.1: for the sub text.
2text.1	elm.text: for the main text. + elm.text.1: for the sub text.
1text.1icon.divider	elm.text	elm.icon: for the icon. + elm.divider: for the icon divider.
1text.1icon.1	elm.text	elm.icon
2text.1icon.1	elm.text: for the main text. + elm.text.1: for the sub text.	elm.icon
multiline/1text	elm.text: for the multi-line text.
multiline/2text	elm.text: for the main text. + elm.text.1: for the multi-line sub text.

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

Table: Genlist styles (Gear O)
Style	Text part	Swallow part
default	elm.text	elm.swallow.icon: for the icon on the left. + elm.swallow.end: for the icon on the right.
title	elm.text
groupindex	elm.text
1text	elm.text
1text.1icon	elm.text	elm.icon
2text	elm.text: for the main text. + elm.text.1: for the sub text.
1text.1icon.divider	elm.text	elm.icon: for the icon. + elm.divider: for the icon divider.
1text.1icon.1	elm.text	elm.icon
2text.1icon.1	elm.text: for the main text. + elm.text.1: for the sub text.	elm.icon
editfield	elm.text

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

Table: Index styles (wearable core)
Style	Sample
thumbnail
tab

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

Table: Index styles (Gear O)
Style	Sample
thumbnail
circle

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

Table: Popup styles (wearable core)
Style	Sample
default
toast

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

Table: Popup styles (Gear O)
Style	Sample
circle
toast/circle

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

Table: Progressbar styles (wearable core)
Style	Sample
default
pending_list
process
process/groupindex

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

Table: Progressbar styles (Gear O)
Style	Sample
process
process/small

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

Table: Radio styles (wearable core)
Style	Sample
default

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

Table: Radio styles (Gear O)
Style	Sample
default

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

Table: Slider styles
Style	Sample	Swallow part
horizontal/default		elm.swallow.icon

+ + + + +

+ +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.guides/html/native/ui/threads_n.htm b/org.tizen.guides/html/native/ui/threads_n.htm index 57bc60b..dfda71c 100644 --- a/org.tizen.guides/html/native/ui/threads_n.htm +++ b/org.tizen.guides/html/native/ui/threads_n.htm @@ -14,9 +14,9 @@ -

Related Info

@@ -80,17 +85,17 @@

The illustration below shows the occupancy of a hypothetical thread pool: there are several tasks, of which 4 are running (because the thread_max parameter of the pool is 4) and the others are waiting. There is no thread with its func_end currently called.

Figure: Thread pool, step 1

Thread pool, step 1

When a task (the sepia filter on image1 for instance) finishes, the corresponding func_end function is invoked from the mainloop.

Figure: Thread pool, step 2

Thread pool, step 2

With the task done, one of the thread from the pool is available again and another can run in it (adding the reverberation effect on audio3 in the example below).

Figure: Thread pool, step 3

Thread pool, step 3

The thread pool continues the same way forever, running tasks in its threads whenever there is one available.

diff --git a/org.tizen.guides/html/native/ui/ui_control_n.htm b/org.tizen.guides/html/native/ui/ui_component_mn.htm similarity index 55% rename from org.tizen.guides/html/native/ui/ui_control_n.htm rename to org.tizen.guides/html/native/ui/ui_component_mn.htm index b57e503..459bb15 100644 --- a/org.tizen.guides/html/native/ui/ui_control_n.htm +++ b/org.tizen.guides/html/native/ui/ui_component_mn.htm @@ -10,11 +10,11 @@ - UI Control + UI Components -

The UI control management features allow you to the widgets and their focus on the screen, as well as create customizations. The Elementary library provides several widgets than can be used to compose the user interface of your application.

The main features of UI control management are:

The UI component management features allow you to the UI components and their focus on the screen, as well as create customizations. The Elementary library provides several UI components than can be used to compose the user interface of your application.

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

+ +

The main features of UI component management are:

Scaling widgets
Enables you to scale widgets in order to be comfortably used with a finger and make text more readable.
Using widgets
Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.
Scaling UI components
Enables you to scale UI components in order to be comfortably used with a finger and make text more readable.
Using UI components
Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.

Elementary, through its configuration API (elm_config), provides a way to scale widgets with two different parameters. Finger size parameter is used when the interactive zones (clickable, editable) of the widgets need to be scaled in order to be comfortably used with a finger. Scale parameter is responsible for scaling readable parts of a widget (text or icons for example), so that it is more visible in the user interface.

Elementary, through its configuration API (elm_config), provides a way to scale UI components with two different parameters. Finger size parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. Scale parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.

Finger size parameter scales widgets based on the user's finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.

Finger size parameter scales UI components based on the user's finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.

The global finger size is set with the elm_config_finger_size_set() function. This adjusts the size and hit area of widgets so they are easy to hit with a finger. The current value is retrieved with the elm_config_finger_size_get() call. The finger size is always in pixel.

The global finger size is set with the elm_config_finger_size_set() function. This adjusts the size and hit area of UI components so they are easy to hit with a finger. The current value is retrieved with the elm_config_finger_size_get() call. The finger size is always in pixel.

To increase the current global finger size by 20px:

 Evas_Coord finger_size;
 
-/* Get the current finger size */
+// Get the current finger size
 finger_size = elm_config_finger_size_get();
 
-/* Add 20px to finger size parameter and set it to the global Elementary
-* configuration */
+// Add 20px to finger size parameter and set it 
+// to the global Elementary configuration
 elm_config_finger_size_set(finger_size + 20);

This parameter only scales the readable areas of the widget (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.

This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.

elm_config_scale_set() function is used to set the global scaling factor, that affects to all the widgets. It is also possible to use elm_object_scale_set() to set the scaling factor on a given Elementary widget and all its children.

elm_config_scale_set() function is used to set the global scaling factor, that affects to all the UI components. It is also possible to use elm_object_scale_set() to set the scaling factor on a given Elementary UI component and all its children.

@@ -89,13 +103,13 @@ elm_config_finger_size_set(finger_size + 20);

 Evas_Object *button;
 
-/* The button object is created and configured */
+// The button object is created and configured
 
-/* Set the global scale factor to 2.0 */
+// Set the global scale factor to 2.0
 elm_config_scale_set(2.0);
 
-/* Set the scaling factor of the button widget to 2.0, this widget
-* appears 4 times bigger than its initial size */
+// Set the scaling factor of the button component to 2.0, this component
+// appears 4 times bigger than its initial size
 elm_object_scale_set(button, 2.0);

@@ -104,19 +118,19 @@ elm_object_scale_set(button, 2.0);

This chapter shows the visual result of finger size and scaling factors modification.

Figure: elementary_config application

elementary_config application

The previous picture shows the elementary_config application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.

The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.

Figure: Scale increased (1.30)

Scale increased (1.30)

A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.

Figure: Finger size increased (90px)

Finger size increased (90px)

@@ -248,7 +262,7 @@ group

The image below shows three buttons with only a background part visible (the SWALLOW part is empty).

Figure: Image set example

Image set example

The first button's size is 100x50 pixels, the background image (bg_low.png) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.

@@ -281,32 +295,32 @@ parts

The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.

Figure: Border example

Border example

Figure: Elementary

Elementary

The Elementary library is a simple toolkit. It provides several widgets than can be used to compose the user interface of your application. Widgets allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. Widgets will often generate signals that can be caught in the application when the user interacts with the widgets. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common widgets.

The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.

In this chapter, we explain how widgets are built in a hierarchical manner, how to build a minimal Elementary application, and what the differences are between the callbacks that can be registered for widgets.

In this chapter, we explain how UI components are built in a hierarchical manner, how to build a minimal Elementary application, and what the differences are between the callbacks that can be registered for UI components.

Elementary Basics

Elementary can be configured using profiles. This chapter details some configuration items that can be modified to tweak the use of Elementary.

Elementary Configuration

@@ -314,159 +328,161 @@ parts - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +

+ + +

You can programmatically change the focus of widgets in an EFL application.

You can programmatically change the focus of UI components in an EFL application.

Managing Widget Focus

Managing UI Component Focus

You can apply styles to various widgets to change their appearance.

You can apply styles to various UI components to change their appearance.

Using Widget Styles

UI Component Styles

You can use themes and styles to customize the look and feel of widgets.

You can use themes and styles to customize the look and feel of UI components.

Customizing Widgets

Customizing UI Components

All applications use containers to create the layout of their UI. The EFL and Elementary support several ways to create this layout. You can use a predefined layout or an animated layout, or you can create your own layout.

@@ -474,7 +490,7 @@ parts @@ -482,43 +498,43 @@ parts - + - + - - + + - + - - + + - - + + - - + + - - + + - + - + diff --git a/org.tizen.guides/html/native/ui/ui_component_n.htm b/org.tizen.guides/html/native/ui/ui_component_n.htm new file mode 100644 index 0000000..8619779 --- /dev/null +++ b/org.tizen.guides/html/native/ui/ui_component_n.htm @@ -0,0 +1,42 @@ + + + + + + + + + + + + + UI Components + + +

+ +

Click the profile you want:

+ + + +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.guides/html/native/ui/ui_component_wn.htm b/org.tizen.guides/html/native/ui/ui_component_wn.htm new file mode 100644 index 0000000..2becada --- /dev/null +++ b/org.tizen.guides/html/native/ui/ui_component_wn.htm @@ -0,0 +1,561 @@ + + + + + + + + + + + + + UI Components + + + + + +

+ +

The UI component management features allow you manage the UI components and their focus on the screen, as well as create customizations. The Elementary library provides several UI components than can be used to compose the user interface of your application.

+ +

- Table: Available container widgets + Table: Available container components
Widget name	Container name	Description
Box	Box	One of the most simple containers in the EFL is a box.
Conformant	A conformant is a container widget that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.	Conformant	A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.
Grid	Grid	In a grid, objects are placed at specific positions along a fixed grid.
Layout	A layout is a container widget that takes a standard Edje design file and wraps it very thinly in a widget.	Layout	A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.
Mapbuf	A mapbuf widget is a container widget that uses an Evas map to hold a content object. This widget is used to improve the moving and resizing performance of complex widgets.	Mapbuf	A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.
Naviframe	A naviframe widget consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.	Naviframe	A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.
Panes	A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.	Panes	A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.
Scroller	Scroller	A scroller holds (and clips) a single object and allows you to scroll across it.
Table	Table	A table is like a box but with 2 dimensions.

+ + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

The main features of UI component management are:

Scaling UI components
Enables you to scale UI components in order to be comfortably used with a finger and make text more readable.
Using UI components
Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.

+ +

+ +

+ +

To increase the current global finger size by 20px:

+ +

+Evas_Coord finger_size;
+
+// Get the current finger size
+finger_size = elm_config_finger_size_get();
+
+// Add 20px to finger size parameter and set it 
+// to the global Elementary configuration
+elm_config_finger_size_set(finger_size + 20);
+

+ +

+ +

This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.

+ +

+ + + + + + + + + + +

Note
The scaling factor is multiplicative, if a child already has a scale size set, it is multiplied by its parent's scale size.

+ +

The following example sets the global scaling factor to 2.0. Then, the scaling factor of an existing Elementary object is set to 2.0, meaning that this object appears as if it had a 4.0 scale factor, the rest of the application is displayed with a 2.0 scaling factor:

+ +

+Evas_Object *button;
+
+// The button object is created and configured
+
+// Set the global scale factor to 2.0
+elm_config_scale_set(2.0);
+
+// Set the scaling factor of the button component to 2.0, this component
+// appears 4 times bigger than its initial size
+elm_object_scale_set(button, 2.0);
+

+ +

+ +

This chapter shows the visual result of finger size and scaling factors modification.

+ +

Figure: elementary_config application

elementary_config application

+ +

The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.

+ +

Figure: Scale increased (1.30)

Scale increased (1.30)

+ +

A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.

+ +

Figure: Finger size increased (90px)

Finger size increased (90px)

+ + + + + + + + + + +

Note
It is up to the theme (Edje file) to set the parts that are scalable. This is something that needs to be taken into account when developing a new Edje theme. This can be done in EDC with the scale parameter. Refer to the Edje guide for more information on how to do that.

+ +

+ +

+ +

This chapter explains how to make a scalable Edje object and give hints how to write an EDC file that is scalable. The example shows a basic button that is composed of a background image part and a swallow part that can receive some content.

+ +

+group 
+{ 
+   name: "button";
+   images 
+   {
+      image: "bg.png" COMP;
+   }
+   parts 
+   {
+      part 
+      { 
+         name: "bg";
+         type: IMAGE;
+         description 
+         { 
+            state: "default" 0.0;
+            image.normal: "bg.png";
+         }
+      }
+      part 
+      { 
+         name: "elm.swallow.content";
+         type: SWALLOW;
+         description 
+         { 
+            state: "default" 0.0;
+            visible: 0;
+         }
+         description 
+         { 
+            state: "visible" 0.0;
+            visible:1;
+         }
+      }
+   }
+}
+

+ +

To have a scalable object, set the scale parameter to 1 on the parts you want to be scalable as explained in the scalability chapter of the Edje guide. Here the bg and elm.swallow.content parts must be scalable.

+ +

+group 
+{ 
+   name: "button";
+   images 
+   {
+      image: "bg.png" COMP;
+   }
+   parts
+   {
+      part 
+      { 
+         name: "bg";
+         type: IMAGE;
+         scale: 1;
+         description 
+         { 
+            state: "default" 0.0;
+            image.normal: "bg.png";
+         }
+      }
+      part 
+      { 
+         name: "elm.swallow.content";
+         type: SWALLOW;
+         scale: 1;
+         description 
+         { 
+            state: "default" 0.0;
+            visible: 0;
+         }
+         description 
+         { 
+            state: "visible" 0.0;
+            visible:1;
+         }
+      }
+   }
+}
+

+ +

+ +

If your application needs to be used at different resolutions it is recommended to have 2 images for the background image bg.png. Here the bg_low.png is added to the application. It is used when the size of the image is under 500 px, and a bg_high.png image is for higher resolutions. Use a set on the bg.png image as explained in the Using Image Set chapter of the Edje guide.

+ +

+group 
+{ 
+   name: "button";
+   images 
+   {
+      set 
+      {
+         name: "bg.png";
+         image
+         {
+            image: "bg_low.png" COMP;
+            size: 0 0 200 100;
+         }
+         image
+         {
+            image: "bg_high.png" COMP;
+            size: 201 101 5000 5000;
+         }
+      }
+   }
+}
+

+ +

The image below shows three buttons with only a background part visible (the SWALLOW part is empty).

+ +

Figure: Image set example

Image set example

+ +

To prevent this, the image set has a bigger image to use when the size is bigger than 200x100 pixels (bg_high.png). The third button size is 201x101 pixels and it uses the new image, which has a better quality than the scaled image.

+ +

+ +

When the button is resized, the image part is also resized because it is marked as scalable. To get the image resized but to keep the image border as it is, use the border parameter. It specifies the border size which is not resized even if the image is. This is explained in the Border resizing chapter of the Edje guide.

+ +

To add a 40 pixel border on the left and right part of the bg image and a 20 pixel border on top and bottom borders:

+ +

+parts 
+{
+   part 
+   { 
+      name: "bg";
+      type: IMAGE;
+      scale: 1;
+      description 
+      { 
+         state: "default" 0.0;
+         image.normal: "bg.png";
+         image.border: 40 40 20 20;
+      }
+   }
+}
+

+ +

The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.

+ +

Figure: Border example

Border example

+ +

+ +

Figure: Elementary

Elementary

+ +

+ +

Elementary Basics

+ +

+ +

Elementary can be configured using profiles. This chapter details some configuration items that can be modified to tweak the use of Elementary.

+ +

Elementary Configuration

+ +

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

+ Table: Available UI components +
Component name	Description
Background	The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.
Button	The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.
Check	The check component toggles the value of a Boolean between true and false.
Ctxpopup	The ctxpopup component is a contextual popup that can show a list of items.
Datetime	The datetime component can display and input date and time values.
Entry	The entry component is a box to which the user can enter text.
Genlist	The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).
GLView	The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.
Icon	The icon component inherits from the image component. It is used to display images in an icon context.
Image	The image component can load and display an image from a file or from memory.
Index	The index component provides an index for fast access to another group of UI items.
Label	The label component displays text with simple HTML-like markup.
List	The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.
Notify	The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.
Plug	The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.
Popup	The popup component shows a pop-up area that can contain a title area, a content area, and an action area.
Progressbar	The progressbar component can be used to display the progress status of a given job.
Radio	The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.
Slider	The slider component is a draggable bar that is used to select a value from a range of values.
Transit	The transit component can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit component is documented in the Creating Animations and Effects guide.
Win	The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.

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

+ Table: Available circle UI components +
Component name	Description
Circle Datetime	The circle datetime extends elm_datetime by visualizing the selected field.
Circle Genlist	The circle genlist provides a scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.
Circle Object	The circle object extends elementary components in a form of circular design. Sometimes a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.
Circle Progressbar	The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.
Circle Scroller	The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.
Circle Slider	The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the elm_slider, but also replaces the functionalities of the elm_slider in a circular design.
Circle Surface	The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered.

+ + +

+ +

You can programmatically change the focus of UI components in an EFL application.

+ +

Managing UI Component Focus

+ +

+ +

You can apply styles to various UI components to change their appearance.

+ +

UI Component Styles

+ +

+ +

You can use themes and styles to customize the look and feel of UI components.

+ +

Customizing UI Components

+ +

+ +

In this guide, we look at how to use the different containers provided by Elementary.

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

+ Table: Available container components +
Container name	Description
Box	One of the most simple containers in the EFL is a box.
Conformant	A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.
Grid	In a grid, objects are placed at specific positions along a fixed grid.
Layout	A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.
Mapbuf	A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.
Naviframe	A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.
Scroller	A scroller holds (and clips) a single object and allows you to scroll across it.
Table	A table is like a box but with 2 dimensions.

+ + + + +

+ +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.guides/html/native/ui/ui_guide_n.htm b/org.tizen.guides/html/native/ui/ui_guide_n.htm index 47c3f6c..41076bc 100644 --- a/org.tizen.guides/html/native/ui/ui_guide_n.htm +++ b/org.tizen.guides/html/native/ui/ui_guide_n.htm @@ -10,28 +10,29 @@ - UI + UI Framework -

UI features include all aspects of creating a visual outlook for your application to ensure the best possible user experience.

UI framework features include all aspects of creating a visual outlook for your application to ensure the best possible user experience.

The main UI features are:

EFL
Enables you to construct graphical user interfaces.
Edje
Enables you to theme an application.
Ecore
Enables you to manage the application main loop.
Event and Effect
Enables you to handle different kinds of events.
UI Control
Enables you to manage shortcuts, widgets, and scalability.
UI Components
Enables you to manage shortcuts, UI components, and scalability.
Efl Extension
Enables you to work with the Menu and Back hardware keys on devices.
Font Setting
Enables you to change the font of your application to another system default font or your own font.
EFL UTIL
Enables you to manage notification window levels.
Multiple Screen Support
Enables you to design applications for different kids of screens.
EOM
Enables you to handle external output.
Multiple Screen Support
Enables you to design applications for different kinds of screens.
Scalability Support
Enables you to design applications so that their UI can be scaled for diverse devices without problems.
EOM
Enables you to handle external output devices.

@@ -71,4 +73,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.guides/html/native/ui/ui_widgets_n.htm b/org.tizen.guides/html/native/ui/ui_widgets_n.htm deleted file mode 100644 index 882be7c..0000000 --- a/org.tizen.guides/html/native/ui/ui_widgets_n.htm +++ /dev/null @@ -1,3542 +0,0 @@ - - - - - - - - - - - - - - UI Widgets - - - - - - -

- - -

Show All
Hide All

- -

-
-
Background Widget
- Hide -
-
-
Figure: Red color background
-
- -
Figure: Background hierarchy
-
- -
The background widget can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to tiled, centered, scaled or stretched mode. There are no specific signals relative to background object.
- -
Adding a Background
- -
A background is created with the elm_bg_add().
- -
```
-Evas_Object *bg, *parent;
-
-// Creating a background
-bg = elm_bg_add(parent);
-
```
- -
Change Color of the Background
- -
You can set the color of the bg with elm_bg_color_set(). Here we set the background color to red.
- -
```
-Evas_Object *bg;
-
-// Use red color for background
-elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
-
```
- -
Change Image of the Background
- -
It is also possible to set an image or an Edje group with elm_bg_file_set(). The display mode of the image in the background can be chosen with elm_bg_option_set(), where the following modes are available:
- -
- ELM_BG_OPTION_CENTER: center the background image
- ELM_BG_OPTION_SCALE: scale the background image, retaining aspect ratio
- ELM_BG_OPTION_STRETCH: stretch the background image to fill the widget's area
- ELM_BG_OPTION_TILE: tile background image at its original size
- -
```
-Evas_Object *bg;
-
-// Set a file on the disk as background image
-elm_bg_file_set(bg, "/path/to/the/image", NULL);
-// Set an edje group as background image
-elm_bg_file_set(bg, "/path/to/the/edje", "edje_group");
-elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
-
```
- -
Using Overlay
- -
An overlay can be set using the "overlay" part name.
- -
```
-elm_object_part_content_set(bg, "overlay", over);
-
```
- -
Here, over is an Edje object that will be displayed on top of the current bg object.
- -
-
-
-
Button Widget
- Hide -
-
- -
Figure: Button widget
-
- -
Figure: Button hierarchy
-
- -
The Elementary button widget is a simple push button. It is composed of a label icon and an icon object and has autorepeat feature.
- -
Adding a Button
- -
```
-Evas_Object *button, *parent;
-
-// Creating a button
-button = elm_button_add(parent);
```
- -
Adding an Icon Inside a Button
- -
The icon can be updated with elm_object_part_content_set() function with the "icon" part name.
- -
```
-Evas_Object *ic;
-ic = elm_icon_add(button);
-elm_image_file_set(ic, "icon.png", NULL);
-elm_object_part_content_set(button, "icon", ic);
```
- -
Adding Text Inside a Button
- -
The label can be modified using the elm_object_text_set() function.
- -
```
elm_object_text_set(button, "Click me!");
```
- -
Using Button Style
- -
Other styles may be used on the button. Tizen supports the following styles:
- -
- "icon_reorder"
- "icon_expand_add"
- "icon_expand_delete"
- "default"
- "circle"
- "bottom"
- "contacts"
- "option"
- -
You can see these themes in action on the following screenshot (in the above order).
- -
Figure: Button widget
-
- -
To change the style of the button, we call the elm_object_style_set() function on our button object.
- -
```
elm_object_style_set(button,"icon_expand_add");
```
- -
Using Button Callbacks
- -
Button emits the following signals:
- -
- "clicked": the user clicked the button (press/release)
- "repeated": the user pressed the button without releasing it
- "pressed": the user pressed the button
- "unpressed": the user released the button after pressing it
- -
For all these signals the event_info parameter returned in the callback is NULL.
- -
This is an example to register and define callback function called by the clicked signal.
- -
```
{
-   evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
-}
-// Callback function for the "clicked" signal
-// This callback is called when the button is clicked by the user
-
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
-}
```
- -
Using Autorepeat Feature
- -
The autorepeat feature (enabled by default) consists of calling the "repeated" signal when the user keeps the button pressed. This feature can be disabled with the elm_button_autorepeat_set() function. The autorepeat is configured with
- -
- elm_button_autorepeat_initial_timeout_set(): to set the initial timeout before the autorepeat event is generated
- elm_button_autorepeat_gap_timeout_set(): to set the interval between two autorepeat events
- -
Disable the autorepeat feature:
- -
```
elm_button_autorepeat_set(button, EINA_FALSE);
```
- -
Enable the autorepeat feature (enabled by default):
- -
```
elm_button_autorepeat_set(button, EINA_TRUE);
```
- -
Set the initial timeout to five seconds:
- -
```
elm_button_autorepeat_initial_timeout_set(button, 5.0);
```
- -
Set the gap between two signals to 0.5 seconds:
- -
```
elm_button_autorepeat_gap_timeout_set(button, 0.5);
```
- -
-
-
-
Check Widget
- Hide -
-
- -
Figure: Check widget
-
- -
Figure: Check hierarchy
-
- -
The check widget is similar to the radio widget, except that it does not work as a group. It toggles the value of a boolean between true and false.
- -
This widget inherits from the layout widget. All layout functions can be used on the check widget.
- -
Adding Check Widget
- -
This is how to create a check widget.
- -
```
-Evas_Object *check, *parent;
-check = elm_check_add(parent);
-
```
- -
Modifying Check Styles
- -
Check widget style can be set with the elm_object_style_set() function. The following styles are available:
-
- default
- favorite
- on and off
- -
As an example we will set the favorite style on our check object.
- -
```
-elm_object_style_set(check, "favorite");
-
```
- -
We can get the current style with elm_object_style_get() function.
- -
```
-char *style = elm_object_style_get(check);
-
```
- -
Using Check Widget
- -
After having created a check object, it is possible to set its boolean value to EINA_TRUE.
- -
```
-elm_check_state_set(check, EINA_TRUE);
-
```
- -
We can also retrieve the current value of the check object.
- -
```
-Eina_Bool value = elm_check_state_get(check);
-
```
- -
As with the radio object, an icon and a label can be set.
- -
```
-// Create a Home icon 
-Evas_Object *icon;
-
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, "home");
-
-// Set it to the check object 
-elm_object_part_content_set(check, "icon", icon);
-
-// Set the check label 
-elm_object_text_set(check, "Check label");
-
```
- -
We can also modify the "on" and "off" labels.
- -
```
-elm_object_part_text_set(check, "on", "True");
-elm_object_part_text_set(check, "off", "False");
-
```
- -
The get functions of the elementary object API can be used to retrieve the content set to the check object.
- -
```
-// Get the current set text of the check label 
-char *text = elm_object_text_get(check);
-
-// Get the content set in the icon part 
-Evas_Object *icon = elm_object_part_content_get(check, "icon");
-
```
- -
Using Check Callbacks
- -
When the value is changed by the user, the changed signal is emitted. event_info parameter is NULL.
- -
This example shows how to register a callback on this signal.
- -
```
-{
-   evas_object_smart_callback_add(check, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the check value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
-}
-
```
- - -
-
-
-
Colorselector Widget
- Hide -
-
- -
Figure: Colorselector widget
-
- -
Figure: Colorselector hierarchy
-
- - -
The colorselector widget provides a color selection solution to the user. There are different modes available, each of them showing a different configuration of the colorselector widget.
- -
As for now, only the PALETTE mode is available in Tizen.
- -
- ELM_COLORSELECTOR_PALETTE
- -
The Palette mode displays several color items that enable the user to choose a color in the items displayed. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, it is associated with a unique identifier. This enable the developer to create new series of colors (new palette) and save it under another identifier. By default, the color palette is using the "default" identifier.
- -
This widget inherits from the layout widget, so all function concerning the layout widget can also be used on the colorselector widget.
- -
Adding a Colorselector Widget
- -
This is how to create a colorselector object.
- -
```
-Evas_Object *colorsel, *parent;
-
-colorsel = elm_colorselector_add(parent);
-
```
- -
Setting Colorselector Modes
- -
This is how to set the mode of the colorselector to the palette mode.
- -
```
-elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
-
```
- -
We want to create a new palette called "mypalette". This new palette will be saved by elementary config and we will be able to load it again later. We then add three colors in "mypalette": red, green, and blue.
- -
```
-elm_colorselector_palette_name_set(colorsel, "mypalette");
-elm_colorselector_palette_color_add(colorsel, 255, 0, 0, 255);
-elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
-elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
-
```
- -
The "default" palette already contains 14 colors.
- -
```
elm_colorselector_palette_name_set(colorsel, "default");
-
```
- -
When the user clicks on the color elements, it changes the color that is set to the colorselector widget. We can use the function below to retrieve the current selected color.
- -
```
int r, g, b, a;
-
-elm_colorselector_color_get(colorsel, &r, &g, &b, &a);
-
```
- -
Using Colorselector Callbacks
- -
We can register callbacks on the following signals:
- -
- "changed" - The color value changes on the selector. event_info is NULL.
- "color,item,selected" - The user clicks on a color item. The event_info parameter of the callback is the selected color item.
- "color,item,longpressed" - The user long presses on a color item. The event_info parameter of the callback contains the selected color item.
- -
This is how to register a callback on "changed" signal.
- -
```
-{
-      evas_object_smart_callback_add(colorselector, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the colorselector value changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-      dlog_print(DLOG_INFO, LOG_TAG, "The color has changed\n");
-}
-
```
- -
-
-
-
Ctxpopup Widget
- Hide -
-
- -
Figure: Context popup widget
-
- -
Figure: Context popup hierarchy
-
- - -
Ctxpopup is a contextual popup, which can show a list of items.
- -
Adding a Ctxpopup
- -
A ctxpopup can be created with elm_ctxpopup_add() and when shown, it automatically chooses an area inside its parent object's view (set via elm_ctxpopup_hover_parent_set()) to optimally fit into it.
- -
```
-Evas_Object *ctxpopup, *parent;
-
-// Creating a ctxpopup 
-ctxpopup = elm_ctxpopup_add(parent);
-
```
- -
Modifying Ctxpopup Style
- -
The following styles are available:
- -
- "dropdown/list"
- "dropdown/label"
- "more/default"
- -
Figure: Context popup more/default style
-
- -
Figure: Context popup dropdown/list
-
- -
Figure: Context popup dropdown/label
-
- -
In the following example, we set the "more/default" style.
- -
```
elm_object_style_set(ctxpopup, "more/default");
```
- -
Configuring Ctxpopup
- -
The context popup orientation can be set with elm_ctxpopup_horizontal_set(). Here we set it to horizontal.
- -
```
elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
-
```
- -
We can also disable auto hiding if we want the ctxpopup never to be hidden. (Auto hide is enabled by default.)
- -
```
elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
-
```
- -
Managing Ctxpopup Items
- -
The ctxpopup can contain a small number of items. Each of them can have a label and an icon. Here we append an item with the "Test" label and no icon.
-
```
-Elm_Object_Item *it;
-
-it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb,
-                  NULL);
-
```
- -
The _ctxpopup_item_cb() callback will be called when the item is clicked. This is how to write the definition of this callback.
- -
```
static void
-_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
-}
-
```
- -
Then the item label is set to "New label".
- -
```
elm_object_item_part_text_set(it, "default", "New label");
-
```
- -
And its icon is modified to the standard "home" icon.
- -
```
-Evas_Object *home_icon = elm_icon_add(ctxpopup);
-elm_icon_standard_set(home_icon, "home");
-
-elm_object_item_part_content_set(it, "icon", home_icon);
-
```
- -
Using Ctxpopup Callbacks
- -
The context popup emits the "dismissed" signal when it is dismissed. We can register a callback to this signal. The event_info parameter is NULL.
- -
```
{
-   evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
-}
-
-// Callback function for the "dismissed" signal
-// This callback is called when the ctxpopup is dismissed. 
-
-void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
-}
-
```
- -
-
-
-
Datetime Widget
- Hide -
-
- -
Figure: Datetime selection
-

- -
Figure: Datetime hierarchy
-

- -
The datetime widget displays and adds date and time values.
- -
Adding a Datetime Widget
- -
The widget is created with elm_datetime_add(). It is then possible to select the visible fields with elm_datetime_field_visible_set(). The following fields can be controlled:
-
- ELM_DATETIME_YEAR: The Year field
- ELM_DATETIME_MONTH: The Month field
- ELM_DATETIME_DATE: The Date field
- ELM_DATETIME_HOUR: The Hour field
- ELM_DATETIME_MINUTE: The Minute field
- ELM_DATETIME_AMPM: The AM/PM field
- -
As an example, this is how to create a datetime widget and set the HOUR and MINUTE fields visible.
- -
```
-Evas_Object *datetime, *parent;
-
-datetime = elm_datetime_add(parent);
-
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_HOUR, EINA_TRUE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_MINUTE, EINA_TRUE);
-
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
-
```
- -
Using Datetime Styles
- -
The following styles are available:
-
- "date_layout"
- "time_layout"
- "time_layout_24h"
- -
This is how to create the "date_layout" style.
- -
```
-elm_object_style_set(datetime, "date_layout");
-
```
- -
Setting Datetime Format
- -
The format of the date and time can be configured with elm_datetime_format_set() using a combination of allowed Libc date format specifiers. Here, as an example, we set the format to: "HH : MM".
- -
```
-elm_datetime_format_set(datetime, "%H : %M");
-
```
- -
Please refer to the API documentation for a complete list of all the options available.
- -
Using Datetime Callbacks
- -
A callback can be registered on the "changed" signal to detect when the Datetime field values are changed. The event_info parameter is NULL.
- -
```
-{
-   evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the datetime fields change
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
-}
```
- -
The "language,changed" signal is emitted when the system locale changes.
- - -
UX Issue in Tizen 2.3
- -
- date_layout (default): Year, Month, Day
- time_layout: Hour, Minute, AM/PM button
- time_layout_24hr: Hour, Minute
- -
Basically, the elm_datetime widget needs a full-length format that includes the Year, Month, Day, Hour, Minute, and AM/PM. Each style then shows specific fields according their style, limited by the UX concept. If you call the elm_datetime_field_visible_set() function for a field that is not supported in the style, it does not work.
- -
-
-
-
Entry Widget
- Hide -
-
- -
Figure: Entry widget
-

- -
Figure: Entry widget
-

- -
Figure: Entry hierarchy
-

- -
The entry widget is a box where the user can enter text. It supports the following features:
-
- text wrapping
- multiline
- scrolling
- formatted markup text
- password mode
- filtering text
- read/write from a file
- theme style overrides
- -
Adding Entry Widget
- -
The entry widget is created with the elm_entry_add() function, and the text inside the entry can be set with elm_entry_entry_set().
- -
```
-Evas_Object *entry, *parent;
-
-entry = elm_entry_add(parent);
-elm_entry_entry_set(entry, "A short text.");
-
```
- -
Using Text Edition
- -
We can also append text to the end of existing content,
- -
```
-elm_entry_entry_append(entry, "END");
-
```
- -
or insert text at the current cursor position.
- -
```
-elm_entry_entry_insert(entry, "CURSOR");
-Eina_Bool Empty = elm_entry_is_empty(entry);
-
```
- -
Call elm_entry_is_empty() to see whether the entry is empty. Here, the boolean variable Empty will return EINA_FALSE.
- -
By default, the user can enter text in the entry widget when it is in the focus. We can prevent the user from editing text if needed.
- -
```
-elm_entry_editable_set(entry, EINA_FALSE);
-
```
- - - - - - - - - - -
Note
It is still possible to use the previous functions to modify the text of a non-editable entry.
- -
Setting Password Mode
- -
When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).
- -
```
-elm_entry_password_set(entry, EINA_TRUE);
-
```
- -
Entry Line Modes And Wrapping
- -
The entry widget has two line modes:
-
- single line mode
- multiline mode
- -
First, we set the entry in single line mode.
- -
```
-elm_entry_single_line_set(entry, EINA_TRUE);
-
```
- -
In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the "Enter" key in this mode generates an "activate" event instead of adding a new line.
- -
When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing "Enter" creates a new line.
- -
```
-elm_entry_single_line_set(entry, EINA_FALSE);
-elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
-
```
- -
In multiline entries, elm_entry_line_wrap_set() provides a way to cut the text implicitly into a new line when it reaches the far edge of the widget. The following wrap modes are available:
-
- ELM_WRAP_NONE: No wrap
- ELM_WRAP_CHAR: Wrap between characters
- ELM_WRAP_WORD: Wrap in allowed wrapping points (as defined in the unicode standard)
- ELM_WRAP_MIXED: Word wrap, and if that fails, char wrap
- -
Selecting Text
- -
Text selections can be made with different functions. This selects all the content of the entry widget.
- -
```
-elm_entry_select_all(entry);
-
```
- -
We can drop the current selection with
- -
```
-elm_entry_select_none(entry);
-
```
- -
To select part of the text, use elm_entry_select_region_set(). The code below selects the first twenty characters of the entry content.
- -
```
-elm_entry_select_region_set(entry, 0, 20);
-
```
- -
Current selected text within the entry can be retrieved like this.
- -
```
-const char *selection;
-
-selection = elm_entry_selection_get(entry);
-
```
- -
If the entry text is empty, elm_entry_selection_get() will return NULL.
- -
We can copy or cut the selection to the clipboard. (There is an example of a cut below.)
- -
```
-elm_entry_selection_cut(entry);
-
```
- -
This selection can be pasted in the same or a different entry.
- -
```
-elm_entry_selection_paste(entry);
-
```
- -
Controlling Cursor
- -
The cursor represents the current position in the entry, where the next action is done (for example, text insertion or deletion). Usually, the cursor is represented as a blinking character, but that depends on the theme configuration. Cursor position can be modified by using several functions.
- -
It can be moved to the beginning of the entry,
- -
```
-elm_entry_cursor_begin_set(entry);
-
```
- -
or to the end.
- -
```
-elm_entry_cursor_end_set(entry);
-
```
- -
It can be moved one line down or up.
- -
```
-elm_entry_cursor_down(entry);
-elm_entry_cursor_up(entry);
-
```
- -
It can also be moved one character to the left or right,
- -
```
-elm_entry_cursor_prev(entry);
-elm_entry_cursor_next(entry);
-
```
- -
or set at a specific position (15th character, for example).
- -
```
-elm_entry_cursor_pos_set(entry, 15);
-
```
- -
We can start a selection at the current cursor position, move five characters to the right and end the selection.
- -
```
-elm_entry_cursor_selection_begin(entry);
-
-for(i = 0; i < 5; i++)
-{
-   elm_entry_cursor_next(entry);
-}
-
-elm_entry_cursor_selection_end(entry);
-
```
- -
Formatting Text
- -
Text within an entry can be formatted by using markups tags that are defined in the theme. The available markups in the default theme are
-
- <br>: Inserts a line break.
- <ps>: Inserts a paragraph separator. This is preferred over line breaks.
- <tab>: Inserts a tab.
- <em>...</em>: Emphasis. Sets the oblique style for the enclosed text.
- <b>...</b>: Sets the bold style for the enclosed text.
- <link>...</link>: Underlines the enclosed text.
- <hilight>...</hilight>: Highlights the enclosed text.
- -
Using Special Markups
- -
Special markups can be added within the text of the entry.
-
- <a href = ..>...</a>: Anchors
- <item size = .. vsize = .. href = ..>...</item>: Items
- -
Anchors generate an "anchor,clicked" signal when the user clicks on them. The href attribute is used to identify the anchor. It also reacts to the "anchor,in" (mouse in), "anchor,out" (mouse out), "anchor,down" (mouse down), and "anchor,up" (mouse up) events.
- -
The item markup provides a way to insert any Evas_Object in the text. The Evas_Object name has to be specified in the href attribute.
- -
Overriding Style
- -
To tweak the style of the text within the entry widget, it is possible to override parts of the theme style to the textblock object by using elm_entry_text_style_user_push(). This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with elm_entry_text_style_user_pop().
- -
Filtering Text
- -
Text within an entry can be filtered in size. Here we set the maximum number of characters allowed in the entry to eight.
- -
```
-static Elm_Entry_Filter_Limit_Size limit_size = 
-{
-   .max_char_count = 8,
-   .max_byte_count = 0
-};
-
-// Append a new callback to the list, this function will be called each time
-// a text is inserted in the entry. Pass the limit_size struct previously
-// created to set the maximum number of characters allowed to 8
- 
-elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size,
-         &limit_size);
-
```
- -
Content can be filtered by passing an Elm_Entry_Filter_Accept_Set structure. This structure contains the accepted characters and rejected characters. In the example below we reject the '+', '-', '*', and '/' characters.
- -
```
-static Elm_Entry_Filter_Accept_Set accept_set = 
-{
-   .accepted = NULL,
-   .rejected = "+*-/"
-};
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set,
-         &accept_set);
-
```
- -
File Load/Save
- -
The entry content can be saved to a file (/tmp/test.txt, for example).
- -
```
-// Set the file in which the entry text will be saved. This function
-// implicitly loads the existing file content 
-elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
-
```
- -
Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and we can manually save the content when needed.
- -
```
-// Disable autosaving 
-elm_entry_autosave_set(entry, EINA_FALSE);
-
-// Trigger saving when needed 
-elm_entry_file_save(entry);
-
```
- -
Using Entry Theme Content
- -
Two content parts of the default theme are available: "icon" and "end". Here we set an icon in the "end" content part.
- -
```
-Evas_Object *icon;
-
-ic = elm_icon_add(entry);
-elm_image_file_set(ic, "icon.png", NULL);
-elm_object_part_content_set(entry, "end", icon);
-
```
- -
Using Entry Theme Texts
- -
The default theme allows the use of the following text parts:
-
- "default" - text of the entry
- "guide" - placeholder of the entry
- -
This is how to set the placeholder text of the entry to "Hello World".
- -
```
-elm_object_part_text_set(entry, "Hello World");
-
```
- -
Using Entry Callbacks
- -
Entry widget emits the following signals:
-
- "aborted": The escape key is pressed on a single line entry.
- "activated": The enter key is pressed on a single line entry.
- "anchor,clicked": An anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.
- "anchor,down": Mouse button is pressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
- "anchor,hover,opened": The anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.
- "anchor,in": Mouse cursor is moved into an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
- "anchor,out": Mouse cursor is moved out of an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
- "anchor,up": Mouse button is unpressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.
- "changed": The text within the entry is changed.
- "changed,user": The text within the entry is changed because of user interaction. event_info points to an object of the type Edje_Entry_Change_Info.
- "clicked": The entry is clicked (mouse press and release).
- "clicked,double": The entry is double clicked.
- "clicked,triple": The entry is triple clicked.
- "cursor,changed": The cursor position is changed.
- "cursor,changed,manual": The cursor position is changed manually.
- "focused": The entry receives focus. event_info points to an object of the type Elm_Focus_Info.
- "unfocused": The entry loses focus.
- "language,changed": Program language is changed.
- "longpressed": A mouse button is pressed and held for a couple of seconds.
- "maxlength,reached": A maximum length is reached.
- "preedit,changed": The preedit string is changed.
- "press": A mouse button is pressed on the entry.
- "redo,request": The request is redone.
- "selection,changed": The current selection is changed.
- "selection,cleared": The current selection is cleared.
- "selection,copy": A copy of the selected text into the clipboard is requested.
- "selection,cut": A cut of the selected text into the clipboard is requested.
- "selection,paste": A paste of the clipboard contents is requested.
- "selection,start": A selection is begun and no previous selection exists.
- "text,set,done": The whole text is set to the entry.
- "theme,changed": The theme is changed.
- "undo,request": The request is undone.
- -
For signals, where event_info has not been explicitly described, it is set to NULL.
- -
As an example, we register a callback to the "focused" signal.
- -
```
-{
-   evas_object_smart_callback_add(entry, "focused", focused_cb, data);
-}
-
-// Callback function for the "focused" signal
-// This callback is called when the entry receive the focus
- 
-void focused_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
-} 
-
```
- - -
-
-
-
Flip Widget
- Hide -
-
- -
Figure: Flip hierarchy
-

- -
The flip widget can hold two Evas_Objects and allows the user flip between them using several pre-defined animations.
- -
Adding Flip Widget
- -
This is how to create a flip widget.
- -
```
-Evas_Object *flip, *parent, *content1, *content2;
-flip = elm_flip_add(parent);
-
```
- -
We can add content to the flip widget. content1 is set to the "front" content and content2 is set to the "back" mode.
- -
```
-elm_object_part_content_set(flip, "front", content1);
-elm_object_part_content_set(flip, "back", content2);
-
```
- -
Configuring Flip Animation
- -
Now we can run an flip animation.
- -
```
-elm_flip_go(flip, ELM_FLIP_CUBE_UP);
-
```
- -
This animation flips up the "front" content object as if it was on a side of a cube, letting the down facing side of the cube appear with the "back" content object. Several animations are available:
-
- ELM_FLIP_ROTATE_X_CENTER_AXIS - Rotate the content around a horizontal axis.
- ELM_FLIP_ROTATE_Y_CENTER_AXIS - Rotate the content around a vertical axis.
- ELM_FLIP_ROTATE_XZ_CENTER_AXIS - Rotate the content around a diagonal axis.
- ELM_FLIP_ROTATE_YZ_CENTER_AXIS - Rotate the content around a diagonal axis.
- ELM_FLIP_CUBE_LEFT - Rotate the content left as if it was on a side of a cube.
- ELM_FLIP_CUBE_RIGHT - Rotate the content right as if it was on a side of a cube.
- ELM_FLIP_CUBE_UP - Rotate the content up as if it was on a side of a cube.
- ELM_FLIP_CUBE_DOWN - Rotate the content down as if it was on a side of a cube.
- ELM_FLIP_PAGE_LEFT - Move the content to the left as if the flip was a book.
- ELM_FLIP_PAGE_RIGHT - Move the content to the right as if the flip was a book.
- ELM_FLIP_PAGE_UP - Move the content up as if the flip was a book.
- ELM_FLIP_PAGE_DOWN - Move the content down as if the flip was a book.
- -
Interacting With the User
- -
By default, the user cannot interact with the flip. We can set the interaction to be possible, but we have to choose which animation appears on the interaction (rotation has been selected in the following example).
- -
```
-elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
-
```
- -
The available modes of interaction are
-
- ELM_FLIP_INTERACTION_NONE - No interaction is allowed
- ELM_FLIP_INTERACTION_ROTATE - Interaction causes a rotating animation
- ELM_FLIP_INTERACTION_CUBE - Interaction causes a cube animation
- ELM_FLIP_INTERACTION_PAGE - Interaction causes a page animation
- -
We must also choose, which interaction directions are enabled (only right and left in the following example).
- -
```
-elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
-elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
-
```
- -
We can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.
- -
```
-elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
-elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
-
```
- -
Using Flip Callbacks
- -
Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, event_info parameter is NULL.
- -
```
-"animate,begin" - A flip animation is started
-"animate,done" - A flip animation is finished
-
```
- -
We can register a callback on the "animation,begin" signal.
- -
```
-{
-   evas_object_smart_callback_add(entry, "animate,begin", anim_start_cb, data);
-}
-
-// Callback function for the "animate,begin" signal
-// This callback is called when the flip animation starts
- 
-void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Animation starts\n");
-}
```
- -
-
-
-
Gengrid Widget
- Hide -
-
- -
Figure: Gengrid widget
-

- -
Figure: Gengrid hierarchy
-

- -
Gengrid widget is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.
- -
This widget inherits from the layout widget and implements the scroller interface. Thus scroller and layout functions can be used with this widget.
- -
A gengrid may display its items using horizontal or vertical layout. In the first layout, items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.
- -
Adding a Gengrid
- -
We can add a gengrid widget with the following code.
- -
```
-Evas_Object *gengrid, *parent;
-gengrid = elm_gengrid_add(parent);
-
```
- -
Gengrid Items
- -
A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or more boolean states. The number of the text and content depends on the theme used for gengrid items. In the default Tizen gengrid item theme, items can have two content parts that can be set with the "elm.swallow.icon elm.swallow.end" part names.
- -
Creating and Deleting Items
- -
As with genlists, items are allocated and deleted on the go, while the user is scrolling the gengrid. Here we declare a Elm_Gengrid_Item_Class structure to inform the gengrid how to manage items.
- -
```
-static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
-gic->item_style = "default";
-gic->func.text_get = _grid_label_get;
-gic->func.content_get = _grid_content_get;
-gic->func.state_get = _grid_state_get;
-gic->func.del = _grid_del;
-
```
- -
The parameters of this structure will not be detailed here, because they are very similar to that of the genlist. Please refer to the genlist widget page for more detailed information.
- -
Managing Items
- -
As with genlists, items can be added with the elm_gengrid_item_append(), elm_gengrid_item_prepend(), elm_gengrid_item_insert_before() and elm_gengrid_item_insert_after() functions. With the gengrid, there is no need to pass the "type" parameters. They can be cleared with the elm_gengrid_clear() function.
- -
We can set the multiselection mode on.
- -
```
-elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
-
```
- -
When this mode is on, selected items are retrieved with elm_gengrid_selected_items_get(). It returns a list of all the selected items.
- -
When the content of an item changes, we can call elm_gengrid_item_update() to ask the gengrid to update this item's content.
- -
We can also manually select or disable some items with elm_gengrid_item_selected_set() and elm_object_item_disabled_set().
- -
Using Gengrid Callbacks
- -
The gengrid widget emits the following signals:
-
- "activated" - The user has double-clicked or pressed (enter | return | spacebar) on an item. The event_info parameter is the gengrid item that is activated.
- "clicked,double" - The user has double-clicked an item. The event_info parameter is the gengrid item that is double-clicked.
- "longpressed" - The item is pressed for a certain amount of time. By default it is one second.
- "selected" - The user has selected an item. The event_info parameter is the gengrid item that is selected.
- "unselected" - The user has unselected an item. The event_info parameter is the gengrid item that is unselected.
- "realized" - The item in the gengrid has its implementing Evas object instantiated, de facto. event_info is the gengrid item that is created. The object may be deleted at any time, so it is strongly advisable not to use the object pointer returned from elm_gengrid_item_object_get(), because it may point to freed objects.
- "unrealized" - The implementing Evas object for this item is deleted. event_info is the gengrid item that is deleted.
- "changed" - An item is added, removed, resized or moved and the gengrid is resized or has "horizontal" property changes.
- "scroll,anim,start" - Scrolling animation starts.
- "scroll,anim,stop" - Scrolling animation stops.
- "drag,start,up" - The item in the gengrid is dragged (not scrolled) up.
- "drag,start,down" - The item in the gengrid has dragged (not scrolled) down.
- "drag,start,left" - The item in the gengrid is dragged (not scrolled) left.
- "drag,start,right" - The item in the gengrid is dragged (not scrolled) right.
- "drag,stop" - The item in the gengrid stops being dragged.
- "drag" - The item in the gengrid is dragged.
- "scroll" - The content is scrolled (moved).
- "scroll,drag,start" - Dragging the content starts.
- "scroll,drag,stop" - Dragging the content stops.
- "edge,top" - The gengrid is scrolled to the top edge.
- "edge,bottom" - The gengrid is scrolled to the bottom edge.
- "edge,left" - The gengrid is scrolled to the left edge.
- "edge,right" - The gengrid is scrolled to the right edge.
- -
-
-
-
Genlist Widget
- Hide -
-
- -
Figure: Genlist widget
-

- -
Figure: Genlist hierarchy
-

- -
Genlist is a widget that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint (only the visible items are allocated in the memory).
- -
For more information, see the Genlist Tutorial.
- -
Genlist Item Style
- -
An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively "labels", "contents", and "states" in the Edje file. The "default" item style provides one text part ("elm.text"), two content parts ("elm.swalllow.icon" and "elm.swallow.end") and no state parts.
- -
The following item styles are available:
-
- "default"
- "full"
- "one_icon"
- "end_icon"
- "group_index"
- "double_label"
- -
Here are several examples of item styles.
- -
Figure: Default item style
-

- -
Figure: end_icon item style
-

- -
Figure: double_label item style
-

- -
Refer to the Customizing Widgets for creating a new genlist item style.
- -
Adding a Genlist
- -
Genlist widget is added with the elm_genlist_add() function.
- -
```
-Evas_Object *genlist, *parent;
-genlist = elm_genlist_add(parent);
-
```
- -
Creating And Deleting Items
- -
To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a Elm_Genlist_Item_Class structure that informs the genlist widget which callbacks to call when an item is created or deleted.
- -
```
-Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-
-itc->item_style = "default";
-itc->decorate_item_style = NULL;
-itc->decorate_all_item_style = NULL;
-itc->func.text_get = _item_label_get;
-itc->func.content_get = _item_content_get;
-itc->func.state_get = _item_state_get;
-itc->func.del = _item_del;
-
```
- -
The item_style, decorate_item_style, and decorate_all_item_style attributes define the names of the item style, the decorate mode item style and the decorate all item style.
- -
The func structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the elm_genlist_item_append() and related item creation functions, and an obj parameter that points to the genlist object itself.
-
- text_get -
  This function receives a PART parameter that is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the strdup() function) corresponding to the PART parameter. The caller is in charge of freeing the string when done.
- content_get -
  The PART parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired it must return NULL, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is "unrealized".
- state_get -
  The PART parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns EINA_FALSE for false/off or EINA_TRUE for true/on. The default is false. Genlists emit a signal to the PART parameter's theming Edje object with "elm,state,xxx,active" as "emission" and "elm" as "source" argument, when the state is true. xxx is the name of the (state) part.
- del -
  This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.
- -
Managing Items
- -
To add an item, several functions can be used. elm_genlist_item_append() adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. elm_genlist_item_prepend() is otherwise the same but adds to the beginning of the list or children lists. elm_genlist_item_insert_before() inserts an item before the indicated item and elm_genlist_item_insert_after() inserts an item after the indicated item.
- -
The previous functions take a "type" parameter that can be one of the following.
-
- ELM_GENLIST_ITEM_NONE
- ELM_GENLIST_ITEM_TREE
- ELM_GENLIST_ITEM_GROUP
- -
If ELM_GENLIST_ITEM_TREE is set, this item is displayed as being able to expand and have child items. If ELM_GENLIST_ITEM_GROUP is set, this item is a group index item that is displayed at the top until the next group appears.
- -
Figure: Genlist tree
-

- -
The application clears the list with elm_genlist_clear(), which deletes all the items in the list. elm_object_item_del() deletes a specific item. elm_genlist_item_subitems_clear() clears all items that are children of the indicated parent item.
- -
To help inspect list items, move to the item at the top of the list with elm_genlist_first_item_get(), which returns the item pointer. elm_genlist_last_item_get() moves to the item at the end of the list. elm_genlist_item_next_get() and elm_genlist_item_prev_get() move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.
- - - - - - - - - - -
Note
As a tree, the items are flattened on the list, so elm_genlist_item_parent_get() gives you the name of the parent item (even to skip them if needed).
- -
elm_genlist_item_show() scrolls the scroller to show the desired item as visible.
-
elm_object_item_data_get() returns the data pointer set by the item creation functions.
- -
If an item changes (state, boolean, text or content change), use elm_genlist_item_update() for the genlist to update the item. Genlist will re-realize the item and call the functions in the _Elm_Genlist_Item_Class for it.
- -
Selection
- -
Items are manually selected or unselected with elm_genlist_item_selected_set() or disabled with elm_object_item_disabled_set(). In case there is a tree or a group item, the elm_genlist_item_expanded_set() function is used to expand or contract the item.
- - - - - - - - - - -
Note
Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the "expanded" or "contracted" signals.
- -
By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use elm_genlist_multi_select_set() to select multiple items. In single-selection mode, the elm_genlist_selected_item_get() function can be called to retrieve the selected item. If several items are selected, the elm_genlist_selected_items_get() returns a list of the current selected items.
- -
In the picture below, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).
- -
Figure: Genlist widget
-

- -
Using Genlist Callbacks
- -
The genlist widget emits the following signals:
-
- "activated": The user has double-clicked or pressed (enter | return | spacebar) on an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "clicked,double": The user has double-clicked an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "selected": The user selects an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "unselected": The user unselects an item. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.
- "expanded": The item is to be expanded with elm_genlist_item_expanded_set(). This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "contracted": The item is to be contracted with elm_genlist_item_expanded_set(). This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "expand,request": The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "contract,request": The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls elm_genlist_item_expanded_set() to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "realized": The item is created as a real evas object. event_info in the callback function points at an object of the type Elm_Object_Item, that contains the activated item.
- "unrealized": An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "drag,start,up": The item in the list is dragged (not scrolled) up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "drag,start,down": The item in the list is dragged (not scrolled) down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "drag,start,left": The item in the list is dragged (not scrolled) left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "drag,start,right": The item in the list is dragged (not scrolled) right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "drag,stop": The item in the list has stopped being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "drag": The item in the list is being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "longpressed": The item is pressed for a certain amount of time. The default specified time is one second. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "scroll,anim,start": The scrolling animation is started. event_info is NULL.
- "scroll,anim,stop": The scrolling animation is stopped. event_info is NULL.
- "scroll,drag,start": Dragging the content is started. event_info is NULL.
- "scroll,drag,stop": Dragging the content is stopped. event_info is NULL.
- "edge,top": The genlist is scrolled to the top edge. event_info is NULL.
- "edge,bottom": The genlist is scrolled to the bottom edge. event_info is NULL.
- "edge,left": The genlist is scrolled to the left edge. event_info is NULL.
- "edge,right": The genlist is scrolled to the right edge. event_info is NULL.
- "multi,swipe,left": The genlist is multi-touch swiped left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "multi,swipe,right": The genlist is multi-touch swiped right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "multi,swipe,up": The genlist is multi-touch swiped up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "multi,swipe,down": The genlist is multi-touch swiped down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "multi,pinch,out": The genlist is multi-touch pinched out. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "multi,pinch,in": The genlist is multi-touch pinched in. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "swipe": The genlist is swiped. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "moved": A genlist item is moved in the reorder mode. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "moved,after": A genlist item is moved after another item in the reorder mode. To access the relative previous item, use elm_genlist_item_prev_get(). This signal is called along with the "moved" signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "moved,before": A genlist item is moved before another item in the reorder mode. To access the relative previous item, use elm_genlist_item_next_get(). This signal is called along with the "moved" signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.
- "language,changed": The program's language is changed. event_info is NULL.
- "tree,effect,finished": A genlist tree effect is finished. event_info is NULL.
- -
-
-
-
GLView Widget
- Hide -
-
- -
Figure: GLView gears example
-
- -
Figure: GLView hierarchy
-
- - -
This widget renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see OpenGL ES.
- -
Adding a GLView Widget
- -
Create a GLView widget with the elm_glview_add() function.
- -
```
Evas_Object *glview, *parent;
-
-glview = elm_glview_add(parent);
-
```
- -
In this example, the size of the GLView is set to 200x200 pixels.
- -
```
elm_glview_size_set(glview, 200, 200);
-
```
- -
Using GLView API
- -
We can configure the GLView rendering mode by activating the following rendering modes:
- -
- ELM_GLVIEW_ALPHA: Alpha channel rendering mode
- ELM_GLVIEW_DEPTH: Depth buffer rendering mode
- ELM_GLVIEW_STENCIL: Stencil buffer rendering mode
- ELM_GLVIEW_DIRECT: Direct rendering mode
- ELM_GLVIEW_CLIENT_SIDE_ROTATION: The client handles the GL view rotation if direct rendering is enabled
- -
In this example, we enable alpha channel and depth buffer rendering mode.
-
```
-elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
-
```
- -
We decide what to do with the GL surface when the GLView widget is resized.
- -
```
-elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
-
```
- -
The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to ELM_GLVIEW_RESIZE_POLICY_SCALE. In that case, only the image object is scaled, not the underlying GL surface.
- -
This is how to set the GLView rendering policy.
- -
```
-elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
-
```
- -
The glview object is always redrawn during the rendering loop. It can also be set to ELM_GLVIEW_RENDER_POLICY_ON_DEMAND (default function), where glview widget is redrawn only when it is visible.
- -
We can register callbacks:
- -
```
elm_glview_init_func_set(glview, _init_gl_cb);
-elm_glview_del_func_set(glview, _del_gl_cb);
-elm_glview_resize_func_set(glview, _resize_gl_cb);
-elm_glview_render_func_set(glview, _draw_gl_cb);
-
```
- -
elm_glview_init_func_set() registers an init callback that is called at the GLView object creation.
-
elm_glview_del_func_set() registers a del function that is called when the GLView object is deleted.
-
elm_glview_resize_func_set() registers the resize function that is called during the rendering loop when the GLView object is resized.
-
elm_glview_render_func_set() registers the render function that is called when the GLView object must be redrawn.
- -
Using GLView Callbacks
- -
GLView widget emits the following signals:
- -
- "focused" The Glview widget is focused. The event_info parameter points at an object of the type Elm_Focus_Info.
- "unfocused" The GLView object is unfocused.
- -
This is how to register a callback.
-
```
{
-      evas_object_smart_callback_add(glview, "focused", focused_cb, data);
-}
-
-// Callback function for the "focused" signal
-// This callback is called when the GLView is focused
-void focused_cb(void *data, Evas_Object *obj, void  *event_info)
-{
-      Elm_Focus_Info *fi = event_info;
-
-      dlog_print(DLOG_INFO, LOG_TAG, "GLView is focused\n");
-}
-
```
- -
-
-
-
Icon Widget
- Hide -
-
- -
Figure: Icon widget
-

- -
Figure: Icon hierarchy
-

- -
The icon widget inherits from the image widget. It is used to display images in an icon context.
- -
Adding an Icon
- -
We can create an icon and set it as a freedesktop.org "Home" standard icon.
- -
```
-Evas_Object *icon, *parent;
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, "Home");
-
```
- -
Changing Image File
- -
We can change the image by using an image in the filesystem (for example, /tmp/Home.png),
- -
```
-elm_image_file_set(icon, "/tmp/Home.png", NULL);
-
```
- -
or a group in an Edje file (for example, /tmp/Home.edj).
- -
```
-elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
-
```
- -
A thumbnail can be generated and cached for future use. (For this, you need the Ethumb library support.)
- -
```
-elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
-
```
- -
This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.
- -
Using Icon Callbacks
- -
The icon widget emits the following signals:
-
- "thumb,done" - elm_icon_thumb_set() is completed with success.
- "thumb,error" - elm_icon_thumb_set() fails.
- -
In both cases, event_info is NULL;
- -
-
-
-
Image Widget
- Hide -
-
- -
Figure: Image widget
-

- -
Figure: Image hierarchy
-

- -
The image widget can load and display an image from a disk file or a memory region.
- -
Adding an Image Widget
- -
This object is created with elm_image_add().
- -
```
-Evas_Object *image, *parent;
-image = elm_image_add(parent);
-
```
- -
Configuring Image Widget
- -
Various properties of the image can be tuned. First, we disable elementary scaling so that the image does not scale but resizes on both directions.
- -
```
-elm_image_no_scale_set(image, EINA_TRUE);
-elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
-
```
- -
When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.
- -
```
-elm_image_smooth_set(image, EINA_TRUE);
-
```
- -
Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.
- -
```
-elm_image_preload_disabled_set(image, EINA_TRUE);
-
```
- -
The image can be rotated or flipped. Here we rotate our image 180 degrees.
- -
```
-elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
-
```
- -
The following orientations are available:
-
- ELM_IMAGE_ORIENT_0: No orientation change
- ELM_IMAGE_ROTATE_90: Rotate the image 90 degrees clockwise
- ELM_IMAGE_ROTATE_180: Rotate the image 180 degrees clockwise
- ELM_IMAGE_ROTATE_270: Rotate the image 90 degrees counter-clockwise
- ELM_IMAGE_FLIP_HORIZONTAL: Flip the image horizontally
- ELM_IMAGE_FLIP_VERTICAL: Flip the image vertically
- ELM_IMAGE_FLIP_TRANSPOSE: Flip the image along the bottom-left to top-right line
- ELM_IMAGE_FLIP_TRANSVERSE: Flip the image along the top-left to bottom-right line
- -
If we want to keep the original aspect ration when resizing the image, we must define how the image fits into the object's area.
- -
```
-// Tell the image to keep original aspect ratio 
-elm_image_aspect_fixed_set(image, EINA_TRUE);
-// Then let the image fit the entire object 
-elm_image_fill_outside_set(image, EINA_TRUE);
-
```
- -
In this configuration, part of the image may go outside the object. If elm_image_fill_outside_set is set to EINA_FALSE, the image stays inside the limits of the parent object.
- -
Using Image Callbacks
- -
The image widget emits the signals below:
-
- "drop": The user drops an image typed object onto the object in question - the event info argument is the path to that image file
- "clicked": The user clicks the image. event_info is NULL.
- -
Here is how to register a callback when a user clicks on the image:
- -
```
-{
-   evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
-}
-
-// Callback function for the "clicked" signal
-// This callback is called when the image is clicked
- 
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
-}
-
```
- -
-
-
-
Index Widget
- Hide -
-
- -
Figure: Index widget
-

- -
Figure: Index hierarchy
-

- -
An index widget gives you an index for fast access to whichever group of other UI items you have. By default hidden, the index appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index widget's container. Generally, an index is used together with lists, generic lists or generic grids.
- -
Adding an Index Widget
- -
Call elm_index_add() to create a new index widget.
- -
```
-Evas_Object *index, *parent;
-index = elm_index_add(parent);
-
```
- -
Adding Items
- -
Here we add the listitem object at the letter "A", calling the smart callback it_select_cb() when this item is selected.
- -
```
-Elm_Object_Item *list_item1, *list_item2;
-elm_index_item_append(index, "A", it_select_cb, list_item1);
-
```
- -
This is how to define the smart callback.
- -
```
-// Callback function called when the list_item1 object
-// is selected
-void it_select_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
-}
-
```
- -
In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with elm_index_item_prepend().
- -
Sorting Index Items
- -
We can insert index items using a sorting function. Indexes can be sorted, for example, by alphabetic order.
- -
We must write a compare function that returns a positive int, 0 or a negative int when the data2 item parameter is respectively greater than, equal to or lower than the data1 parameter.
- -
```
-static int
-_index_icmp(const void *data1,
-      const void *data2)
-{
-   int result;
-
-   // Code that does the item comparison will be written here
-
-   return result;
-}
-
```
- -
We add a new item at the "B" index using the compare function to sort the indexes.
- -
```
-elm_index_item_sorted_insert(index, "B", NULL, list_item2, _index_icmp, NULL);
-
```
- -
Using Index Callbacks
- -
The index widget emits the following signals:
-
- "changed" - The selected index item changes. event_info is the selected item's data pointer.
- "delay,changed" - The selected index item changes, but after a small idling period. event_info is the selected item's data pointer.
- "selected" - The user releases a mouse button and selects an item. event_info is the selected item's data pointer.
- "level,up" - The user moves a finger from the first level to the second level.
- "level,down" - The user moves a finger from the second level to the first level.
- -
When the user selects an item in the index, the "selected" signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.
- -
```
-static void
-_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   Elm_Object_Item *lit = event_info;
-
-   // Code that does the desired action
-}
-
```
- -
Then we register this callback to the "selected" signal.
- -
```
-evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
-
```
- -
-
-
-
Label Widget
- Hide -
-
- -
Figure: Label widget
-

- -
Figure: Label hierarchy
-

- -
The label widget displays text with simple html-like markup.
- -
Adding a Label
- -
To add a label and set the text in it, use the following functions.
- -
```
-Evas_Object *label = elm_label_add(win);
-
-elm_object_text_set(label, "Some long text for our label, that is not so
-         long");
-
```
- -
Using Label Styles
- -
Label displays the text with several predefined styles.
-
- default: No animation
- marker: The text is centered and bolded.
- slide_long: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).
- slide_short: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.
- slide_bounce: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.
- -
Here we set the style to "slide_long".
- -
```
-elm_object_style_set(label, "slide_long");
-
```
- -
Configuring the Label
- -
The duration of the animation and the slide mode can be set.
- -
```
-elm_label_slide_duration_set(label, 3);
-elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
-
```
- -
The style can be modified.
- -
```
-elm_object_style_set(label, "slide_bounce");
-
```
- -
Using Label Callbacks
- -
This widget emits the following signals:
-
- "language,changed": The program's language changes.
- "slide,end": The slide reaches the end.
- "anchor,clicked": The anchor is clicked. event_info points to an object of the type Elm_Label_Anchor_Info.
- "anchor,mouse,down" event_info points to an object of the type Elm_Label_Anchor_Info.
- "anchor,mouse,up" event_info points to an object of the type Elm_Label_Anchor_Info.
- -
Here we register a callback on the "slide,end" signal.
- -
```
-{
-
-   evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
-
-}
-
-// Callback function for the "slide,end" signal
-// This callback is called when the label slide reaches the end
-
-void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
-}
-
```
- -
-
-
-
List Widget
-Hide -
-
-
Figure: List widget
-

- -
Figure: List hierarchy
-

- - -
This widget is a very simple type of a list widget. It is not to be used to manage a lot of items. For that, genlists are a better option.
- -
The list items can contain a text and two contents ("start", and "end"). These are set with the elm_object_item_*() functions.
- -
Adding a List Widget
- -
```
-Evas_Object *list, *parent;
-
-// Create a list 
-list = elm_list_add(parent);
-
```
- -
Using the List
- -
This widget implements the scrollable interface, so the scroller widget functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:
- -
```
-Evas_Object *list;
-
-// Change the scroller policy to fix the scroll only vertically
-elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
-// Enable bounce effect when the list reaches the upper and lower limits 
-elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
-
```
- -
The elm_list_multi_select_set() function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to "selected".
- -
```
-Evas_Object *list;
-
-// Activate multi selection 
-elm_list_multi_select_set(list, EINA_TRUE);
-
```
- -
Adding Item to the List
- -
Items are added with elm_list_item_append() or elm_list_item_prepend(). Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.
- -
```
-Evas_Object *list;
-int i;
-
-// This function is called when the list item is selected 
-static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
-   Eina_Bool selected = elm_list_item_selected_get(list_it);
-   dlog_print(DLOG_INFO, LOG_TAG, "item is %s\n", selected? "selected": "unselected");
-}
-
-for (i = 0; i < 10; i++)
-{
-   Evas_Object *ic;
-   char tmp[8];
-   snprintf(tmp, sizeof(tmp), "Item %02d", i);
-   // Create an icon 
-   ic = elm_icon_add(win);
-   // Set the file to the icon file 
-   elm_image_file_set(ic, "path/to/file", NULL);
-   // Add item to the list 
-   elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
-}
-
-
```
- -
Changing Text Or Icon of an Item
- -
If you want to change the state of an item, you can do it by using all the functions relative to Elm_Object_Item. Each item of the list contains two evas_object. Give those as the third and the fourth arguments when you append or prepend the item in the list. Those evas objects are changed with elm_object_item_part_content_set. The first object is referenced as the "start" object in the theme, whereas the second one is referenced as the "end" object. Give these names when you use the elm_object_item_part_content_set. The label of the item is changed by using elm_object_item_text_set.
- -
```
-Evas_Object *list;
-Eina_List *l;
-Elm_Object_Item *it;
-
-// Retrieve the current selected item 
-it = elm_list_selected_item_get(list);
-if (!it)
-   return;
-
-ic = elm_icon_add(win);
-// Set the file to the icon file 
-elm_image_file_set(ic, "path/to/file", NULL);
-// Change the first icon 
-elm_object_item_part_content_set(it, "start", ic);
-// Change the second icon 
-elm_object_item_part_content_set(it, "end", ic);
-// Change the label 
-elm_object_item_text_set(it, "I've been selected !");
-
```
- -
Retrieving Selected Items
- -
The list of the currently selected items is retrieved with elm_list_selected_items_get(). If the multiselect mode is false, you can retrieve the only selected item with elm_list_selected_item_get(). For example, this is how to unselect all previously selected items.
- -
```
-Evas_Object *list; Eina_List *l;
-Eina_List *selected_items;
-// List of Elm_Object_Item 
-Elm_Object_Item *it;
-
-selected_items = elm_list_selected_items_get(list);
-EINA_LIST_FOREACH(selected_items, l, it)
-   elm_list_item_selected_set(it, EINA_FALSE);
-
```
- -
List Item Operations
- -
To find out if an item is selected, call elm_list_item_selected_get. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.
- -
Elementary list provides two functions for sliding a list to a specific item. elm_list_item_show shows the item passed as an argument, whereas elm_list_item_bring_in shows the item, but only after animating the slide.
- -
You can go to the item immediately preceding a specific item with the function elm_list_item_prev, or to the one immediately following a specific item with the function elm_list_item_next.
- -
The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen.
- -
```
-Evas_Object *list;
-Elm_Object_Item *current, *next;
-current = elm_list_selected_item_get(list);
-elm_list_item_selected_set(current, EINA_FALSE);
-next = elm_list_item_next(current);
-elm_list_item_selected_set(next, EINA_TRUE);
-elm_list_item_bring_in(next);
-
```
- -
Using List Callbacks
- -
The list emits the following signals:
-
- "activated": The user double-clicks or presses (enter | return | spacebar) on an item. The event_info parameter of the callback function contains a pointer to the item activated.
- "clicked,double": The user double-clicks an item. The event_info parameter of the callback function contains a pointer to the item activated.
- "selected": The user selects an item. The event_info parameter of the callback function contains a pointer to the item activated.
- "unselected": The user unselects an item. The event_info parameter of the callback function contains a pointer to the item activated.
- "longpressed": The user long-presses an item. The event_info parameter of the callback function contains a pointer to the item activated.
- "edge,top": The list is scrolled to the top edge.
- "edge,bottom": The list is scrolled to the bottom edge.
- "edge,left": The list is scrolled to the left edge.
- "edge,right": The list is scrolled to the right edge.
- "highlighted": The user highlights an item on the list. The event_info parameter of the callback function contains a pointer to the item activated.
- "unhighlighted": The user unhighlights an item in the list. The event_info parameter of the callback function contains a pointer to the item activated.
- -
You can register to the "clicked,double" signal with the following code. Note that the currently double-clicked item can be retrieved via the event_info pointer. This code registers to the "double,clicked" signal and unselects the item that has been double-clicked.
- -
```
-{
-   Evas_Object *list;
-
-   evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
-}
-
-// Callback function for the "clicked" signal
-// This callback is called when the button is clicked by the user
-void double_clicked_cb(void *data, Evas_Object *obj, void  *event_info)
-{
-   elm_Object_Item *it = event_info;
-   elm_list_selected_item_set(it,  EINA_FALSE);
-}
-
```
-
-
-
-
Map Widget
- Hide -
-
- -
Figure: Map hierarchy
-

- -
The map widget displays a geographic map. The default map data are provided by the OpenStreetMap project (http://www.openstreetmap.org/). Custom providers can also be added.
- -
This widget supports
-
- zooming
- scrolling
- markers with content to be displayed when user clicks over them
- group of markers
- routes
- -
The map widget implements the scroller interface so that all the functions that work with the scroller widget also work with maps.
- -
Adding a Map
- -
Once created with the elm_map_add() function, zoom level x12 can be set.
- -
```
-Evas_Object *map, *parent;
-
-map = elm_map_add(parent);
-elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
-elm_map_zoom_set(map, 12);
-
```
- -
Here the zoom mode is set to manual, but it can also be set to the ELM_MAP_ZOOM_MODE_AUTO_FIT mode and the ELM_MAP_ZOOM_MODE_AUTO_FILL mode. In that case however, the elm_map_zoom_set() function cannot be used.
- -
Playing with the Map
- -
If we have coordinates of a specific area (2 2 N, 48 8 E), we can show it on the map.
- -
```
-elm_map_region_show(map, 2.2, 48.8);
-
```
- -
This shows the desired coordinates. We can also show the location with a bring-in animation.
- -
```
-elm_map_region_bring_in(map, 2.2, 48.8);
-
```
- -
The map is rotated 90 degrees around the current position.
- -
```
-elm_map_rotate_set(map, 90, 2.2, 48.8);
-
```
- -
Drawing Overlays
- -
Overlays are markers that can be placed anywhere on the map. They can represent any object we want to put on the map.
- -
Creating an Overlay Class
- -
Overlay classes can be created if several objects are of the same type. For example, we create a forest overlay class to represent the forests visible on the map. We set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.
- -
We set an icon ("Home" icon here) to the forest class. This icon is displayed in place of the forest class on the map.
- -
```
-Evas_Object *icon;
-Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
-
-// Set min zoom level at which class is displayed
-elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
-
-// Create a Home icon object and set it to the forest class 
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "home");
-elm_map_overlay_icon_set(forest_class, icon);
-
```
- -
Adding Overlays to a Class
- -
After creating a forest class, we can add overlay objects to it. Here we create an overlay for the Meudon forest. Data is linked to the overlay with the elm_map_overlay_data_set() function. We set the name of the forest in the data. The icon can be set to the overlay with the elm_map_overlay_icon_set() function.
- - - - - - - - - - -
Note
Do not use the same icon object for two different overlays. Create a new icon object each time you need one.
- -
```
-Elm_Map_Overlay *ovl;
-const char* data_meudon = "Meudon forest";
-const char* data_fausses = "Fausse forest";
-
-// Add an overlay
-ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "stop");
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &data_meudon);
-
-// Add the new ovl object to the forest class 
-elm_map_overlay_class_append(forest_class, ovl);
-
-// Add another overlay next to the first one 
-ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "stop");
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &data_fausses);
-elm_map_overlay_class_append(forest_class, ovl);
-
```
- -
If we add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. We can define on which zoom level items are grouped.
- -
```
-elm_map_overlay_class_zoom_max_set(forest_class, 8);
-
```
- -
In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.
- -
Creating Bubbles Following Overlays
- -
This is how to set a content in a bubble following an overlay.
- -
```
-// Add an overlay bubble object 
-Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
-
-// Set it to follow a specific overlay (the last created one here) 
-elm_map_overlay_bubble_follow(bubble, ovl);
-
```
- -
Once following an overlay, the bubble appears, moves or hides following the parent overlay's behavior.
- -
Content is added to the bubble with the elm_map_overlay_bubble_content_append() function.
- -
Adding Other Overlays
- -
We can draw a circle on the map with coordinates and a radius size.
- -
```
-Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
-
```
- -
We can also add a scale at the 200x0 coordinate (in pixels).
- -
```
-Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
-
```
- -
Or we can draw a line, a polygon, or a route. See the full API for a full description of these functions.
- -
Calculating Routes
- -
A route between a starting point and an ending point is calculated with the elm_map_route_add() call. The type of transport and the routing calculation method can be provided so as to have the desired result.
- -
In this example, we want a route calculation between the first and the second overlay. We configure it to use the bicycle, and we want to find the fastest route in time.
- -
```
-Elm_Map_Route *route = elm_map_route_add(map,
-         ELM_MAP_ROUTE_TYPE_BICYCLE,
-         ELM_MAP_ROUTE_METHOD_FASTEST,
-         2.20718, 48.79759,
-         2.1699, 48.8189,
-         NULL, NULL);
-
-// Add a callback to when the route has been calculated and loaded 
-evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
-
```
- -
Once the route is calculated, we can create a route overlay object and change its color. In this example, we use the "route,loaded" callback.
- -
```
-static void
-_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
-{
-   Elm_Map_Route *route = data;
-
-   Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
-   elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
-}
-
```
- -
Using Map Callbacks
- -
The map widget emits the following callbacks:
-
- "clicked" - The user has clicked the map without dragging around.
- "clicked,double" - The user has double-clicked the map.
- "press" - The user has pressed down on the map.
- "longpressed" - The user has pressed down on the map for a long time without dragging around.
- "scroll" - The content is scrolled (moved).
- "scroll,drag,start" - Dragging the contents around starts.
- "scroll,drag,stop" - Dragging the contents around stops.
- "scroll,anim,start" - Scrolling animation starts.
- "scroll,anim,stop" - Scrolling animation stops.
- "zoom,start" - Zoom animation starts.
- "zoom,stop" - Zoom animation stops.
- "zoom,change" - The zoom is changed when using an auto zoom mode.
- "tile,load" - A map tile image load begins.
- "tile,loaded" - A map tile image load ends.
- "tile,loaded,fail" - A map tile image load fails.
- "route,load" - Route request begins.
- "route,loaded" - Route request ends.
- "route,loaded,fail" - Route request fails.
- "name,load" - Name request begins.
- "name,loaded" - Name request ends.
- "name,loaded,fail" - Name request fails.
- "overlay,clicked" - An overlay is clicked.
- "loaded" - The map is loaded.
- -
-
-
-
Notify Widget
- Hide -
-
- -
Figure: Notify hierarchy
-

- -
This widget displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.
- -
Adding a Notify Widget
- -
This is how to create a notify object.
- -
```
-Evas_Object *notify, *parent;
-notify = elm_notify_add(parent);
-
```
- -
Configuring Notify Widget
- -
We create a label and add it to the notify object.
- -
```
-Evas_Object *content;
-
-// Create the label and set some text to it 
-content = elm_label_add(parent);
-
-elm_object_text_set(content, "A label text");
-evas_object_show(content);
-
-// Add the label object to the notify widget
-elm_object_content_set(notify, content);
-
```
- -
In this example, we show the notify object on the bottom left corner of the parent object.
- -
```
-elm_notify_align_set(notify, 1.0, 1.0);
-evas_object_show(notify);
-
```
- -
We can set a timeout interval, after which the notify widget is hidden. In this example, the timeout interval is five seconds.
- -
```
-elm_notify_timeout_set(notify, 5.0);
-
```
- -
Using Notify Callbacks
- -
The notify widget emits the following signals:
-
- "timeout" - The timeout count ends and the notify is hidden
- "block,clicked" - The user clicks outside of the notify
- -
For both these signals event_info is NULL.
- -
Here we register a callback on the "timeout" signal.
- -
```
-{
-   evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
-}
-
-// Callback function for the "timeout" signal
-// The timeout expires and the notify object is hidden
- 
-void timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Notify is hidden\n");
-}
-
```
- -
-

- Hide -

Figure: Panel hierarchy

Panel hierarchy

The panel widget is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.

- -

Panel inherits from layout widget, so the layout API can be used on this widget.

- -

- -

This is how to add a panel and set its orientation to left.

- -

-Evas_Object *panel, *parent;
-
-panel = elm_panel_add(parent);
-elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
-

- -

- -

The panel is manually hidden.

- -

-elm_panel_hidden_set(pan, EINA_TRUE);
-

- -

It can be toggled if we do not know the hidden state of the widget.

- -

-elm_panel_toggle(pan);
-

- -

It can be set scrollable.

- -

-elm_panel_scrollable_set(pan, EINA_TRUE);
-

- -

- -

Tizen SDK has implemented a layout theme to add a drawer in the application. In this example, we add a new Elementary layout object and set the theme of this layout to the drawer.

- -

-Evas_Object *layout;
-
-// Create a new layout object 
-layout = elm_layout_add(parent);
-
-// Set the "drawer" group theme and "panel" style to it 
-elm_layout_theme_set(layout,"layout", "drawer", "panel");
-
-// Show the new layout
-evas_object_show(layout);
-

- -

Once the panel object is created, we can swallow it in the new layout.

- -

-elm_object_part_content_set(layout, "elm.swallow.left", pan);
-

- -

We can set content to the "elm.swallow.bg" and "elm.swallow.content" parts of the layout.

- -

-// Panel Background (Dimmed Area) 
-Evas_Object *bg = create_bg(layout);
-elm_object_part_content_set(layout, "elm.swallow.bg", bg);
-
-// Add content to the drawer 
-Evas_Object *content;
-elm_object_part_content_set(layout, "elm.swallow.content", content);
-

- -

- -

We can register a callback on the "scroll" signal, when the user scrolls the panel. The event_info parameter is of the type Elm_Panel_Scroll_Info.

- -

-{
-   evas_object_smart_callback_add(pan, "scroll", scroll_cb, data);
-}
-// Callback function for the "scroll" signal
-// This callback is called when the user scrolls the panel
- 
-void scroll_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   Elm_Panel_Scroll_Info *scrollinfo = event_info;
-   dlog_print(DLOG_INFO, LOG_TAG, "The panel was scrolled.\n");
-}
-

- -

-
-
Photo Widget
- Hide -
-
- -
Figure: Photo hierarchy
-

- -
The photo widget is used to display a photo (such as a contact image). If no photo is set on it, it displays a person icon to show that it is a photo placeholder.
- -
Adding a Photo Widget
- -
This is how to create a photo object.
- -
```
-Evas_Object *photo, *parephotoslider = elm_photo_add(parent);
-photo = elm_photo_add(parent);
-
```
- -
Using Photo Widget
- -
A file can be set to the photo widget. Here, PHOTO_FILENAME is a string corresponding to the photo file name on the system.
- -
```
-elm_photo_file_set(photo, PHOTO_FILENAME);
```
- -
We can set the photo as editable, so it can be copied, cut or dragged in another region of the screen.
- -
```
-elm_photo_editable_set(photo, EINA_TRUE);
```
- -
It can also be completely visible on the screen.
- -
```
-elm_photo_fill_inside_set(photo, EINA_TRUE);
```
- -
Using Photo Callbacks
- -
The following callbacks are registered on the photo widget.
-
- "clicked" - The user has clicked the photo.
- "drag,start" - The user starts dragging the inner image out of the photo's frame.
- "drag,end" - The user drops the dragged image.
- -
event_info is always NULL.
- -
-
-
-
Photocam Widget
- Hide -
-
- -
Figure: Photocam hierarchy
-

- -
The photocam widget displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast and fit it nicely. It is optimized for .jpeg images format and has a low memory footprint.
- -
This widget implements the scroller interface, so all the functions concerning the scroller can be used with the photocam widget.
- -
Adding a Photocam Widget
- -
This is how to create a photocam widget and set an image file on it.
- -
```
-Evas_Object *photocam;
-photocam = elm_photocam_add(win);
-elm_photocam_file_set(photocam, "/tmp/photo.jpeg");
-
```
- -
Using Photocam Zoom
- -
We can choose between two automatic zoom modes and a manual zoom mode. Here we set the zoom mode to manual and ask for a double zoom.
- -
```
-elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
-elm_photocam_zoom_set(photocam, 2.0);
-
```
- -
The zoom mode can be set to ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL to fill all the pixels of the photocam widget.
- -
Multi-touch zooming is activated by enabling gestures.
- -
```
-elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
-
```
- -
We can zoom in a specific region. In this example, we want to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.
- -
```
-elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
-
```
- -
Using Photocam Callbacks
- -
The photocam widget emits the following signals:
-
- "clicked" - The user has clicked the photo without dragging around.
- "press" - The user has pressed down on the photo.
- "longpressed" - The user has pressed down on the photo for a long time without dragging around.
- "clicked,double" - The user has double-clicked the photo.
- "load" - The photo load begins.
- "loaded" - The image file load is complete for the first view (a low resolution blurry version).
- "load,detail" - A photo detailed data load begins.
- "loaded,detail" - The image file load is complete for the detailed image data (full resolution is needed).
- "zoom,start" - Zoom animation starts.
- "zoom,stop" - Zoom animation stops.
- "zoom,change" - The zoom is changed when using an auto zoom mode.
- "scroll" - The content is scrolled.
- "scroll,anim,start" - Scrolling animation starts.
- "scroll,anim,stop" - Scrolling animation stops.
- "scroll,drag,start" - Dragging the content around starts.
- "scroll,drag,stop" - Dragging the content around stops.
- -
For all these signals, event_info is NULL.
- -
This is how to register a callback on the "loaded" signal.
- -
```
-void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
-{
-   evas_object_smart_callback_add(photocam, "loaded", loaded_cb, data);
-}
-
-// Callback function for the "loaded" signal
-// The photocam has loaded the photo file in a low resolution
- 
-void loaded_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "The photo has been loaded\n");
-}
-
```
- -
-
-
-
Plug Widget
- Hide -
-
- -
Figure: Plug hierarchy
-

- -
The plug widget shows an Evas_Object created by an other process. It can be used anywhere the same way as any other elementary widget.
- -
Adding Plug Widget
- -
This is how to create a plug.
- -
```
-Evas_Object *plug, *parent;
-plug = elm_plug_add(parent);
-
```
- -
Using the Plug
- -
The socket image provides the service where we can connect the plug object with the elm_plug_connect() function. In this process we use the service name and number set by the socket we want to connect to.
- -
As an example, we connect to a service named "plug_test" on the number 0.
- -
```
-elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
-
```
- -
The Evas_Object corresponding to the distant image is retrieved with the elm_plug_image_object_get() function.
- -
```
-Evas_Object *plug_img = elm_plug_image_object_get(plug);
-
```
- - - - - - - - - - -
Note
The socket we try to connect to must be started with the elm_win_socket_listen() function in the other process on the remote window object (it is called remote_win here).
- -
```
-// Create a remote window in the other process 
-Elm_Win *remote_win = elm_win_add(NULL,
-   "Window Socket",
-   ELM_WIN_SOCKET_IMAGE);
-// Create a socket named "plug_test" and listen to it
-elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
-
```
- -
-
-
-
Popup Widget
- Hide -
-
- -
Figure: Popup widget
-
- -
Figure: Popup hierarchy
-
- - -
The popup widget shows a popup area that may contain
-
- a title area (optional)
- a content area
- an action area (optional)
- -
The optional title area may contain an icon and text, the action area may contain up to three buttons.
- -
Adding a Popup
- -
This is how to create a popup widget.
-
```
-Evas_Object *popup, *parent;
-
-// Creating a popup 
-popup = elm_popup_add(parent);
-
```
- -
Using Popup Styles
- -
A popup has two different styles.
-
- "popup"
- "toast"
- -
Here we set the style of the popup to "toast".
- -
```
elm_object_style_set(popup, "toast");
```
- -
Setting the Popup Areas
- -
We configure the title area. We set the icon object using the part name "title,icon". We set the title text to "Test popup" using the partname "title,text".
- -
```
-Evas_Object *icon;
-
-// Adding an icon to the title area 
-elm_object_part_content_set(popup, "title,icon", icon);
-
-// Setting the title text 
-elm_object_part_text_set(popup, "title,text", "Test popup");
-
```
- -
We set the content of the popup. It can be a simple text
- -
```
elm_object_part_text_set(popup, "default", "Test popup");
```
- -
or an Evas object.
- -
```
-Evas_Object *content;
-
-elm_object_content_set(popup, content);
-
```
- -
We set the buttons of the action area by creating an "OK" button, a "Cancel" button and a "Help" button.
- -
```
-Evas_Object *button1, *button2, *button3;
-
-// Create the three buttons 
-
-button1 = elm_button_add(popup);
-elm_object_text_set(button1, "OK");
-
-button2 = elm_button_add(popup);
-elm_object_text_set(button2, "Cancel");
-
-button3 = elm_button_add(popup);
-elm_object_text_set(button3, "Help");
-
-// Set the buttons to the action area 
-elm_object_part_content_set(popup, "button1", button1);
-elm_object_part_content_set(popup, "button2", button2);
-elm_object_part_content_set(popup, "button3", button3);
-
```
- -
Using Popup Callbacks
-
The popup emits the following signals:
-
- "timeout" - The popup is closed as a result of timeout.
- "block,clicked" - The user clicks on the Blocked Event area.
- -
elm_popup_timeout_set() is used to hide the popup after a certain time. In this example, we set the timeout to five seconds.
- -
```
elm_popup_timeout_set(popup, 5.0);
```
- -
When the timeout expires, the "timeout" signal is sent to the user.
- -
```
{
-   evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
-}
-
-static void
-_timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
-}
-
```
- -
The visible region of the popup is surrounded by a translucent region called Blocked Event area. By clicking on this area, the signal "block,clicked" is sent to the application.
- -
-
-
-
Progressbar Widget
- Hide -
-
- -
Figure: Progressbar widget
-
- -
Figure: Progressbar hierarchy
-
- - -
Adding the Progressbar Widget
- -
This widget is used to display the progress status of a given job. It inherits from the layout widget, so all function concerning the layout widget is used on the progressbar widget.
-
This is how to create a progressbar widget.
- -
```
Evas_Object *pb = elm_progressbar_add(win);
```
-
Using Progressbar Styles
- -
The progressbar has several styles:
-
- "default"
- "pending_list"
- "process_large"
- "process_medium"
- "process_small"
- -
We set the style of the progressbar to "pending_list".
- -
```
elm_object_style_set(pb, "pending_list");
```
- -
Using the Progressbar
- -
By default, the progressbar does not show a label or an icon, and the unit label is set to "%.0f %%".
- -
This is how to set a label (in this example, it is named "Test label").
- -
```
elm_object_text_set(pb, "Test label");
```
- -
An icon is set with elm_object_part_content_set() using the partname "icon".
-
```
elm_object_part_content_set(pb, "icon", icon_object);
```
- -
The unit label format string can be modified using a "printf" style format. We set it to be a float number with two decimals.
-
```
elm_progressbar_unit_format_set(pb, "%1.2f%%");
```
- -
Configuring the Progressbar
- -
The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.
- -
```
elm_progressbar_pulse_set(pb, EINA_TRUE);
-elm_progressbar_pulse(pb, EINA_TRUE);
-
```
- -
It can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.
- -
```
elm_progressbar_inverted_set(pb, EINA_TRUE);
```
- -
The progressbar emits the "changed" signal when the progress value changes. The value is changed with the elm_progressbar_value_set() function. Here the pb progress value is set to 20%.
-
```
elm_progressbar_value_set(pb, 0.2);
```
- -
The current value can be read.
-
```
double value = elm_progressbar_value_get(pb);
```
- -
We can set the orientation of the progressbar to vertical instead of the default horizontal orientation.
-
```
elm_progressbar_horizontal_set(pb, EINA_FALSE);
```
- -
Using Progressbar Callbacks
- -
The "changed" signal is the only signal specifically emitted by the progressbar widget.
-
This is how to register a callback on this signal.
- -
```
{
-   evas_object_smart_callback_add(pb, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the progressbar value changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
-}
-
```
- -
-
-
-
Radio Widget
- Hide -
-
- -
Figure: Radio widget
-
- -
Figure: Radio hierarchy
-
- -
This widget displays one or more options, but the user can only select one of them. It is composed of an indicator (selected/unselected), an optional icon and an optional label. Usually grouped with two or more other radio objects, it can also be used alone.
-
The radio widget inherits from the layout widget. All the layout functions can be used with radio objects.
- -
Adding a Radio Widget
- -
We create a radio widget and set a label to it.
-
```
Evas_Object *radio, *parent;
-
-// Creating a radio
-radio = elm_radio_add(parent);
-
-// Set a label to it
-elm_object_text_set(radio, "Radio widget");
-
```
- -
We set an icon to the radio object.
-
```
-// Create a Home icon 
-Evas_Object *icon;
-
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, "home");
-
-// Set it to the radio widget 
-elm_object_part_content_set(radio, "icon", icon);
-
```
- -
Changing Radio Value
- -
The user can select one of a set of values with the radio widget. Each radio object from a group of radio objects represents an integer value. Here we set the value one to the new radio object.
-
```
elm_radio_state_value_set(radio, 1);
```
- -
Managing Radio Groups
- -
We create a group of radio objects with at least two radio widgets.
- -
```
-// Create another radio object 
-Evas_Object *radio2 = elm_radio_add(parent);
-elm_radio_state_value_set(radio2, 2);
-
-// Create a group composed of radio and radio2
-Evas_Object *group = radio;
-elm_radio_group_add(radio2, group);
-
```
- -
Now that we have a group composed of two radio objects, we can choose which one is selected. Here we select radio2.
- -
```
elm_radio_value_set(group, 2);
```
- -
We can use elm_radio_value_get() to see the currently selected radio of the group.
- -
Using Radio Callbacks
- -
When the state of a radio is modified in a group of radio objects, the "changed" signal is emitted.
-
This is how to register a callback on this signal.
- -
```
{
-   evas_object_smart_callback_add(radio, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the radio value changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
-}
-
```
- -
-
-
-
Segmentcontrol Widget
- Hide -
-
- -
Figure: Segmentcontrol with text
-
- -
Figure: Segmentcontrol with icons
-
- -
Figure: Segmentcontrol hierarchy
-
- -
This widget consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.
-
This widget inherits from the layout widget, so all the layout widgets API can be used on segmentcontrol objects.
- -
Adding Segmentcontrol Widget
- -
This is how to add a segmentcontrol widget.
- -
```
Evas_Object *segcontrol, *parent;
-
-segcontrol = elm_segment_control_add(parent);
-
```
- -
Adding Items
- -
We can add items to it. Here we add four items containing only text labels (no icons).
-
```
Elm_Object_Item *it;
-
-elm_segment_control_item_add(segcontrol, NULL, "item1");
-elm_segment_control_item_add(segcontrol, NULL, "item2");
-elm_segment_control_item_add(segcontrol, NULL, "item3");
-it = elm_segment_control_item_add(segcontrol, NULL, "item4");
-
```
- -
We can insert an item at a specific position starting at 0
-
```
elm_segment_control_item_insert_at(segcontrol, NULL, "item7", 2);
```
- -
or delete an item.
-
```
elm_segment_control_item_del_at(segcontrol, 2);
```
-
We can also set the selected state of an item manually
-
```
elm_segment_control_item_selected_set(it, EINA_TRUE);
```
-
or disable the whole segment control.
-
```
elm_object_disabled_set(segcontrol, EINA_TRUE);
```
- -
Using the Segmentcontrol Callbacks
- -
This is how to register a callback on the "changed" signal. It is called when the user clicks on a segment item which is not previously selected. The event_info parameter is the segment item pointer.
-
```
{
-   evas_object_smart_callback_add(segcontrol, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the segcontrol selected item changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   Elm_Segment_Item *it = event_info;
-
-   dlog_print(DLOG_INFO, LOG_TAG, "The selected segment item has changed\n");
-}
-
```
- -
-
-
-
Slider Widget
- Hide -
-
- -
Figure: Slider widget
-
- -
Figure: Slider hierarchy
-
- -
The slider widget is a draggable bar that is used to select a value within a certain range.
- -
Adding a Slider Widget
- -
This is how to create a slider object.
-
```
Evas_Object *slider, *parent;
-
-slider = elm_slider_add(parent);
-
```
- -
Using the Slider Styles
- -
A slider has the following styles:
-
- "default"
- "center_point"
- -
Here we set the style to "center_point".
-
```
elm_object_style_set(slider, "center_point");
```
- -
With this style, the slider "0" point is in the middle of the widget.
- -
Configuring the Slider
-
Orientation is set with the elm_slider_horizontal_set() function, and it is inverted the same way as the progressbar widget. Here we set it vertical and inverted.
-
```
elm_slider_horizontal_set(slider, EINA_FALSE);
-elm_slider_inverted_set(slider, EINA_TRUE);
-
```
- -
It can contain icons ("icon" and "end" partnames), a label, a unit label and an indicator label.
-
```
Evas_Object *icon1, *icon2;
-
-// Set the icons 
-elm_object_part_content_set(slider, "icon", icon1);
-elm_object_part_content_set(slider, "end", icon2);
-
-// Set the label 
-elm_object_part_text_set(slider, "default", "slider label");
-
-// Set the unit format 
-elm_slider_unit_format_set(slider, "%1.2f meters");
-
```
- -
Before using the slider, its minimum and maximum values are set with elm_slider_min_max_set(). The current value is set with (elm_slider_value_set()). Here we set the minimum value to 0, the maximum value to 100, and the current value to 50.
-
```
elm_slider_min_max_set(slider, 0.0, 100.0);
-elm_slider_value_set(slider, 50.0);
-
```
- -
The span of the slider represents its length (horizontally or vertically). It is set with elm_slider_span_size_set() and is scaled by the object or applications scaling factor.
-
We can retrieve the current value of the slider anytime.
- -
```
double value = elm_slider_value_get(slider);
```
- -
By default, the slider indicator becomes bigger when the user drags it. This can be disabled if we want the slider indicator to keep its default size. Here we set the state of the indicator enlargement and then invert the behavior.
- -
```
-// Get the current state of the indicator 
-Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
-
-// Invert the behavior 
- elm_slider_indicator_show_set(slider, !enlarge);
- 
```
- -
Using Slider Callbacks
- -
This widget emits the following signals:
-
- "changed": The user changes the slider value.
- "slider,drag,start": Dragging the slider indicator around starts.
- "slider,drag,stop": Dragging the slider indicator around stops.
- "delay,changed": A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.
- -
For all these signals, event_info is NULL.
-
This is how to register a callback on the "changed" signal.
-
```
{
-   evas_object_smart_callback_add(slider, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the slider value changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "The slider has changed\n");
-}
-
```
- -
-
-
-
Spinner Widget
- Hide -
-
-
Figure: Spinner widget
-
- -
Figure: Spinner hierarchy
-
- -
The spinner widget increases or decreases a numeric value with the arrow buttons.
- -
This widget inherits from the layout widget, so all functions concerning the layout widget are used on the spinner widget.
- -
Adding a Spinner Widget
-
This is how to create a spinner object.
- -
```
-Evas_Object *spin, *parent;
-
-spin = elm_spinner_add(parent);
-
```
- -
Configuring the Spinner
- -
The label format is set to a different value:
-
```
elm_spinner_label_format_set(spin, "%1.2f meters");
```
- -
You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:
-
```
elm_spinner_step_set(spin, 2.0);
```
-
The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.
-
```
elm_spinner_wrap_set(spin, EINA_TRUE);
```
- -
We set the minimum and maximum values of the spinner.
-
```
elm_spinner_min_max_set(spin, -25.0, 100.0);
```
- -
The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.
-
```
elm_object_style_set(spin, "vertical");
-elm_spinner_interval_set(spin, 0.1);
-
```
- -
If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.
-
```
Evas_Object *spin2 = elm_spinner_add(parent);
-elm_spinner_min_max_set(spin2, 1, 3);
-elm_spinner_special_value_add(spin2, 1, "One");
-elm_spinner_special_value_add(spin2, 2, "Two");
-elm_spinner_special_value_add(spin2, 3, "Three");
-
```
- -
Using Spinner Callbacks
- -
This widget emits the following signals:
-
- "changed" - The spinner value changes.
- "delay,changed" - A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.
- -
This is how to register a callback on the "delay,changed" signal.
- -
```
{
-   evas_object_smart_callback_add(spin, "delay,changed", delay_changed_cb, data);
-}
-
-// Callback function for the "delay,changed" signal
-// This callback is called a short time after the spinner value changes
-
-void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "The spinner value has changed\n");
-}
-
```
-
-
-
-
Toolbar Widget
- Hide -
-
- -
Figure: Toolbar widget
-
- -
Figure: Toolbar hierarchy
-
- - -
This widget is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.
- -
Adding and Configuring the Toolbar
-
Use the following function to create a toolbar.
-
```
-Evas_Object *toolbar, *parent;
-
-toolbar = elm_toolbar_add(parent);
-
```
- -
Using Toolbar Styles
-
The toolbar has the following styles:
-
- "default"
- "tabbar"
- "tabbar_with_title"
- "navigationbar"
-
Here, we set the style to "navigationbar".
-
```
-elm_object_style_set(toolbar, "navigationbar");
-
```
- -
Configuring the Toolbar
-
The toolbar displays its items in one of the following options.
-
- ELM_TOOLBAR_SHRINK_NONE: Toolbar sets a minimum size to its items so that all of them fit without scrolling.
- ELM_TOOLBAR_SHRINK_HIDE: Toolbar does not scroll or show the items that do not fit in.
- ELM_TOOLBAR_SHRINK_SCROLL: Toolbar scrolls to show the items that do not fit in.
- ELM_TOOLBAR_SHRINK_MENU: Toolbar creates a button to popup hidden items.
-
Here we set the Toolbar to ELM_TOOLBAR_SHRINK_NONE.
-
```
elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);
```
-
By default, the toolbar displays items homogeneously. Items with long labels occupy a lot of space. To avoid that, we can disable the homogeneous mode.
-
```
elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);
```
- -
Adding Items to the Toolbar
-
In the following code, we add two items and choose the associated icon, label, and function to call when the item is clicked.
-
```
{
-   Elm_Object_Item *home_it, *help_it;
-
-   home_it = elm_toolbar_item_append(toolbar, "home", "Home",
-                                    _home_item_pressed_cb, NULL);
-   help_it = elm_toolbar_item_append(toolbar, "help", "Help",
-                                    _help_item_pressed_cb, NULL);
-}
-
-static void
-_home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Home item clicked \n");
-}
-
-static void
-_help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Help item clicked \n");
-}
-
```
- -
An item may be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.
-
```
elm_object_item_disabled_set(help_it, EINA_TRUE);
```
- -
Adding Items with States
-
Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. As an example, we create two states to the help item with the same icon but two different labels.
-
```
-elm_toolbar_item_state_add(help_it, "help", "Help state 1",
-                           _help_item_pressed_cb, NULL);
-elm_toolbar_item_state_add(help_it, "help", "Help state 2",
-                           _help_item_pressed_cb, NULL);
-
```
-
We can cycle through the states of the help item by using the following code.
-
```
elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
-
```
- -
Using Toolbar Callbacks
-
This widget emits the following signals:
-
- "clicked": The user clicks on a toolbar item, which is selected. event_info is an object of the type Elm_Toolbar_Item.
- "clicked,double": The user double-clicks on a toolbar item. event_info is an object of the type Elm_Toolbar_Item.
- "longpressed": The toolbar is pressed for a certain amount of time. event_info is an object of the type Elm_Toolbar_Item.
- "language,changed" - The program language changes.
- "item,focused" - The item is highlighted. event_info is an object of the type Elm_Toolbar_Item.
- "item,unfocused" - The highlight is removed from the item. event_info is an object of the type Elm_Toolbar_Item.
- "scroll" - The toolbar scrolls. event_info is NULL.
- "scroll,anim,start" - The toolbar scrolling animation starts. event_info is NULL.
- "scroll,anim,stop" - The toolbar scrolling animation stops. event_info is NULL.
- "scroll,drag,start" - The user starts dragging the toolbar. event_info is NULL.
- "scroll,drag,stop" - The user stops dragging the toolbar. event_info is NULL.
-
This is how to register a callback on the "clicked" signal.
-
```
{
-   evas_object_smart_callback_add(toolbar, "clicked", clicked_cb, data);
-}
-
-// Callback function for the "clicked" signal
-// This callback is called when a toolbar item is clicked
-
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   Elm_Toolbar_Item * item = event_info;
-
-   dlog_print(DLOG_INFO, LOG_TAG, "Item clicked\n");
-}
-
```
- -
-
-
-
Tooltip Widget
- Hide -
-
- -
The tooltip widget is a smart object that shows a content in a frame when mouse hovers a parent object. The widget provides tips or information about the parent object.
- -
Adding a Tooltip
-
The tooltip widget cannot be created with the elm_tooltip_add() function. This widget is already contained in a widget when it is created. We can only activate or disable it.
- -
Activating the Tooltip
-
To activate the tooltip on a parent object, we can set a tooltip text to the parent object,
-
```
Evas_Object *parent;
-
-elm_object_tooltip_text_set(parent, "The tooltip text";
```
-
or set a content to the parent object.
-
```
{
-   elm_object_tooltip_content_cb_set(parent,
-                                     tooltip_content_cb,
-                                     NULL,
-                                     tooltip_content_del_cb);
-}
-
-Evas_Object*
-tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
-{
-   // Create the tooltip content 
-}
-
-void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   // Destroy the tooltip content 
-}
-
```
- -
When passing content to the tooltip, the tooltip_content_cb function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an Evas_Object.
-
When the tooltip disappears, the tooltip_content_del_cb function is called. This function is in charge of deleting the previously allocated Evas_Object.
-
Once set, the tooltip can be manually hidden or shown.
- -
```
elm_object_tooltip_hide(parent);
-elm_object_tooltip_show(parent);
-
```
- -
The tooltip can be removed from the parent object when it is not needed.
-
```
elm_object_tooltip_unset(parent);
```
- - - - - - - - - - -
Note
When content is set into the tooltip object, unsetting it calls the callback provided as del_cb to notify that the tooltip cannot be used any longer.
- -
A tooltip object is not a widget, so it does not emit signals. There are no registered callbacks for it.
- - -
-
-
-
Win Widget
- Hide -
-
- -
Figure: Win hierarchy
-
- - -
The window widget is the root widget that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.
-
The window widget is created with elm_win_add() or elm_win_util_standard_add(). Content can be added in the window with elm_win_resize_object_add() so that a window resize also resizes the content inside.
- -
Adding a Window Widget
- -
Create a new window and change the title.
-
```
-Evas_Object *window;
-
-// Creating a window 
-window = elm_win_add(NULL, "main", ELM_WIN_BASIC);
-
-// Change window title 
-elm_win_title_set(window, "Example Window");
-
```
- -
The first element of elm_win_add() is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is NULL meaning there is no parent. "main" is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).
- -
Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with elm_bg_add. The window created is of the type ELM_WIN_BASIC.
- -
```
-Evas_Object *window;
-
-// Creating a standard window 
-
-window = elm_win_util_standard_add("main", "Example Window");
-
```
- -
Closing a Window
-
When the user closes the window outside of the program control, a "delete,request" signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.
-
When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is EINA_FALSE, the window is not destroyed and the program does so when required. The default is EINA_FALSE, where the window is not destroyed automatically.
-
The autodel is set using the following call:
-
```
elm_win_autodel_set(window, EINA_TRUE);
```
- -
To close the window, use the evas_object_del API. The window is destroyed and the signal "delete,request" is sent.
- -
Using the Window Callbacks
-
The window widget emits the following signals:
-
- "focus,in": The window received focus.
- "focus,out": The window lost focus.
- "moved": The window that holds the canvas is moved.
- "withdrawn": The window is managed normally but is removed from the view.
- "iconified": The window is minimized (for example, into an icon or a taskbar).
- "normal": The window is in the normal state (not withdrawn or iconified).
- "stick": The window shows on all desktops.
- "unstick": The window shows only on one desktop.
- "fullscreen": The window is fullscreen.
- "unfullscreen": The window stops being fullscreen.
- "maximized": The window is maximized.
- "unmaximized": The window is diminished.
- "wm,rotation,changed": The rotation of the window is changed by the Windows Manager.
- "ioerr": A low-level I/O error occurred in the display system.
-
With all these signals, event_info is NULL.
-
This is an example to register a callback function called on the "fullscreen" signal.
-
```
{
-   evas_object_smart_callback_add(window, "fullscreen", fullscreen_cb, data);
-}
-
-// Callback function for the "fullscreen" signal
-// This callback is called when the window becomes fullscreen
-
-void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   dlog_print(DLOG_INFO, LOG_TAG, "Window fullscreen\n");
-}
-
```
- -
-

- - - - -

- -

- - - - - - - - diff --git a/org.tizen.guides/html/native/ui/widget_preferences_n.htm b/org.tizen.guides/html/native/ui/widget_preferences_n.htm deleted file mode 100644 index 72e8b52..0000000 --- a/org.tizen.guides/html/native/ui/widget_preferences_n.htm +++ /dev/null @@ -1,1532 +0,0 @@ - - - - - - - - - - - - - Widget Preferences - - - - - -

- -

Elementary widgets provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one widget. For example, you can create a new style for a button widget to change its appearance without modifying the default theme.

- - - - - - - - - - -

Note
When creating a new style, knowledge of how each widget is themed is required, because setting another style always replaces the entire group used by the widget. Important signals and parts must be there for the object to behave properly.

- -

When several styles are loaded in the current theme, you can set a different style to a specific widget using the elm_object_style_set() function. It is also possible to see the current style with the elm_object_style_get() function.

- -

The default theme specifies several styles for the button widget. The code below shows how to set the "anchor" style of a newly created button widget.

- -

-Evas_Object *parent, *button;
-
-// Create a button object 
-button = elm_button_add(parent);
-
-// Set its style to "anchor""
-elm_object_style_set(button, "anchor");
-

- -

- -

Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:

overlays
extensions

- -

When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the widget, it looks at the extensions list.

- -

- -

An overlay can replace the look of all widgets by overriding the default style. If we create a new style called "default" for the button widget and add it as an overlay, the Elementary uses the overlay for all button widgets overriding the default theme.

- -

Here is how to add an overlay to your application's theme.

- -

-elm_theme_overlay_add(NULL, "./theme_button.edj");
-

- - - - - - - - - - -

Note
Here we assume that the "theme_button.edj" file only contains a new theme for the button widget.

- - - - - - - - - - -

Note
Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button widgets defined in the application. You must make sure that the "theme_button.edj" file reimplements everything that was previously defined in the default theme concerning the button widget.

- -

This is how to remove the previously added overlay to return to the default theme.

- -

-elm_theme_overlay_del(NULL, "./theme_button.edj");
-

- -

- -

With extensions, we can write styles that we can apply to some widgets (not all of them) by using the elm_object_style_set() function.

- -

The application adds a theme to the list of extensions with the following call.

- -

-elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
-

- - - - - - - - - - -

Note
Here we assume that the "theme_button_style_custom.edj" file contains a new button style called "custom".

- -

This is how to use the new "custom" style on a button widget.

- -

-Evas_Object *parent, *button;
-
-// Create a button object 
-button = elm_button_add(parent);
-
-// Set its style to "custom" 
-elm_object_style_set(button, "custom");
-

- - - - - - - - - - -

Note
When using elm_theme_extension_add or elm_theme_overlay_add to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the elm_theme_flush function to flush Elementary theme caches. Thus, the theme of all widgets that use the default theme is reloaded.

- -

- -

This is how to create a new theme object.

- -

-Elm_Theme *new_theme = elm_theme_new();
-

- -

This is how to apply this theme to a widget and its children (a button, for example).

- -

-// Create a button widget 
-Evas_Object *button = elm_button_add();
-
-// Set the new theme to the button widget 
-elm_object_theme_set(button, new_theme);
-

- -

- -

Widget themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see the Edje guide.

- -

A new Edje style can be added for a widget. The best way is to copy the existing "default" style, rename it, and update it to your needs.

- -

- -

As an example, we show how to create a new style for the check widget. The aim is to update the background and the main pictures of this widget with custom pictures.

- -

The EDC source file concerning the check widget (check.edc file) is composed of several groups.

- -

-group 
-{
-   name: "elm/check/base/default";
-}
-
-group 
-{
-   name: "elm/check/base/toggle";
-}
-

- -

Those two groups define two different styles for the check widget (the "default" style and the "toggle" style).

- -

We copy the group corresponding to the "default" style in a new file to create a new style called "custom". This new style is saved in the "check_custom.edc" file.

- -

-group 
-{
-   name: "elm/check/base/custom";
-   // Here is the copy of the content of "default" style 
-}
-

- -

In the new group ("elm/check/base/custom"), we have to find the parts we want to modify. Here, the appropriate parts are "bg" and "check" parts.

- -

-part 
-{
-   name: "bg";
-   mouse_events: 0;
-   scale: 1;
-   description 
-   {
-      state: "default" 0.0;
-      rel1.offset: 1 1;
-      rel2.relative: 0.0 1.0;
-      rel2.offset: 1 -2;
-      align: 0.0 0.5;
-      min: 16 16;
-      max: 16 16;
-      aspect: 1.0 1.0;
-      aspect_preference: VERTICAL;
-      image 
-      {
-         normal: "check_base.png";
-         border: 5 5 5 5;
-         middle: 0;
-      }
-      fill.smooth: 0;
-   }
-}
-part 
-{
-   name: "check";
-   mouse_events: 0;
-   scale: 1;
-   description 
-   { 
-      state: "default" 0.0;
-      rel1 
-      {
-         to: "bg";
-         offset: 1 1;
-      }
-      rel2 
-      {
-         to: "bg";
-         offset: -2 -2;
-      }
-      visible: 0;
-      color: 255 255 255 255;
-      image.normal: "check.png";
-   }
-   description 
-   {
-      state: "visible" 0.0;
-      inherit: "default" 0.0;
-      visible: 1;
-   }
-   description 
-   {
-      state: "disabled" 0.0;
-      inherit: "default" 0.0;
-      visible: 0;
-      color: 128 128 128 128;
-   }
-   description 
-   {
-      state: "disabled_visible" 0.0;
-      inherit: "default" 0.0;
-      color: 128 128 128 128;
-      visible: 1;
-   }
-}
-

- -

We do not detail all the options that can be modified here, but assume that the user is familiar with Edje and knows Edje basics.

- -

Our custom pictures filenames are:

check_base_custom.png for the bg part
check_custom.png for the check part

- -

We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.

- -

-part 
-{
-   name: "bg";   
-   description 
-   {
-      state: "default" 0.0;
-
-      image 
-      {
-         normal: "check_base_custom.png";
-         border: 5 5 5 5;
-         middle: 0;
-      }
-                
-   }
-}
-part 
-{
-   name: "check";
-        
-   description 
-   {
-      state: "default" 0.0;
-            
-      image.normal: "check_custom.png";
-   }
-        
-}
-

- - - - - - - - - - -

Note
Here, we assume that the custom images are the same size as the "default" images.

- -

- -

Once written, the check_custom.edc file is put in the /res/edje/. directory of the application project in the SDK.

- -

When building the application, the SDK calls the Edje tools automatically to build the final check_custom.edj file. This file can be loaded from our application.

- -

- -

This is how to add the new theme file as an extension in the application.

- -

-char edj_path[PATH_MAX] = {0, };
-
-// Get the full path of the edj file 
-app_get_resource("/edje/check_custom.edj", edj_path, (int)PATH_MAX);
-
-// Load check custom style as an extension 
-elm_theme_extension_add(NULL, edj_path);
-

- -

Use the "custom" style on a new check widget.

- -

-Evas_Object *parent, *check;
-
-// Create a check object 
-check = elm_check_add(parent);
-
-// Set its style to "custom" 
-elm_object_style_set(check, "custom");
-

- -

- -

- -

In the previous example (the check widget "default" style), there is a part called "elm.swallow.content" that is of the type SWALLOW.

- -

-part 
-{
-   name: "elm.swallow.content";
-   type: SWALLOW;
-   scale: 1;
-   description 
-   {
-      state: "default" 0.0;
-      fixed: 1 0;
-      visible: 0;
-      align: 0.0 0.5;
-      rel1.to_x: "bg";
-      rel1.relative: 1.0 0.0;
-      rel1.offset: 1 1;
-      rel2.to_x: "bg";
-      rel2.offset: 1 -2;
-      rel2.relative: 1.0 1.0;
-   }
-   description
-   {
-      state: "visible" 0.0;
-      inherit: "default" 0.0;
-      fixed: 1 0;
-      visible: 1;
-      aspect: 1.0 1.0;
-      min: 16 16;
-   }
-   description 
-   {
-      state: "disabled" 0.0;
-      inherit: "default" 0.0;
-      color: 255 255 255 128;
-   }
-   description 
-   {
-      state: "disabled_visible" 0.0;
-      inherit: "default" 0.0;
-      color: 255 255 255 128;
-      fixed: 1 0;
-      visible: 1;
-      aspect: 1.0 1.0;
-   }
-}
-

- -

We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.

- -

-Evas_Object *parent, *check1, *content;
-
-// Create a check object 
-check1 = elm_check_add(parent);
-
-// Set the content of the check object 
-elm_object_part_content_set(check1, "elm.swallow.content", content);
-

- - - - - - - - - - -

Note
We can add new SWALLOW parts when customizing a widget's style, if we want to be able to control more content from the application. Note that removing existing SWALLOW parts changes the widget's behavior.

- -

- -

The same is done with parts of the type TEXT. The check "default" style contains a part named "elm.text".

- -

-part 
-{
-   name: "elm.text";
-   type: TEXT;
-   mouse_events: 0;
-   scale: 1;
-   description
-   {
-      state: "default" 0.0;
-      visible: 0;
-      rel1.to_x: "elm.swallow.content";
-      rel1.relative: 1.0 0.0;
-      rel1.offset: 1 1;
-      rel2.relative: 1.0 1.0;
-      rel2.offset: -2 -2;
-      color: 0 0 0 255;
-      text 
-      {
-         font: "Sans,Edje-Vera";
-         size: 10;
-         min: 0 1;
-         align: -1.0 0.5;
-      }
-   }
-   description
-   {
-      state: "visible" 0.0;
-      inherit: "default" 0.0;
-      visible: 1;
-      text.min: 1 1;
-   }
-   description 
-   {
-      state: "disabled" 0.0;
-      inherit: "default" 0.0;
-      color: 0 0 0 128;
-      color3: 0 0 0 0;
-   }
-   description
-   {
-      state: "disabled_visible" 0.0;
-      inherit: "default" 0.0;
-      color: 0 0 0 128;
-      color3: 0 0 0 0;
-      visible: 1;
-      text.min: 1 1;
-   }
-}
-

- -

This is how to modify the content of the "elm.text" part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.

- -

-Evas_Object *parent, *check2;
-
-// Create a check object 
-check2 = elm_check_add(parent);
-
-// Set the text of the check object 
-elm_object_part_text_set(check2, "elm.text", "Test text");
-

- -

- -

- -

Focus is a graphical user interface concept. A component, for example, a widget, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press.

- -

- -

Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press).

- -

There are mainly two ways to set focus on a graphical elements:

- -

Direct selection: this is done by clicking on the element.
Relative selection: this is done by moving the selection from a widget to another, such as going to the previous or next one; this is done with a keyboard.

- -

Direct selection does not really need any kind of special treatment as the user explicitly selects the widget to interact with.

- -

Relative selection' default order is the one the widgets have been added to the canvas. That may not be appropriate, if they are added programmatically in different order than they appear on-screen.

- -

- -

The order the focus goes from a widget to another is called the focus chain. As said before, the default focus chain is set to the order the widgets have been added to the canvas.

- -

An object can be focused if the following conditions apply:

- -

object is visible
object is enabled
object accepts focus
object's subtree (if any) is focusable
all of object's parents have their subtrees focusable

- -

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

- -

ELM_FOCUS_NEXT: next widget in natural order
ELM_FOCUS_PREVIOUS: previous widget in natural order
ELM_FOCUS_UP: widget to focus when going up
ELM_FOCUS_DOWN: widget to focus when going down
ELM_FOCUS_RIGHT: widget to focus when going right
ELM_FOCUS_LEFT: widget to focus when going left

- -

Set the object next to another in a specific direction using elm_object_focus_next_object_get(object, direction).

- -

- -

To customize the application's custom chain:

- -

-Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
-
-Eina_List *focus_chain = NULL;
-focus_chain = eina_list_append(focus_chain, obj3);
-focus_chain = eina_list_append(focus_chain, obj2);
-// The chain is obj3, then obj2. We set it.
-elm_object_focus_custom_chain_set(main, focus_chain);
-// Here we prepend obj5 at the beginning of the chain.
-elm_object_focus_chain_prepend(main, NULL, obj5);
-// We append obj1 after obj3.
-elm_object_focus_chain_append(main, obj3, obj1);
-// We prepend obj4 before obj1.
-elm_object_focus_chain_prepend(main, obj1, obj4);
-

- -

The focus chain is obj5, obj3, obj4, obj1, obj2.

- -

This actually applies to any container: it is possible to set the focus chain of, for example, a box.

- -

- -

If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.

- -

Following on the previous example, if obj4 has obj5 defined as its next object, the actual focus chain is obj5, obj3, obj4, and loop back to obj5.

- -

- -

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

- - -

- -

For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the elm_object_style_set function.

- -

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

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

Table: Button styles
Style	Text part	Swallow part	Notes
elm/button/base/default	elm.text	elm.swallow.content
elm/button/base/anchor	elm.text	elm.swallow.content
elm/button/base/bottom	elm.text	elm.swallow.content	This style is used widely at the bottom of the screen.
elm/button/base/circle	elm.text	elm.swallow.content
elm/button/base/dropdown	elm.text
elm/button/base/hoversel_horizontal/default	elm.text	elm.swallow.content
elm/button/base/hoversel_horizontal_entry/default	elm.text	elm.swallow.content
elm/button/base/hoversel_vertical/default	elm.text	elm.swallow.content
elm/button/base/hoversel_vertical_entry/default	elm.text	elm.swallow.content
elm/button/base/icon_reorder
elm/button/base/naviframe/drawers
elm/button/base/naviframe/title_cancel
elm/button/base/naviframe/title_done
elm/button/base/option

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

Table: Check styles
Style	Sample
elm/check/base/default
elm/check/base/favorite
elm/check/base/on&off

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

Table: Colorselector styles
Style	Sample	Notes
elm/colorselector/item/color/colorplane		Use the following command: elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);

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

Table: Progressbar styles
Style	Sample
default
wheel

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

Table: Radio styles
Style	Sample
default

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

Table: List styles
Style	Sample	Text part	Swallow part
default		elm.text	elm.swallow.icon: for the icon on the left. - elm.swallow.end: for the icon on the right.

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

Table: Multi Button Entry styles
Style	Sample	Text part	Notes
elm/multibuttonentry/base/default		elm.text, guide	The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.

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

Table: Toolbar styles
Style	Text part	Swallow part	Notes
elm/toolbar/base/default
elm/toolbar/base/navigationbar
elm/toolbar/base/tabbar_with_title
elm/toolbar/item/default	elm.text	elm.swallow.icon	This style is for the toolbar's item. Check the elm_toolbar_item_append API to set the text and the icon.
elm/toolbar/item/navigationbar	elm.text		This style is for the toolbar's item. Check the elm_toolbar_item_append API to set the text and the icon.

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

Table: Flipselector styles
Style	Sample
default

- -

The style of the genlist's item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item's style.

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

Table: Genlist styles
Style	Text part	Swallow part	Notes
default	elm.text	elm.swallow.icon: for the icon on the left. - elm.swallow.end: for the icon on the right.
default_style	elm.text	elm.swallow.icon: for the icon on the left. - elm.swallow.end: for the icon on the right.
double_label	elm.text: for the main text. - elm.text.sub: for the sub text.	elm.swallow.icon: for the icon on the left. - elm.swallow.end: for the icon on the right.
end_icon	elm.text	elm.swallow.icon
full		elm.swallow.content	The swallow part is the full size of the item. There is no padding in the item.
group_index	elm.text	elm.swallow.icon: for the icon on the left. - elm.swallow.end: for the icon on the right.
one_icon	elm.text	elm.swallow.icon
message	elm.text: for the text on the top. - elm.title.1: for the text in the middle. - elm.title.2: for the text on the bottom.

- -

The style of the gengrid's item is not set by external APIs. For more information on using the item class to set the item's style, see the guide of gengrid.

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

Table: Gengrid styles
Style	Text part	Swallow part	Notes
default		elm.swallow.icon
album-preview	elm.text	elm.swallow.icon
block			This style is used to show an empty area.
group_index	elm.text	elm.swallow.icon
default_grid		elm.swallow.icon
default_gridtext2	elm.text	elm.swallow.icon
default_gridtext	elm.text	elm.swallow.icon
default_style	elm.text	elm.swallow.icon

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

Table: Segmentation Control styles
Style	Sample
default

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

Table: Index styles
Style	Sample	Notes
default		This style is for supporting the vertical style.
default		This style is for supporting the horizontal style. To set a horizontal index, use the elm_index_horizontal_set.
pagecontrol		This style is used for the "page control" layout. For more information, refer to the Core Control sample application.

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

Table: Contextual Popup (Ctxpopup) styles
Style	Sample	Notes
default
dropdown/list		The size of the item and the ctxpopup follow the size of the screen.
dropdown/label		The size of the item and the ctxpopup follow the maximum length of the item.

Table: Icon styles
Style	Sample
apps
arrow_down
arrow_left
arrow_right
arrow_up
chat
clock
close
delete
edit
file
home
media_player/forward
media_player/info
media_player/next
media_player/pause
media_player/play
media_player/prev
media_player/rewind
media_player/stop
menu/apps
menu/arrow_down
menu/arrow_left
menu/arrow_right
menu/arrow_up
menu/chat
menu/clock
menu/close
menu/delete
menu/edit
menu/file
menu/folder
menu/home
menu/refresh
no_photo
photo/no_photo
refresh
toolbar/apps
toolbar/arrow_down
toolbar/arrow_left
toolbar/arrow_right
toolbar/arrow_up
toolbar/chat
toolbar/clock
toolbar/close
toolbar/delete
toolbar/edit
toolbar/file
toolbar/folder
toolbar/home
toolbar/more_menu
toolbar/refresh

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

Table: Entry styles
Style	Sample	Text part	Swallow part	Notes
default		elm.guide: for the guide text. - elm.text: for the main text.		The guide text is automatically erased when the main text is entered.

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

Table: Datetime styles
Style	Sample
date_layout
time_layout
time_layout_24hr

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

Table: Panel (drawer) styles
Style	Sample	Swallow part	Notes
default		elm.swallow.content	For more information on the drawer, see the [UI Sample] Core Control guide.

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

Table: Slider styles
Style	Sample	Swallow part
horizontal/default		elm.swallow.icon
horizontal/center_point		elm.swallow.icon
vertical/center_point
vertical/default

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

Table: Popup styles
Style	Sample
default
toast

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

Table: Spinner styles
Style	Sample
base/horizontal
base/vertical

- - - -

- -

- - - - - - - \ No newline at end of file diff --git a/org.tizen.guides/html/native/uix/stt_n.htm b/org.tizen.guides/html/native/uix/stt_n.htm index 1538d73..78c552b 100644 --- a/org.tizen.guides/html/native/uix/stt_n.htm +++ b/org.tizen.guides/html/native/uix/stt_n.htm @@ -16,9 +16,9 @@ -

+ @@ -69,7 +70,7 @@

The STT life-cycle is described in the following figure.

Figure: STT life-cycle

STT life-cycle

You can get the following information about the STT:

diff --git a/org.tizen.guides/html/native/uix/tts_n.htm b/org.tizen.guides/html/native/uix/tts_n.htm index 38a3b85..64ef9f6 100644 --- a/org.tizen.guides/html/native/uix/tts_n.htm +++ b/org.tizen.guides/html/native/uix/tts_n.htm @@ -16,9 +16,9 @@ -

+ @@ -67,7 +68,7 @@

The TTS life-cycle is described in the following figure.

Figure: TTS life-cycle

TTS life-cycle

You can get the following information about the TTS:

diff --git a/org.tizen.guides/html/native/uix/uix_guide_n.htm b/org.tizen.guides/html/native/uix/uix_guide_n.htm index 4ed2781..5d260b8 100644 --- a/org.tizen.guides/html/native/uix/uix_guide_n.htm +++ b/org.tizen.guides/html/native/uix/uix_guide_n.htm @@ -16,16 +16,17 @@ -

+ diff --git a/org.tizen.guides/html/native/web/web_guide_n.htm b/org.tizen.guides/html/native/web/web_guide_n.htm index ef213fa..2a97c80 100644 --- a/org.tizen.guides/html/native/web/web_guide_n.htm +++ b/org.tizen.guides/html/native/web/web_guide_n.htm @@ -16,9 +16,9 @@ -

+ @@ -39,7 +40,7 @@

WebView
Enables you to access the Web pages and Web content.
-
The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. EFL APIs, such as evas_*, elm_*, and eina_*, are used to build up a complete application supporting Web browsing.
+
The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. EFL APIs (in mobile and wearable applications), such as evas_*, elm_*, and eina_*, are used to build up a complete application supporting Web browsing.

diff --git a/org.tizen.guides/html/scripts/showhide.js b/org.tizen.guides/html/scripts/showhide.js index 7b3255f..2e85407 100644 --- a/org.tizen.guides/html/scripts/showhide.js +++ b/org.tizen.guides/html/scripts/showhide.js @@ -118,9 +118,8 @@ $(document).ready(function(){ } $('#contents').scroll(); - - var updateH = function(){ + var checkBreadCrumbs = function() { if (!isScrolledIntoView($('#contents .content h1'))) { $('a.top.sms').show(); @@ -130,13 +129,12 @@ $(document).ready(function(){ $('.help_breadcrumbs').show(); } $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6)); + } + + var updateH = function(){ + checkBreadCrumbs(); $('a.top').css('bottom', $('#footer').outerHeight()); - - if($('#navigation').length) { - $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2)); - } else { - $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2)); - } + $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2)); $('#toc').css('top', $('#toc_border').position()['top'] + 7); @@ -152,18 +150,13 @@ $(document).ready(function(){ $('#container #contents').css('margin-bottom', $('#footer').outerHeight()); //$('#toc').css('top', $('#toc_border').position()['top'] + 2); $('#toc').css('top', $('#toc_border').position()['top'] + 7); - - if($('#navigation').length) { - $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5); + $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5); //$('#toc').css('width', $('#toc_border').width() - 40); - } else { - $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5); - } - $('#toc').css('width', $('#toc_border').width() - 49); }; var updateH_no_toc = function() { + checkBreadCrumbs(); if (!isScrolledIntoView($('#contents .content h1'))) { $('a.top.sms').show(); diff --git a/org.tizen.guides/html/web/guides_w.htm b/org.tizen.guides/html/web/guides_w.htm index 1cb0923..5808de5 100644 --- a/org.tizen.guides/html/web/guides_w.htm +++ b/org.tizen.guides/html/web/guides_w.htm @@ -16,7 +16,7 @@ -

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

Guide to Tizen Features
Enables you to use Tizen features, such as alarms, calendars, and multimedia content, provided by the Tizen Web Device API Reference.
Guide to W3C/HTML5 and Some Supplementary Features +
Guide to W3C/HTML5 and Some Supplementary Features
Enables you to use the W3C, HTML5, and some supplementary features provided by the W3C/HTML5 and Supplementaries API Reference.

diff --git a/org.tizen.guides/html/web/tizen/application/alarm_w.htm b/org.tizen.guides/html/web/tizen/application/alarm_w.htm index d9fed5a..a3d2d58 100644 --- a/org.tizen.guides/html/web/tizen/application/alarm_w.htm +++ b/org.tizen.guides/html/web/tizen/application/alarm_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/application/app_guide_w.htm b/org.tizen.guides/html/web/tizen/application/app_guide_w.htm index aa77aa1..efa1ea8 100644 --- a/org.tizen.guides/html/web/tizen/application/app_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/application/app_guide_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/application/application_w.htm b/org.tizen.guides/html/web/tizen/application/application_w.htm index c07dacf..f7ba1bf 100644 --- a/org.tizen.guides/html/web/tizen/application/application_w.htm +++ b/org.tizen.guides/html/web/tizen/application/application_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/application/data_w.htm b/org.tizen.guides/html/web/tizen/application/data_w.htm index f3942b6..632f5cc 100644 --- a/org.tizen.guides/html/web/tizen/application/data_w.htm +++ b/org.tizen.guides/html/web/tizen/application/data_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/application/package_w.htm b/org.tizen.guides/html/web/tizen/application/package_w.htm index a3e31b7..e74a0aa 100644 --- a/org.tizen.guides/html/web/tizen/application/package_w.htm +++ b/org.tizen.guides/html/web/tizen/application/package_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm b/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm index c72045a..ca02355 100644 --- a/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm +++ b/org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm @@ -14,7 +14,7 @@ -

@@ -41,18 +41,17 @@ The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. -

The Bluetooth API is not supported on any Tizen Emulators.

- +

The Bluetooth API is not supported on any Tizen Emulators.

The main features of Bluetooth API include:

Managing the local Bluetooth adapter
You can manage the local Bluetooth adapter using the system-provided service through the ApplicationControl interface (in mobile and wearable applications).

To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on.
Discovering devices
You can discover other Bluetooth devices.

The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones. To find the kind of devices you want to communicate with, the BluetoothClass interface (in mobile and wearable applications) is used to define characteristics and capabilities of a Bluetooth device. The BluetoothClassDeviceMajor interface (in mobile and wearable applications) and BluetoothClassDeviceMinor interface (in mobile and wearable applications) specify the identifiers for major and minor Class of Device (CoD).

In addition, you can retrieve the known devices which were bonded or found in a prior discovery process.
Managing the local Bluetooth adapter
You can manage the local Bluetooth adapter using the system-provided service through the ApplicationControl interface (in mobile and wearable applications).

To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on.
Discovering devices
You can discover other Bluetooth devices.

The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones. To find the kind of devices you want to communicate with, the BluetoothClass interface (in mobile and wearable applications) is used to define characteristics and capabilities of a Bluetooth device. The BluetoothClassDeviceMajor interface (in mobile and wearable applications) and BluetoothClassDeviceMinor interface (in mobile and wearable applications) specify the identifiers for major and minor Class of Device (CoD).

In addition, you can retrieve the known devices which were bonded or found in a prior discovery process.
Creating a bonding with a Bluetooth device
You can create a bonding with another device retrieved through the discovery process. The bonding allows the 2 devices to establish a connection.
Connecting to and exchanging data with a Bluetooth device
You can connect to and exchange data with a remote Bluetooth device. When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a BluetoothSocket instance (in mobile and wearable applications) with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.

If a device allows other devices to use its functionalities through this kind of connection, it is said to provide a service.
Connecting to and exchanging data with a Bluetooth device
You can connect to and exchange data with a remote Bluetooth device. When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a BluetoothSocket instance (in mobile and wearable applications) with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.

If a device allows other devices to use its functionalities through this kind of connection, it is said to provide a service.
Communicating with a health source device
The Health Device Profile defines the requirements for the Bluetooth health device implementation. In the profile, there are 2 device type: one device is a source, such as a blood pressure monitor or pulse oximeter, while the other is a sink, such as a mobile phone or laptop. You can use your device as a sink and communicate with a health source device.

@@ -80,4 +79,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm b/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm index 2fb8e52..06e740f 100644 --- a/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm @@ -14,9 +14,9 @@ -

+ @@ -32,27 +33,20 @@

Communication features include information on how your application can send data to networks and other applications, and receive data back from them.

- - - - - - - - - -

Note
The Communication API domain is supported in mobile applications only.

The main communication features are:

Bluetooth
Allows you to use Bluetooth functionalities, such as managing the Bluetooth service, pairing, and exchanging messages between Bluetooth-enabled devices.
Messaging
Allows you to create applications with messaging functionalities using SMS, MMS, and email.
Bluetooth
Allows you to use Bluetooth functionalities, such as managing the Bluetooth service, pairing, and exchanging messages between Bluetooth-enabled devices.
NFC
Allows you to share contacts, photos, and videos, use the device as a smartcard, and communicate with other NFC-enabled devices.
Push
Allows you to receive push notifications from a push server.
Secure Element
Allows you to access secure elements, such as SIM card and secure SD card, in a device.

- +

The following guides apply in mobile applications only:

Messaging
Allows you to create applications with messaging functionalities using SMS, MMS, and email.

+ + diff --git a/org.tizen.guides/html/web/tizen/communication/messaging_w.htm b/org.tizen.guides/html/web/tizen/communication/messaging_w.htm index b7f3230..9842022 100644 --- a/org.tizen.guides/html/web/tizen/communication/messaging_w.htm +++ b/org.tizen.guides/html/web/tizen/communication/messaging_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/communication/nfc_w.htm b/org.tizen.guides/html/web/tizen/communication/nfc_w.htm index 6401b28..8cdbfa1 100644 --- a/org.tizen.guides/html/web/tizen/communication/nfc_w.htm +++ b/org.tizen.guides/html/web/tizen/communication/nfc_w.htm @@ -14,9 +14,9 @@ -

+ @@ -40,7 +41,9 @@ Note - This feature is supported in mobile applications only. + The NFC API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. +

The NFC API is not supported on any Tizen Emulators.

+ @@ -52,7 +55,7 @@

No device pairing requirements

Reduction in unwanted interruptions

An NFC tag is a chip which can securely store personal information, such as debit card numbers or contact details. The methods of the NFCTag interface are used to access an NFC tag for reading or writing information. NFC tag types are identified using the type attribute of the NFCTagType type definition.

An NFC tag is a chip which can securely store personal information, such as debit card numbers or contact details. The methods of the NFCTag interface (in mobile and wearable applications) are used to access an NFC tag for reading or writing information. NFC tag types are identified using the type attribute of the NFCTagType type definition (in mobile and wearable applications).

@@ -67,12 +70,13 @@

The main features of the NFC API include:

NFC device management
You can manage NFC connectivity by enabling or disabling the NFC service.

To use NFC, retrieve the default NFC adapter using the getDefaultAdapter() method of the NFCAdapter interface. You can enable and disable NFC using the setPowered() method.
NFC tag and peer detection
To receive notifications when an NFC tag or peer device has been detected, the setTagListener() and setPeerListener() methods of the NFCAdapter interface register event listeners, which trigger notifications when an NFC tag or peer device is detected, respectively. You can use the NFCTagDetectCallback and NFCPeerDetectCallback interfaces to define event handlers for receiving the notifications about attaching and detaching NFC tags and peers, respectively.
NDEF message manipulation
You can handle NDEF messages by first creating NDEF records, using the NDEFRecord interface, and then adding the records to an NDEF message using the records attribute of the NDEFMessage interface.
NDEF data exchange
You can exchange NDEF data between tags and peers. To exchange data between tags, read from tags and write to tags using the readNDEF() and writeNDEF() methods.

To exchange data between peers, the setReceiveNDEFListener() method of the NFCPeer interface registers an event listener, which triggers an event when an NDEF message is received from a peer.

You can use the NDEFMessageReadCallback interface to define event handlers for reading NDEF messages from tags and peer devices.
+
NFC device management
You can manage NFC connectivity by enabling or disabling the NFC service.

To use NFC, retrieve the default NFC adapter using the getDefaultAdapter() method of the NFCAdapter interface (in mobile and wearable applications). You can enable and disable NFC using the setPowered() method.
NFC tag and peer detection
To receive notifications when an NFC tag or peer device has been detected, the setTagListener() and setPeerListener() methods of the NFCAdapter interface register event listeners, which trigger notifications when an NFC tag or peer device is detected, respectively. You can use the NFCTagDetectCallback (in mobile and wearable applications) and NFCPeerDetectCallback (in mobile and wearable applications) interfaces to define event handlers for receiving the notifications about attaching and detaching NFC tags and peers, respectively.
NDEF message manipulation
You can handle NDEF messages by first creating NDEF records, using the NDEFRecord interface (in mobile and wearable applications), and then adding the records to an NDEF message using the records attribute of the NDEFMessage interface (in mobile and wearable applications).
NDEF data exchange
You can exchange NDEF data between tags and peers. To exchange data between tags, read from tags and write to tags using the readNDEF() and writeNDEF() methods.

To exchange data between peers, the setReceiveNDEFListener() method of the NFCPeer interface (in mobile and wearable applications) registers an event listener, which triggers an event when an NDEF message is received from a peer.

You can use the NDEFMessageReadCallback interface (in mobile and wearable applications) to define event handlers for reading NDEF messages from tags and peer devices.
NFC card emulation
You can enable NFC card emulation and monitor the secure element transaction taking place using the NFCManager interface. The secure element transaction is carried out by the device. A Tizen application can detect the transaction and whether it was successful, but does not take part in it.
NFC card emulation
You can enable NFC card emulation and monitor the secure element transaction taking place using the NFCAdapter interface. The secure element transaction is carried out by the device. The Tizen application can detect the transaction, but does not take part in it. Interpreting the transaction data requires knowledge about the data protocol the transaction uses. With the required knowledge, the application can detect whether the transaction was successful.
NFC host-based card emulation (HCE)
You can handle HCE events and transactions taking place using the NFCAdapter interface. HCE is an on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element. The transaction data is routed to the host application directly, instead of routing to a secure element. The Tizen application can detect the transaction and can take part in it.

@@ -150,17 +154,18 @@

* The <protocol_code> and <scheme> must be in sync. See NFCForum-TS-RTD_URI_1.0 and NFC RTD (Record Type Definition) documentation on the NFC forum.

Tizen provides the NDEFMessage interface to define an NDEF message. An NDEF message is composed of multiple records.

An NDEF record is created using the NDEFRecord interface and is identified by record type, ID, and payload.

Tizen provides the NDEFMessage interface (in mobile and wearable applications) to define an NDEF message. An NDEF message is composed of multiple records.

An NDEF record is created using the NDEFRecord interface (in mobile and wearable applications) and is identified by record type, ID, and payload.

The following figure shows the conceptual structure of an NDEF message.

Figure: Structure of an NDEF message

Structure of an NDEF message

A record in an NDEF message can be created by using the following payload types:

Text
The NDEF record content is created using text format.

The NDEFRecordText interface is used to create the text format payload using the text, languageCode, and encoding attributes.
URI
The NDEF record content is created using a URI.

The NDEFRecordURI interface is used to create the URI type payload using the uri attribute.
Media
The NDEF record content is created using a media format.

The NDEFRecordMedia interface is used to create the media format payload using the mimeType attribute.
Text
The NDEF record content is created using text format.

The NDEFRecordText interface (in mobile and wearable applications) is used to create the text format payload using the text, languageCode, and encoding attributes.
URI
The NDEF record content is created using a URI.

The NDEFRecordURI interface (in mobile and wearable applications) is used to create the URI type payload using the uri attribute.
Media
The NDEF record content is created using a media format.

The NDEFRecordMedia interface (in mobile and wearable applications) is used to create the media format payload using the mimeType attribute.

diff --git a/org.tizen.guides/html/web/tizen/communication/push_w.htm b/org.tizen.guides/html/web/tizen/communication/push_w.htm index c18b787..f8f273a 100644 --- a/org.tizen.guides/html/web/tizen/communication/push_w.htm +++ b/org.tizen.guides/html/web/tizen/communication/push_w.htm @@ -14,9 +14,9 @@ -

+ @@ -33,13 +34,16 @@

Tizen enables you to receive push notifications from a push server. The push service is a client daemon that maintains a permanent connection between the device and the push server to process the registration and deregistration requests, and deliver push notifications to the application. If the application is connected, the push service passes the notification data over the connection. Otherwise, the push service sends UI notifications with the data. The notifications are delivered when the user launches the application and selects the posting mode. The architecture of the Tizen Push service is described in the mobile native Push guide.

- - + +

+ - +

Note
This feature is supported in mobile applications only.	The Push API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. + The Push API is supported on all Tizen Emulators. +

@@ -54,8 +58,8 @@

The push service provides the RESTful open API for sending a push message. For more information on the Tizen Push Server API, see Sending Push Notifications.

The main features of the Push API include:

Registering to the push service
You can register or unregister the application for the push service. If the registration process is successful, it returns the registration identifier through the PushRegisterSuccessCallback listener.
Receiving push notifications
You can connect to the push service and start receiving push notifications with the connectService() method. You must pass the PushNotificationCallback listener instance as a parameter in the method to receive push notifications.
Registering to the push service
You can register or unregister the application for the push service. If the registration process is successful, it returns the registration identifier through the PushRegisterSuccessCallback listener (in mobile and wearable applications).
Receiving push notifications
You can connect to the push service and start receiving push notifications with the connectService() method. You must pass the PushNotificationCallback listener (in mobile and wearable applications) instance as a parameter in the method to receive push notifications.

diff --git a/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm b/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm index 2d56db8..f635ce0 100644 --- a/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm +++ b/org.tizen.guides/html/web/tizen/communication/secure_element_w.htm @@ -14,9 +14,9 @@ -

+ @@ -39,14 +40,16 @@ Note - This feature is supported in mobile applications only. + The Secure Element API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. +

The Secure Element API is not supported on any Tizen Emulators.

The main features of the Secure Element API include:

Managing secure elements
You manage secure elements by retrieving all the available secure element readers and receiving notifications of reader changes using the SEService interface. You can also shut down secure elements.
Managing secure elements
You manage secure elements by retrieving all the available secure element readers and receiving notifications of reader changes using the SEService interface (in mobile and wearable applications). You can also shut down secure elements.
Opening and closing sessions and channels
You can open a session to connect to a secure element reader. Within a session, you can open basic or logical channels. When the channel or session is no longer needed, you can close them.
Transmitting APDUs to the applet
You can transmit application protocol data units (APDU) to a secure element using a channel.

diff --git a/org.tizen.guides/html/web/tizen/content/content_guide_w.htm b/org.tizen.guides/html/web/tizen/content/content_guide_w.htm index 06b0bfc..9af045e 100644 --- a/org.tizen.guides/html/web/tizen/content/content_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/content/content_guide_w.htm @@ -14,7 +14,7 @@ -

@@ -36,15 +36,10 @@

The main content features are:

Content
Allows you to search and manage multimedia content locally.
Download
Enables you to download files from the Internet and monitor the download progress and status.
Download
Enables you to download files from the Internet and monitor the download progress and status.
Exif
Enables you to access and modify EXIF information in a JPEG file.

The following guides apply in mobile applications only:

Exif
Enables you to access and modify EXIF information in a JPEG file.

- -

diff --git a/org.tizen.guides/html/web/tizen/content/content_w.htm b/org.tizen.guides/html/web/tizen/content/content_w.htm index 94d0408..5650178 100644 --- a/org.tizen.guides/html/web/tizen/content/content_w.htm +++ b/org.tizen.guides/html/web/tizen/content/content_w.htm @@ -14,7 +14,7 @@ -

@@ -50,7 +50,7 @@

The main features of Content API include:

Content retrieval
The Content API uses the same ContentManager interface instance (in mobile and wearable applications) for all content-related functionalities. The instance provides higher efficiency by performing batch operations on content items.

You can browse and search for content directories and content using the getDirectories() and find() methods of the ContentManager interface. When searching for content items, you can create attribute filters, attribute range filters, and composite filters based on specific filter attributes of the ContentManager interface. You can also sort the search results.
+

Content retrieval

The Content API uses the same ContentManager interface instance (in mobile and wearable applications) for all content-related functionalities. The instance provides higher efficiency by performing batch operations on content items.

You can browse and search for content directories and content using the getDirectories() and find() methods of the ContentManager interface. When searching for content items, you can create attribute filters, attribute range filters, and composite filters based on specific filter attributes of the ContentManager interface. You can also sort the search results.

diff --git a/org.tizen.guides/html/web/tizen/content/download_w.htm b/org.tizen.guides/html/web/tizen/content/download_w.htm index 5958f8a..17bfe46 100644 --- a/org.tizen.guides/html/web/tizen/content/download_w.htm +++ b/org.tizen.guides/html/web/tizen/content/download_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/content/exif_w.htm b/org.tizen.guides/html/web/tizen/content/exif_w.htm index 69cc789..215da4d 100644 --- a/org.tizen.guides/html/web/tizen/content/exif_w.htm +++ b/org.tizen.guides/html/web/tizen/content/exif_w.htm @@ -14,16 +14,17 @@ -

- +

Note
This feature is supported in mobile applications only.	The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. + The Exif API is supported on all Tizen Emulators. +

diff --git a/org.tizen.guides/html/web/tizen/guides_tizen_w.htm b/org.tizen.guides/html/web/tizen/guides_tizen_w.htm index b76e13d..68547fa 100644 --- a/org.tizen.guides/html/web/tizen/guides_tizen_w.htm +++ b/org.tizen.guides/html/web/tizen/guides_tizen_w.htm @@ -16,7 +16,7 @@ -

@@ -42,7 +42,7 @@ In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional.

The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.

To determine the availability of optional APIs, use the tizen.systeminfo.getCapability() method of the System Information API (in mobile and wearable applications).

Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see Tizen Web Device API Reference.

@@ -55,6 +55,8 @@

Enables you to handle generic events and sort and filter data.

Application
Enables you to configure application properties, and manage application data, packages, and alarms.
Communication +
Enables you to send data to networks and other applications, and receive data back from them.
Content
Enables you to manage files, playlists, and downloads, and view file details.
Input/Output @@ -64,9 +66,7 @@
System
Enables you to access and manage and retrieve information from the device and its sensors.
User Interface -
Enables you to manage badges and notifications on the screen.
Communication in mobile applications only -
Enables you to send data to networks and other applications, and receive data back from them.

Enables you to manage badges and notifications on the screen.

Social in mobile applications only
Enables you to manage the user's personal data, such as contacts, calendars, and call and browsing history, on the device.

diff --git a/org.tizen.guides/html/web/tizen/ime/ime_w.htm b/org.tizen.guides/html/web/tizen/ime/ime_w.htm index 7525554..3ecabd5 100644 --- a/org.tizen.guides/html/web/tizen/ime/ime_w.htm +++ b/org.tizen.guides/html/web/tizen/ime/ime_w.htm @@ -57,7 +57,7 @@

Tizen provides a special architecture to guarantee that Web IME applications work just like native IME applications (however, there are some restrictions due to the capability limitations of the Web applications in general). A Web IME application can be run within the core Input Service Engine process, which is also used to run native IME applications.

The following figure shows the overall architecture of the Tizen Web IME support.

Figure: Tizen Web IME support architecture

Tizen Web IME support architecture

When a Web IME is executed, the Input Service framework launches the Input Service Engine process, just like with native IME applications. The Input Service Engine process loads a special bridge IME module, ise-web-helper-agent, which executes a Web IME within its Web container and communicates with the executed Web IME.

The communication between the Web IME and the ise-web-helper-agent module is accomplished by 2 utility modules, web-helper-agent on the Web helper agent side and web-helper-client on the Web IME side. Therefore, a Web IME application must contain the web-helper-client.js, which is created automatically when you create a Web IME project using the Tizen SDK.

Since the Web IME runs within a Web container and communicates with it, as a Web IME application developer you do not need knowledge of the platform architecture or details of the native API. You can develop Web IME applications as if they were normal Web applications, as long as the web-helper-client.js file is included and properly used.

@@ -98,7 +98,7 @@ var WebHelperClientHandler = { onInit: function () { - // Do what you want when your IME gets the INIT message + /* Do what you want when your IME gets the INIT message */ } }; WebHelperClient.initialize(WebHelperClientHandler); @@ -525,10 +525,12 @@ WebHelperClient.updatePreeditString("def");

To create the Web IME project, launch the Tizen IDE and go to File > New > Tizen Wearable Web Project > Template > IME Application > Web IME application.
Enter the project name and click Finish.
Enter the project name and click Finish. +
Modify the source code in, for example, the index.html and style.css files, as needed.
Install the Web IME package on the Emulator. To run the application, go to Run As > Tizen Wearable Web Application.
In the Emulator, change the default keyboard with the Web IME you developed in Setting > Text input.
In the Emulator, change the default keyboard with the Web IME you developed in Setting > Text input. +

diff --git a/org.tizen.guides/html/web/tizen/input_output/archive_w.htm b/org.tizen.guides/html/web/tizen/input_output/archive_w.htm index 537e903..754f2b5 100644 --- a/org.tizen.guides/html/web/tizen/input_output/archive_w.htm +++ b/org.tizen.guides/html/web/tizen/input_output/archive_w.htm @@ -14,16 +14,17 @@ -

+ @@ -39,7 +40,8 @@ Note - This feature is supported in mobile applications only. + The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. +

The Archive API is supported on all Tizen Emulators.

@@ -50,7 +52,7 @@

The main features of the Archive API include:

Accessing archive content
You can read the content of an archive file using the ArchiveFile interface.
Accessing archive content
You can read the content of an archive file using the ArchiveFile interface (in mobile and wearable applications).
Creating new archives
You can create archive files and add files into them using the ArchiveFile interface.
Extracting archived files
You can extract a single file or all files from an archive file using the ArchiveFile interface.
Aborting operations
You can abort an on-going archive operation using the operation ID and the abort() method of the ArchiveManager interface.
@@ -58,7 +60,7 @@

To start any kind of zip operation (packing or unpacking), you must first call the open() method of the ArchiveManager interface. The first parameter of is a FileReference object, which can be a File object or the virtual path. The second parameter is a FileMode enumerator, whose values are described in the following table.

To start any kind of zip operation (packing or unpacking), you must first call the open() method of the ArchiveManager interface (in mobile and wearable applications). The first parameter of is a FileReference object (in mobile and wearable applications), which can be a File object (in mobile and wearable applications) or the virtual path. The second parameter is a FileMode enumerator (in mobile and wearable applications), whose values are described in the following table.

diff --git a/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm b/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm index 07d6c93..b98e0f5 100644 --- a/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm +++ b/org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm @@ -14,7 +14,7 @@ - - + - + - +

wgt-package	Location for storing widget packages (read-only location).	Location for storing Web application packages (read-only location).
wgt-private	Location for the widget private storage.	Location for the Web application private storage.
wgt-private-tmp	Location for the widget private temporary storage.	Location for the Web application private temporary storage.

diff --git a/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm b/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm index 4d955b7..ad75438 100644 --- a/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm @@ -14,7 +14,7 @@ -

@@ -34,14 +34,10 @@

Input/output features include information on how your application can process input and output data.

The main input/output features are:

Archive
Enables you to operate on the zip archive files.
Filesystem
Enables you to access specific parts of the device file system.
Message Port
Allows you to send and receive messages through message ports.

- -

The following guides apply in mobile applications only:

Archive
Enables you to operate on the zip archive files.

diff --git a/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm b/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm index 9cc7bcf..222e284 100644 --- a/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm +++ b/org.tizen.guides/html/web/tizen/input_output/message_port_w.htm @@ -14,7 +14,7 @@ -

@@ -62,11 +62,11 @@

The application that wants to receive messages from your application can mostly be implemented as a Tizen Web or native application. To implement it as a native application, see the mobile native Message Port Communication guide.

Figure: Message port communication

Message port communication

You can communicate only with a trusted application that is signed with the same certificate as your application, using the instances of the LocalMessagePort and RemoteMessagePort interfaces that are retrieved by the requestTrustedLocalMessagePort() and requestTrustedRemoteMessagePort() methods of the tizen.messageport object.

Figure: Trusted message ports

Trusted message ports

Figure: Trusted message ports

Trusted message ports

diff --git a/org.tizen.guides/html/web/tizen/localization/localization_w.htm b/org.tizen.guides/html/web/tizen/localization/localization_w.htm index a7419e7..c62cedf 100644 --- a/org.tizen.guides/html/web/tizen/localization/localization_w.htm +++ b/org.tizen.guides/html/web/tizen/localization/localization_w.htm @@ -15,7 +15,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/multimedia/media_controller_w.htm b/org.tizen.guides/html/web/tizen/multimedia/media_controller_w.htm index 85bcfc5..8aee622 100644 --- a/org.tizen.guides/html/web/tizen/multimedia/media_controller_w.htm +++ b/org.tizen.guides/html/web/tizen/multimedia/media_controller_w.htm @@ -14,7 +14,7 @@ -

@@ -32,7 +32,7 @@

The MediaController API provides functions for communication between the media controller server and the media controller client.

Tizen provides a functionality for you to communicate between the media controller server and client.

@@ -45,34 +45,26 @@

+ + +

To manage the media using the Media Controller API, you have to develop 2 applications:

Client that sends requests to the server in order to change, for example, the playback state and position modes.
Server that directly manages the media on the device.

The main features of the Media Controller API include:

Creating a new server -
You can see the example with the createServer() method.
+
Setting up the client and server pair +
You can set up the client and server pair by creating a new server using the createServer() method. On the client side, you can get a client and find active servers using the getClient() and findServers() methods.
Managing requests +
You can send a request from the client to the server to modify various playback attributes. In the server, you can set up a listener to react to the client request and perform the requested task.
Getting a client and finding all active servers
You can see the example with the getClient() and findServers() methods.
Receiving notifications from the server +
You can receive notifications on changed made by the server by registering a listener with the addPlaybackInfoChangeListener() method.
Setting up a server -
You can see the example with the following methods:
-
- addChangeRequestPlaybackInfoListener()
- updatePlaybackState()
- updatePlaybackPosition()
- updateShuffleMode()
- updaterepeatMode()
-
Sending requests from a client to a server
You can see the example with the sendPlaybackState() method.
Receiving notifications from a server
You can see the example with the addPlaybackInfoChangeListener() method.
Sending custom commands by a client
You can see the example with the sendCommand() method.
Receiving and handling custom commands by a server -
You can see the example with the addCommandListener() method.
+
Sending custom commands +
You can use the client to send commands with the sendCommand() method.
+
To receive and handle incoming commands in the server, use the addCommandListener() method.

diff --git a/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm b/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm index 0e5e1c9..e48817e 100644 --- a/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm +++ b/org.tizen.guides/html/web/tizen/multimedia/media_key_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm b/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm index e61d725..b776a1c 100644 --- a/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm @@ -14,7 +14,7 @@ -

@@ -34,8 +34,9 @@

Multimedia features include managing the device sound volume and media keys.

The main multimedia features are:

Sound
Enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices.
Media Controller
Enables you to communicate between the media controller server and client.
Media Key
Enables you to handle media keys in your application.
Sound
Enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices.

diff --git a/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm b/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm index fc1f7d1..65f857d 100644 --- a/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm +++ b/org.tizen.guides/html/web/tizen/multimedia/sound_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/service/service_w.htm b/org.tizen.guides/html/web/tizen/service/service_w.htm index 89e80b0..8a80e50 100644 --- a/org.tizen.guides/html/web/tizen/service/service_w.htm +++ b/org.tizen.guides/html/web/tizen/service/service_w.htm @@ -14,7 +14,7 @@ -

@@ -60,7 +60,7 @@ Note - The wearable service application requires partner-level certification in Tizen 2.3. + The wearable service application requires partner-level certification in Tizen 2.3. @@ -118,7 +118,7 @@

To make sure that you can run a service application, export a number of functions using the CommonJS Modules API. The functions need to be added to the module.exports object which is provided by the environment. These functions are called when there are life-cycle changes or application control events which are triggered by the application management framework.

Figure: State transitions

State transitions

onExit(): This is called when the service ends. You can release resources or save the context by using this callback.

Service applications are packaged with at least one UI application in a widget file. The widget file is installed, updated, and uninstalled as a single package, making the life-cycles of the service applications and the UI application synchronous.

Service applications are packaged with at least one UI application in a Web application package file. The Web application package file is installed, updated, and uninstalled as a single package, making the life-cycles of the service applications and the UI application synchronous.

When privileges are defined, their scope covers the entire package. Hence privileges do not have to be specified for service applications because they are packaged with at least 1 UI application in a widget file.

To ensure that a service application is acknowledged by the platform, the config.xml file of the application must be extended.

diff --git a/org.tizen.guides/html/web/tizen/social/account_w.htm b/org.tizen.guides/html/web/tizen/social/account_w.htm index d6f0306..fc70e6d 100644 --- a/org.tizen.guides/html/web/tizen/social/account_w.htm +++ b/org.tizen.guides/html/web/tizen/social/account_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/social/bookmark_w.htm b/org.tizen.guides/html/web/tizen/social/bookmark_w.htm index 7403342..94c8145 100644 --- a/org.tizen.guides/html/web/tizen/social/bookmark_w.htm +++ b/org.tizen.guides/html/web/tizen/social/bookmark_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/social/calendar_w.htm b/org.tizen.guides/html/web/tizen/social/calendar_w.htm index 1e7cb64..707db60 100644 --- a/org.tizen.guides/html/web/tizen/social/calendar_w.htm +++ b/org.tizen.guides/html/web/tizen/social/calendar_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/social/call_history_w.htm b/org.tizen.guides/html/web/tizen/social/call_history_w.htm index d122f22..363167b 100644 --- a/org.tizen.guides/html/web/tizen/social/call_history_w.htm +++ b/org.tizen.guides/html/web/tizen/social/call_history_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/social/contact_w.htm b/org.tizen.guides/html/web/tizen/social/contact_w.htm index 1b003ed..7676c47 100644 --- a/org.tizen.guides/html/web/tizen/social/contact_w.htm +++ b/org.tizen.guides/html/web/tizen/social/contact_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/social/data_sync_w.htm b/org.tizen.guides/html/web/tizen/social/data_sync_w.htm index 26e1e13..e48427a 100644 --- a/org.tizen.guides/html/web/tizen/social/data_sync_w.htm +++ b/org.tizen.guides/html/web/tizen/social/data_sync_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/social/social_guide_w.htm b/org.tizen.guides/html/web/tizen/social/social_guide_w.htm index 6995341..c687e5c 100644 --- a/org.tizen.guides/html/web/tizen/social/social_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/social/social_guide_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm b/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm index bdb6c10..3c07e3a 100644 --- a/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm +++ b/org.tizen.guides/html/web/tizen/system/fm_radio_w.htm @@ -14,7 +14,7 @@ -

@@ -55,7 +55,7 @@

The available operations depend on the current radio state. Radio states and transitions between them are illustrated in the following figure.

Figure: FM radio states and transitions

Badge

FM radio states and transitions

To get information about current radio state, read the state attribute of the FMRadioManager interface. The RadioState enum specifies possible values of the attribute:

READY: Initial state, the radio is not playing and can be started or switched to scan.

diff --git a/org.tizen.guides/html/web/tizen/system/power_w.htm b/org.tizen.guides/html/web/tizen/system/power_w.htm index 178ef69..b12219e 100644 --- a/org.tizen.guides/html/web/tizen/system/power_w.htm +++ b/org.tizen.guides/html/web/tizen/system/power_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/system/sensor_w.htm b/org.tizen.guides/html/web/tizen/system/sensor_w.htm index 5edadda..d012138 100644 --- a/org.tizen.guides/html/web/tizen/system/sensor_w.htm +++ b/org.tizen.guides/html/web/tizen/system/sensor_w.htm @@ -14,7 +14,7 @@ -

@@ -85,6 +85,11 @@ Ultraviolet sensor

http://tizen.org/feature/sensor.ultraviolet

+ + Heart rate monitor sensor +

http://tizen.org/feature/sensor.heart_rate_monitor

+ + diff --git a/org.tizen.guides/html/web/tizen/system/system_guide_w.htm b/org.tizen.guides/html/web/tizen/system/system_guide_w.htm index e3cd5a9..284d7ef 100644 --- a/org.tizen.guides/html/web/tizen/system/system_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/system/system_guide_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/system/system_info_w.htm b/org.tizen.guides/html/web/tizen/system/system_info_w.htm index 8e9177a..9bfe828 100644 --- a/org.tizen.guides/html/web/tizen/system/system_info_w.htm +++ b/org.tizen.guides/html/web/tizen/system/system_info_w.htm @@ -55,7 +55,7 @@ tr.images td { -

@@ -95,7 +95,7 @@ tr.images td {

Property count check

You can get the number of system property information using the getCount() method of the SystemInfo interface.

Device capability retrieval

You can get a device capability using the getCapability() method of the SystemInfo interface.

Property state checks

You can retrieve the current state of a specific device property by using the getPropertyValue() method.

The property state can determine whether your application has enough resources to complete a particular task or service successfully. For example, if you are creating a file, you need to check the storage property to know whether a writable storage is available on the device.

For example, you can check the device orientation. The device orientation defines the angle between the direction of what is considered to be the "top" side of the device and the physical upward direction. The device orientation is not directly related to the screen orientation. For example, when the Auto rotate screen option is disabled or the widget has the screen-orientation option set to "landscape" or "portrait", the screen is not rotated and the window.screen.orientation property does not change; however, the SystemInfo device orientation changes.

For example, you can check the device orientation. The device orientation defines the angle between the direction of what is considered to be the "top" side of the device and the physical upward direction. The device orientation is not directly related to the screen orientation. For example, when the Auto rotate screen option is disabled or the Web application has the screen-orientation option set to "landscape" or "portrait", the screen is not rotated and the window.screen.orientation property does not change; however, the SystemInfo device orientation changes.

When a device is in its natural position, it is considered to be in the PORTRAIT_PRIMARY orientation (in mobile and wearable applications) (if the screen height is greater than its width) or the LANDSCAPE_PRIMARY orientation (otherwise). When the device is rotated 90 degrees clockwise (rotated right), the orientation changes from LANDSCAPE_PRIMARY to PORTRAIT_PRIMARY, from PORTRAIT_PRIMARY to LANDSCAPE_SECONDARY, from LANDSCAPE_SECONDARY to PORTRAIT_SECONDARY, and from PORTRAIT_SECONDARY back to LANDSCAPE_PRIMARY.

diff --git a/org.tizen.guides/html/web/tizen/system/system_setting_w.htm b/org.tizen.guides/html/web/tizen/system/system_setting_w.htm index fa6213b..a8ccb2e 100644 --- a/org.tizen.guides/html/web/tizen/system/system_setting_w.htm +++ b/org.tizen.guides/html/web/tizen/system/system_setting_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/system/time_w.htm b/org.tizen.guides/html/web/tizen/system/time_w.htm index 94c4487..a044b0c 100644 --- a/org.tizen.guides/html/web/tizen/system/time_w.htm +++ b/org.tizen.guides/html/web/tizen/system/time_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/system/web_setting_w.htm b/org.tizen.guides/html/web/tizen/system/web_setting_w.htm index 6f6601d..82a8d6e 100644 --- a/org.tizen.guides/html/web/tizen/system/web_setting_w.htm +++ b/org.tizen.guides/html/web/tizen/system/web_setting_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm b/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm index cfea32d..761a167 100644 --- a/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm @@ -14,7 +14,7 @@ -

@@ -61,7 +61,7 @@

You can enable the Tizen APIs to throw errors synchronously with the WebAPIException interface (in mobile and wearable applications) of the Tizen API (in mobile and wearable applications), or return errors in the error event handlers of asynchronous methods with the WebAPIError interface (in mobile and wearable applications).

@@ -74,7 +74,7 @@

Generic event handling features allow you to handle the results of asynchronous operations. The operations can implemented using the SuccessCallback (in mobile and wearable applications) and ErrorCallback (in mobile and wearable applications) event handlers of the Tizen API.

@@ -87,7 +87,7 @@ });

The Tizen API provides a set of basic definitions and interfaces that are used in the Tizen Device API. The Tizen API contains filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.

The main features of the Tizen API include:

Filters
The Tizen API supports the following filter types, which are subtypes of the abstract filter (in mobile and wearable applications):
@@ -96,7 +96,7 @@
Attribute range (in mobile and wearable applications)
Matches objects containing an attribute whose values are within a particular range.
Composite filter (in mobile and wearable applications)
Combines several filters into a set.

You can create attribute filters, attribute range filters, and composite filters to search for specific data and make complex queries. The attributes you can use with the filter types vary depending on the API you are using. For example, Calendar, Call History, Contact, Content, and Messaging query methods each have their own sets of supported filter attributes.

Sorting

You can sort the results of queried data using the SortMode interface (in mobile and wearable applications). The following sorting modes are supported:

"ASC": Ascending sorting order

The following table lists the filter types you can use with specific content attributes in the methods of the ContentManager interface (in mobile and wearable applications).

Figure: Badge

The main features of the Badge API include:

Managing badges diff --git a/org.tizen.guides/html/web/tizen/ui/noti_w.htm b/org.tizen.guides/html/web/tizen/ui/noti_w.htm index 1d7b6c2..863726f 100644 --- a/org.tizen.guides/html/web/tizen/ui/noti_w.htm +++ b/org.tizen.guides/html/web/tizen/ui/noti_w.htm @@ -14,16 +14,17 @@ -
+
-
+
Related Info

Notification Tutorial
-
Notification API for Mobile Web
+
Notification API for Mobile Web
+
Notification API for Wearable Web
@@ -40,7 +41,9 @@ Note - This feature is supported in mobile applications only. + The Notification API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. +
All mandatory APIs are supported on the Tizen Emulators.
+ @@ -51,14 +54,14 @@
Creating progress notifications
Managing notifications

To display a notification, you need to create a Notification object, or its subtype.

To display a notification, you need to create a Notification object (in mobile and wearable applications), or its subtype.

- +

Note
Currently, only the StatusNotification subtype is supported. This subtype displays notifications in the status bar.	Currently, only the StatusNotification subtype (in mobile and wearable applications) is supported. This subtype displays notifications in the status bar.

diff --git a/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm b/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm index 60fb793..24bbe84 100644 --- a/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm @@ -14,7 +14,7 @@ -

@@ -35,11 +35,7 @@

User interface (UI) features include managing badges and notifications on the device screen.

The main UI features are:

Badge
Allows you to create and update badges on the Home screen.

- -

The following guides apply in mobile applications only:

Badge
Allows you to create and update badges on the home screen.
Notification
Allows you to create and display different types of notifications.

diff --git a/org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm b/org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm index 2aa1639..8883848 100644 --- a/org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm +++ b/org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm @@ -14,7 +14,7 @@ -

@@ -37,7 +37,7 @@

Web UI Framework features allow you to create and manage various kinds of UI components. The components represent a visual UI control, such as a button or slider, which you can interact with and manipulate.

Web UI Framework features allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which you can interact with and manipulate.

The Tizen UI components creation and features include:

diff --git a/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm b/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm index 91c651c..9f35229 100644 --- a/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm +++ b/org.tizen.guides/html/web/w3c/communication/server_sent_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm b/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm index a7fb886..3f0a72e 100644 --- a/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm +++ b/org.tizen.guides/html/web/w3c/communication/web_messaging_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/communication/websocket_w.htm b/org.tizen.guides/html/web/w3c/communication/websocket_w.htm index 294af9c..0d2aece 100644 --- a/org.tizen.guides/html/web/w3c/communication/websocket_w.htm +++ b/org.tizen.guides/html/web/w3c/communication/websocket_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm b/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm index ec80f22..52450ad 100644 --- a/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm +++ b/org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/device/battery_w.htm b/org.tizen.guides/html/web/w3c/device/battery_w.htm index e69d6d5..fc31fef 100644 --- a/org.tizen.guides/html/web/w3c/device/battery_w.htm +++ b/org.tizen.guides/html/web/w3c/device/battery_w.htm @@ -15,7 +15,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/device/browser_state_w.htm b/org.tizen.guides/html/web/w3c/device/browser_state_w.htm index 2ac54af..e3269ec 100644 --- a/org.tizen.guides/html/web/w3c/device/browser_state_w.htm +++ b/org.tizen.guides/html/web/w3c/device/browser_state_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/device/device_guide_w.htm b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm index a628aec..4b32703 100644 --- a/org.tizen.guides/html/web/w3c/device/device_guide_w.htm +++ b/org.tizen.guides/html/web/w3c/device/device_guide_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm b/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm index 6a24adb..c9558d6 100644 --- a/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm +++ b/org.tizen.guides/html/web/w3c/device/device_orientation_w.htm @@ -15,7 +15,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm index c1efa1f..2401794 100644 --- a/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm +++ b/org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/device/touch_w.htm b/org.tizen.guides/html/web/w3c/device/touch_w.htm index 36aa1a4..092d3bc 100644 --- a/org.tizen.guides/html/web/w3c/device/touch_w.htm +++ b/org.tizen.guides/html/web/w3c/device/touch_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/device/vibration_w.htm b/org.tizen.guides/html/web/w3c/device/vibration_w.htm index 616400a..cbc09f4 100644 --- a/org.tizen.guides/html/web/w3c/device/vibration_w.htm +++ b/org.tizen.guides/html/web/w3c/device/vibration_w.htm @@ -15,7 +15,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/dom/animation_w.htm b/org.tizen.guides/html/web/w3c/dom/animation_w.htm index 7ade751..54eef78 100644 --- a/org.tizen.guides/html/web/w3c/dom/animation_w.htm +++ b/org.tizen.guides/html/web/w3c/dom/animation_w.htm @@ -15,7 +15,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/dom/background_w.htm b/org.tizen.guides/html/web/w3c/dom/background_w.htm index 1cf5f9b..48e6e30 100644 --- a/org.tizen.guides/html/web/w3c/dom/background_w.htm +++ b/org.tizen.guides/html/web/w3c/dom/background_w.htm @@ -15,7 +15,7 @@ -

@@ -60,11 +60,11 @@

The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the background-repeat property value.

Figure: Background examples

Background examples

The following code snippet demonstrates how to set the background color, images, borders, and shadings.

-<!-- Background color -->
+<!--Background color-->
 #one 
 {
    width: 180px;
@@ -72,7 +72,7 @@
    background-color: lightblue;
 }
 
-<!-- Background image --> 
+<!--Background image--> 
 #one 
 {
    width: 200px;
@@ -81,7 +81,7 @@
    background-image: url(t3.png);
 }
 
-<!-- Multiple images --> 
+<!--Multiple images--> 
 #multi 
 {
    width: 155px;
@@ -93,7 +93,7 @@
    background-repeat: no-repeat;
 }
 
-<!-- Shading and border with rounded corners -->
+<!--Shading and border with rounded corners-->
 #shading 
 {
    width: 160px;
diff --git a/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm b/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm
index 272d847..f9d27d3 100644
--- a/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/basic_ui_w.htm
@@ -15,7 +15,7 @@
 
  
  
- 
+ 
 	
 		 
 	
@@ -42,10 +42,10 @@
 Box model properties
 A box model refers to all DOM elements excluding design elements, such as <br> and <i>. The box model area is set as defined in the following figure.
 
-Content: Content area
-Padding: Gap between the content and boundary
-Border: Boundary
-Margin: Overall size of the box model
+Content: Content area
+Padding: Gap between the content and boundary
+Border: Boundary
+Margin: Overall size of the box model
 
 Figure: Box model structure
 
diff --git a/org.tizen.guides/html/web/w3c/dom/color_w.htm b/org.tizen.guides/html/web/w3c/dom/color_w.htm
index f7fb95d..b5b20c9 100644
--- a/org.tizen.guides/html/web/w3c/dom/color_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/color_w.htm
@@ -15,7 +15,7 @@
 
  
  
- 
+ 
 	
 		 
 	
@@ -83,7 +83,7 @@
 	
transparent.html

-<!-- Keywords -->
+<!--Keywords-->
 #one
 {
    color: blue;
@@ -99,25 +99,25 @@
    color: transparent;
 }
 
-<!-- RGB -->
+<!--RGB-->
 #two
 {
     color: #ff0000;
 }
 
-<!-- RGBA -->
+<!--RGBA-->
 #three
 {
    color: rgba(100%, 0, 0, 0.5);
 }
 
-<!-- HSL -->
+<!--HSL-->
 #four
 {
    color: hsl(0, 100%, 50%);
 }
 
-<!-- HSLA -->
+<!--HSLA-->
 #five
 {
    color: hsla(0, 100%, 50%, 0.5);
diff --git a/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm b/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm
index 3f171d9..7836fa7 100644
--- a/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/dom/flexible_w.htm b/org.tizen.guides/html/web/w3c/dom/flexible_w.htm
index 6663a31..0266eb8 100644
--- a/org.tizen.guides/html/web/w3c/dom/flexible_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/flexible_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/dom/font_w.htm b/org.tizen.guides/html/web/w3c/dom/font_w.htm
index cd6f657..2e38106 100644
--- a/org.tizen.guides/html/web/w3c/dom/font_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/font_w.htm
@@ -15,7 +15,7 @@
 
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm b/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm
index 0f0d2a9..90717b9 100644
--- a/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/html5forms_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/dom/media_query_w.htm b/org.tizen.guides/html/web/w3c/dom/media_query_w.htm
index eb2cbb5..cdf7ed8 100644
--- a/org.tizen.guides/html/web/w3c/dom/media_query_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/media_query_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/dom/multi_w.htm b/org.tizen.guides/html/web/w3c/dom/multi_w.htm
index 1ff4d38..00f9575 100644
--- a/org.tizen.guides/html/web/w3c/dom/multi_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/multi_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		
 	
@@ -86,7 +86,7 @@ article

Figure: 4 columns on different resolution displays

4 columns on different resolution displays

The column-width (or -webkit-column-width) property sets the base column width.

In the following code snippet and figure, the column width is set to 153 px, but the effective column width is 288 px for a 480 x 800 display (shown on the left) and 154 px for a 720 x 1280 display (shown on the right). The parameter sets the column to at least the defined width, but not wider than the available display space or twice the defined width. The actual column width is calculated using a pseudo-algorithm.

@@ -106,7 +106,7 @@ article

Figure: Column width 153 px on different resolution displays

Column width 153 px on different resolution displays

The column-gap (or -webkit-column-gap) property sets the distance between columns. The property affects the column width, as the column width, gap, and margins all take available space. In the following code snippet and figure, the column gap is set to 17 px.

@@ -126,7 +126,7 @@ article

Figure: Column gap

Column gap

The column-rule (or -webkit-column-rule) property displays a vertical line in the middle of the column gap.

@@ -143,7 +143,7 @@ article

Figure: Column rule

Column rule

@@ -175,7 +175,7 @@ article.left header

Figure: Column span

Column span

By default, column elements are broken to balance column height. The break-before (or -webkit-column-break-before), break-after (or -webkit-column-break-after), and break-inside (or -webkit-column-break-inside) properties can be used to define that an element cannot be broken between columns (set to avoid), or that an element must begin or end within a given column.

@@ -191,7 +191,7 @@ article.lower section

Figure: Column break

Column break

diff --git a/org.tizen.guides/html/web/w3c/dom/selector_w.htm b/org.tizen.guides/html/web/w3c/dom/selector_w.htm index 1a845ca..3794371 100644 --- a/org.tizen.guides/html/web/w3c/dom/selector_w.htm +++ b/org.tizen.guides/html/web/w3c/dom/selector_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/dom/session_history_w.htm b/org.tizen.guides/html/web/w3c/dom/session_history_w.htm index bf27a0b..1920572 100644 --- a/org.tizen.guides/html/web/w3c/dom/session_history_w.htm +++ b/org.tizen.guides/html/web/w3c/dom/session_history_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/dom/text_module_w.htm b/org.tizen.guides/html/web/w3c/dom/text_module_w.htm index 713b8b5..6b6302e 100644 --- a/org.tizen.guides/html/web/w3c/dom/text_module_w.htm +++ b/org.tizen.guides/html/web/w3c/dom/text_module_w.htm @@ -15,7 +15,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/dom/transform_w.htm b/org.tizen.guides/html/web/w3c/dom/transform_w.htm index 476b5fb..ce59678 100644 --- a/org.tizen.guides/html/web/w3c/dom/transform_w.htm +++ b/org.tizen.guides/html/web/w3c/dom/transform_w.htm @@ -15,7 +15,7 @@ -

@@ -65,7 +65,7 @@

This property defines whether the backface of the transformed element is expressed.

+ <head>
    <style type="text/css">
       .box 
diff --git a/org.tizen.guides/html/web/w3c/dom/transition_w.htm b/org.tizen.guides/html/web/w3c/dom/transition_w.htm
index 78b050a..a0e9a88 100644
--- a/org.tizen.guides/html/web/w3c/dom/transition_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/transition_w.htm
@@ -15,7 +15,7 @@
 
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/dom/woff_w.htm b/org.tizen.guides/html/web/w3c/dom/woff_w.htm
index 79a0423..06848fe 100644
--- a/org.tizen.guides/html/web/w3c/dom/woff_w.htm
+++ b/org.tizen.guides/html/web/w3c/dom/woff_w.htm
@@ -15,7 +15,7 @@
 
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm b/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
index dbab3ad..dcf5049 100644
--- a/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/canvas_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
@@ -82,7 +82,7 @@ indicated, and then creates the image in the canvas. The created image is pixel-
 
 
 Create the applications with the following logic:
-Load an image. 
+Load an image. 
 Render the loaded image in the random location of the canvas.  
 Use the	requestAnimationFrame() method of the Timing control for script-based animations API (in mobile or wearable applications) to change the color of the loaded image, based on different times.  
 Create a logic that measures FPS (frames per second) in order to check the performance.  
@@ -93,12 +93,12 @@ indicated, and then creates the image in the canvas. The created image is pixel-
 The following figure shows the result of the test: As the number of objects increase, the performance of the Canvas 2D Context API rapidly decreases when compared to WebGL (the result is subject to change according to the complexity of the application logic). As such, when expressing many graphic objects all differently, it is much more efficient to use WebGL than the Canvas 2D Context API.
 
   Figure: Test result 
-  
+  
  
 There is one problem with using WebGL; the ratio of mobile browsers supporting it is quite low compared to the Canvas 2D Context API, and even when it is supported, usually only partial features are included (support for 3D acceleration, reflection effect, and camera effect is particularly low). The following figure shows the support status of WebGL in computer (top) and mobile (bottom) browsers, as published in http://webglstats.com/ in June 2013. 
 
   Figure: WebGL support in computer and mobile browsers 
-  
+  
 
 Many mobile browsers do not support WebGL or only partially support WebGL. Even though Tizen supports WebGL, it is recommended to use the Canvas 2D Context API for small amount of 2D drawings, since the API is supported in most mobile browsers. However, for performance critical applications, use WebGL for faster 2D performance.  
 
diff --git a/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm b/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
index 87ffd67..d9ee89b 100644
--- a/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/graphics/svg_w.htm b/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
index daf9d2b..9b11bfe 100644
--- a/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
+++ b/org.tizen.guides/html/web/w3c/graphics/svg_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/guides_w3c_w.htm b/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
index d27424c..33b4dd2 100644
--- a/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
+++ b/org.tizen.guides/html/web/w3c/guides_w3c_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/location/geolocation_w.htm b/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
index 7fbc37e..135e744 100644
--- a/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
+++ b/org.tizen.guides/html/web/w3c/location/geolocation_w.htm
@@ -14,7 +14,7 @@
 
 
 
-
+
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/location/location_guide_w.htm b/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
index 791250b..a4fbee2 100644
--- a/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/location/location_guide_w.htm
@@ -14,7 +14,7 @@
 
 
 
-
+
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
index 4cfa1b2..b87b64c 100644
--- a/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/getusermedia_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/media/media_capture_w.htm b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
index 0aeb8ca..51b6480 100644
--- a/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/media_capture_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
diff --git a/org.tizen.guides/html/web/w3c/media/media_guide_w.htm b/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
index f3fda85..d510463 100644
--- a/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/media_guide_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/media/video_audio_w.htm b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
index f4bed6c..64478aa 100644
--- a/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/video_audio_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
index 44ca80e..0e46092 100644
--- a/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
+++ b/org.tizen.guides/html/web/w3c/media/webaudio_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
diff --git a/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
index 1752cf0..4e580b2 100644
--- a/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
+++ b/org.tizen.guides/html/web/w3c/perf_opt/jquery_performance_improvement_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
@@ -101,7 +101,7 @@ var search_button = $('button');
 /* Code#2 */
 var search_button = $('#contents button');
 Figure: jQuery performance improvement result (in mobile applications only) 
-   
+

@@ -125,7 +125,7 @@ var search_button = $('button.blue');

/*Code#3*/
 var search_button = $('#contents button.blue');

Figure: jQuery performance improvement result (in mobile applications only)

jQuery performance improvement result (in mobile applications only)

@@ -157,7 +157,7 @@ $search_button.on('click', function() {}); $search_button.removeClass('blue'); $search_button.addClass('red');

Figure: jQuery performance improvement result (in mobile applications only)

jQuery performance improvement result (in mobile applications only)

@@ -183,7 +183,7 @@ $("#contents").('background-color', 'red');

/* Code#2 */
 $("#contents").addClass('active').css('border', '1px solid').('background-color', 'red');

Figure: jQuery performance improvement result (in mobile applications only)

jQuery performance improvement result (in mobile applications only)

@@ -221,7 +221,7 @@ for (var i = 0, len = array_list.length; i < len; i++) } $contents_list.append(list);

Figure: jQuery performance improvement result (in mobile applications only)

jQuery performance improvement result (in mobile applications only)

diff --git a/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm index 5b5ceb8..75fa04e 100644 --- a/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm +++ b/org.tizen.guides/html/web/w3c/perf_opt/js_performance_improvement_w.htm @@ -14,7 +14,7 @@ -

@@ -95,7 +95,7 @@ for (var i = 0, len = array_list.length; i < len; i++) new_array_list.push(array_list[i]); }

Figure: JavaScript performance improvement result (in mobile applications only)

JavaScript performance improvement result (in mobile applications only)

@@ -149,7 +149,7 @@ for (i = 0, arrayLen = array_list.length; i < arrayLen; i++) new_array_list.push(array_list[i]); }

Figure: JavaScript performance improvement result (in mobile applications only)

JavaScript performance improvement result (in mobile applications only)

@@ -181,7 +181,7 @@ for (var i = 0; i < 100; i++) }

Figure: JavaScript performance improvement result (in mobile applications only)

JavaScript performance improvement result (in mobile applications only)

@@ -223,7 +223,7 @@ for (var i = 0; i < 100; i++) style = contents_list.getAttribute('style'); }

Figure: JavaScript performance improvement result (in mobile applications only)

JavaScript performance improvement result (in mobile applications only)

diff --git a/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm index 93e83ee..bf4ca7c 100644 --- a/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm +++ b/org.tizen.guides/html/web/w3c/perf_opt/minify_js_css_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm index dabe140..8945064 100644 --- a/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm +++ b/org.tizen.guides/html/web/w3c/perf_opt/page_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm index 7bb3d2c..e6b336c 100644 --- a/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm +++ b/org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm index 8240cc7..427d2be 100644 --- a/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm +++ b/org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm index 1c36822..e4398c2 100644 --- a/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm +++ b/org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm @@ -14,7 +14,7 @@ -

@@ -89,7 +89,7 @@ If a worker triggers a message event, the colorFilter() method, the execution time is high (16218 milliseconds).

Figure: Color filter application using UI thread (in mobile applications only)

Color filter application using UI thread (in mobile applications only)

function colorFilterStart()
 {
@@ -137,13 +137,13 @@ function colorFilter(binaryData, pixels)
 };

You can test the application performance using the Remote Inspector. In the Timeline panel, the event of performing all the calculations in a single UI thread creates a delay of 16218 milliseconds.

You can test the application performance using the Web Inspector. In the Timeline panel, the event of performing all the calculations in a single UI thread creates a delay of 16218 milliseconds.

Figure: UI thread application event performance

UI thread application event performance

Figure: UI thread application memory performance

UI thread application memory performance

@@ -151,7 +151,7 @@ function colorFilter(binaryData, pixels) - +

Note
Since launching the Remote Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Remote Inspector is not used, the delay is approximately 6000 milliseconds.	Since launching the Web Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Web Inspector is not used, the delay is approximately 6000 milliseconds.

@@ -160,7 +160,7 @@ function colorFilter(binaryData, pixels)

The following example uses 4 Web workers to apply a color filter effect on an image by dividing the image into 4 horizontal areas and working on each area simultaneously. The time taken by the application to apply the filter is also displayed on the screen. Since all the calculations are performed by 4 Web workers simultaneously, the execution time is significantly lower (2254 milliseconds).

Figure: Color filter application using multi-thread Web workers (in mobile applications only)

Color filter application using multi-thread Web workers (in mobile applications only)

function colorFilterStart()
 {
@@ -252,10 +252,10 @@ function colorFilter(binaryData, pixels)
 By using 4 Web workers in the application, the application performance improves 7 times compared to using a UI thread in the same application.
 
 Figure: Multi-thread application event performance 
-
+
 
 Figure: Multi-thread application memory performance 
-
+
 
 The following table shows the response speed and memory performance based on the number of Web worker threads used to run the application in a Tizen quad-core processor device.
    
diff --git a/org.tizen.guides/html/web/w3c/security/cors_w.htm b/org.tizen.guides/html/web/w3c/security/cors_w.htm
index 17557ab..0b9f6b1 100644
--- a/org.tizen.guides/html/web/w3c/security/cors_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/cors_w.htm
@@ -14,7 +14,7 @@
  
  
- 
+ 
 	
 		 
 	
@@ -83,7 +83,7 @@
 
 
 Figure: Simple request workflow
- 
+ 
 
 
 Preflight Request
@@ -103,7 +103,7 @@
 
 
 Figure: Preflight request workflow
- 
+ 
  
 
 
diff --git a/org.tizen.guides/html/web/w3c/security/iframe_w.htm b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
index 881ee0f..b23c142 100644
--- a/org.tizen.guides/html/web/w3c/security/iframe_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/iframe_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/security/security_guide_w.htm b/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
index 1ba8afe..db06ec7 100644
--- a/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/security/security_guide_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/storage/appcache_w.htm b/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
index b24e7c0..b106dee 100644
--- a/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/appcache_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
diff --git a/org.tizen.guides/html/web/w3c/storage/file_w.htm b/org.tizen.guides/html/web/w3c/storage/file_w.htm
index eafc169..d953b98 100644
--- a/org.tizen.guides/html/web/w3c/storage/file_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/file_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm b/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
index 49617aa..88476d5 100644
--- a/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/indexdb_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
index 33669a2..deec280 100644
--- a/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm b/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
index a3f8a3b..dd1f8b2 100644
--- a/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/web_storage_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/storage/websql_w.htm b/org.tizen.guides/html/web/w3c/storage/websql_w.htm
index b096451..6eedeaf 100644
--- a/org.tizen.guides/html/web/w3c/storage/websql_w.htm
+++ b/org.tizen.guides/html/web/w3c/storage/websql_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
diff --git a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
index ca9b6b5..8ebea64 100644
--- a/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/camera_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
diff --git a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
index 8103129..5366a73 100644
--- a/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		
 	
diff --git a/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
index c2777da..90b16a0 100644
--- a/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm b/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
index 7c77049..badb380 100644
--- a/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
          
     
diff --git a/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm b/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
index 1ccc63c..691071e 100644
--- a/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
+++ b/org.tizen.guides/html/web/w3c/supplement/webgl_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
diff --git a/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm b/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm
index 4f445fb..63ed07c 100644
--- a/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/clipboard_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
diff --git a/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm b/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm
index e8b227a..a6028f5 100644
--- a/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
diff --git a/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm b/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
index 647ef90..bca32b2 100644
--- a/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
diff --git a/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm b/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm
index 20d57c1..b4046a1 100644
--- a/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/frame_flattening_w.htm
@@ -17,7 +17,7 @@
 
 
 
-
+
 	
 
 
diff --git a/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm b/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm
index ed1a339..874d46f 100644
--- a/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/html_priority_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		 
 	
@@ -54,10 +54,10 @@
 
 The browser, based on the version defined in the <!DOCTYPE> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <!DOCTYPE> element must be declared at the beginning of an HTML document.
 
-/* HTML5 */
+<!--HTML5-->
 <!DOCTYPE html>
 
-/* Prior to HTML5 */
+<!--Prior to HTML5-->
 <!DOCTYPE html PUBLIC "{HTML Version Information}" "{DTD (Document Type Definition) file link defined by Rule in HTML DOM}">
 
 
@@ -143,7 +143,7 @@
 The following figure illustrates this problem in mobile applications by applying a font color to a black background.
 
 Figure: Expected and actual result of applying a font color (in mobile applications only) 
-
+
 
 Basic CSS Rules
 
@@ -152,9 +152,9 @@
 
 When more than 1 overlapping styles are applied to the same element, only the last style is visible:
 
-p {color: red}
+p {color: red}
 p {color: blue}
-/* Blue color is applied */
+<!--Blue color is applied-->
 
 The style applied in the parent node at the DOM tree is inherited. For more information, see W3C inheritance documentation.
 
@@ -165,8 +165,8 @@ p {color: blue}
 Element = 1
 
 
-<body>
-<p id="target" class="target">Hello World</p>
+<body>
+   <p id="target" class="target">Hello World</p>
 </body>
 
 <style>
@@ -174,12 +174,12 @@ p {color: blue}
    p#target {color: red} /* Specificity: 101 */
    p.target {color: blue} /* Specificity: 11 */
    p {color: tomato} /* Specificity: 1 */
-   /* Red color is applied */
-</style>
+</style>
+<!--Red color is applied-->
 
 When the !important attribute is used, it has the highest priority:
-<body>
-<p id="target" class="target">Hello World</p>
+<body>
+   <p id="target" class="target">Hello World</p>
 </body>
 
 <style>
@@ -187,8 +187,8 @@ p {color: blue}
    p#target {color: red}
    p.target {color: blue}
    p {color: tomato}
-   /* Black color is applied */
-</style>
+</style>
+<!--Black color is applied-->
 
 
 
@@ -214,25 +214,25 @@ body .contents {color: #999;}
 style attribute in a HTML element
 
 
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
    <head>
-      /* Link in head */
+      <!--Link in head-->
       <link rel="stylesheet" href="css/style.css"/>
 
-      /* Style tag in head */
+      <!--Style tag in head-->
       <style>
          p {color: tomato}
       </style>
 
-      /* @import in CSS area */
+      <!--@import in CSS area-->
       <style>
          @import url("css/style.css");
       </style>
    </head>
 
    <body>
-      /* Style attribute in HTML element */
+      <!--Style attribute in HTML element-->
       <p style="color: red">Hello World</p>
    </body>
 </html>
@@ -262,7 +262,7 @@ body .contents {color: #999;}
       
     
 
  
 Figure: Using the @import attribute 
-
+
 
 The markup in the corresponding files is as follows:
 
@@ -277,12 +277,12 @@ body .contents {color: #999;}
 p: after {content: " : linked in head"}

Figure: Result of linking the @import attribute

Result of linking the @import attribute

In the priorities1.css file:

p: after {content: " : Using @import in CSS area"}

Figure: Result of using the @import attribute in the CSS area

Result of using the @import attribute in the CSS area

@@ -335,7 +335,7 @@ p: after {content: " : linked in head"}

The following example shows the use of a simple event:

/* HTML */
+<!--HTML-->
 <body onload="touchEventHandler()">
 
 /* JavaScript */
diff --git a/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm b/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm
index 7d44c95..c3afc43 100644
--- a/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/multiple_screens_w.htm
@@ -14,7 +14,7 @@
  
  
 
- 
+ 
     
         
     
@@ -22,10 +22,10 @@
     
         Content
         
-            Key Concepts
-            UI Scalability
-            Creating Applications Supporting Multiple Screens
-            Image Resolution Optimization
+            Key Concepts
+            UI Scalability
+            Creating Applications Supporting Multiple Screens
+            Image Resolution Optimization
         
     
 
@@ -71,10 +71,10 @@
   
   
   UI Scalability
-  With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the viewport meta tag to fit the Web page into the device screen, and the rem unit to determine the size of the Tizen Web UI widgets.
+  With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the viewport meta tag to fit the Web page into the device screen, and the rem unit to determine the size of the Tizen Web UI components.
   Setting the Viewport
   Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.
-  In the following example, the viewport width is set to device-width, which is determined by the width of the Tizen device. The device-width value is retrieved to set similar virtual DPI values and to display widgets with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)
+  In the following example, the viewport width is set to device-width, which is determined by the width of the Tizen device. The device-width value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)
   <meta name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   If the viewport width is set to device-width, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (http://tizen.org) on different devices with the viewport width set to device-width.
@@ -121,7 +121,7 @@
    Creating screen resolution-independent UI
   
   Configuring the Viewport
-  To use UI scalability in your application, set the viewport meta tag while creating a Web application project in IDE. To configure the viewport in the Tizen Web applications, add the viewport meta tag in the <head> section of the index.html file:
+  To use UI scalability in your application, set the viewport meta tag while creating a Web application project in IDE. To configure the viewport in the Tizen Web applications, add the viewport meta tag in the <head> section of the index.html file:
   <meta name="viewport"
       content="width=device-width, initial-scale=1.0,
                minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -131,35 +131,35 @@
   <link media="only screen and (min-resolution: 320dpi)"
       href="high-quality-images.css" type= "text/css" rel="stylesheet">
   In the CSS file:
-  @media screen and (max-resolution: 159dpi)
+  @media screen and (max-resolution: 159dpi)
 {
-   /* Set styles */
+   <!--Set styles-->
 }
 
 @media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
 {
-   /* Set styles */
+   <!--Set styles-->
 }
 
 @media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
 {
-   /* Set styles */
+   <!--Set styles-->
 }
 
 @media screen and (min-resolution: 320dpi)
 {
-   /* Set styles */
+   <!--Set styles-->
 }
 
   You can also set different layout and resources for the portrait and landscape views in the CSS file:
-  @media screen and (orientation: portrait)
+  @media screen and (orientation: portrait)
 {
-   /* Set styles */
+   <!--Set styles-->
 }
 
 @media screen and (orientation: landscape)
 {
-   /* Set styles */
+   <!--Set styles-->
 }
 
   Creating Screen Resolution-independent UI
@@ -184,10 +184,10 @@
     
     Photos
     An image can be added to an application using the HTML img tag, or CSS background property as shown in the following example:
-  /* HTML */
+  <!--HTML-->
 <img src="images/sample.jpg" alt="sample image" />
 
-/* CSS */
+<!--CSS-->
 .photo
 {
    background: url(../images/sample.jpg) 0 0 no-repeat;
@@ -208,7 +208,7 @@
 
 
 Figure: Enlarging a low-resolution image
-
+
   Icons
     Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 background-size property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.
     .prev_icon, .next_icon
@@ -231,13 +231,13 @@
 When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the figure below.
 
 Figure: Network speed when calling each image separately
-
+
 
 You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the background-position property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
 
 .prev_icon, .next_icon
 {
-   background-size: 20px auto; /* Full HD Display */
+   background-size: 20px auto; <!--Full HD Display-->
    background-image: url(../images/page_navi_arrow.png);
 }
 
@@ -252,15 +252,15 @@
 }
 
 Figure: Network speed when using sprite images
-
+
      Animated Images
     Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.
 
     To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 animation attribute.
     Figure: JAVA mascot character in GIF (source: http://lea.verou.me)
-    


+    


 
-    Below, the network capacity usage and timeline using the following animation types are compared using the Remote Inspector:
+    Below, the network capacity usage and timeline using the following animation types are compared using the Web Inspector:
     
     GIF animation
     JavaScript animation
@@ -276,11 +276,11 @@
 
 
     Figure: Events for a GIF image
-    


+    


     Figure: Memory usage of a GIF image
-    


+    


     Figure: Network capacity usage of a GIF image
-    


+    


 
     GIF animation can be created in various resolutions without quality loss, when you use the option introduced in Photos. This, however, increases memory occupancy.
 
@@ -292,11 +292,11 @@ Events: Event is fired every 100 ms, the interval of Figure: Events for a JavaScript animation
-    


+    


     Figure: Memory usage of a JavaScript animation
-    


+    


     Figure: Network capacity usage of a JavaScript animation
-    


+    


 The following example shows how JavaScript animation can be implemented:
     <script>
    var obj = document.querySelector(".animated img"), flag = 0;
@@ -331,11 +331,11 @@ Memory: 50 ~ 90 KB
 Network: 9 ~ 21 ms
 
     Figure: Events for a CSS3 animation
-    


+    


     Figure: Memory usage of a CSS3 animation
-    


+    


     Figure: Network capacity usage of a CSS3 animation
-    


+    


 
     The following example shows how CSS3 animation can be implemented:
         <style>
diff --git a/org.tizen.guides/html/web/w3c/useful/performance_w.htm b/org.tizen.guides/html/web/w3c/useful/performance_w.htm
index c24932e..970648a 100644
--- a/org.tizen.guides/html/web/w3c/useful/performance_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/performance_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		
 	
@@ -178,7 +178,7 @@ el.parentNode.removeChild(el);
 The layout of the Web application is maintained in Webkit as a DOM tree. The CSS style is applied to the DOM tree and produces the render tree that contains the rendering information for the real screen. The user sees the result of painting the render tree. The following figure shows the overall rendering flow that happens in the Webkit layout engine.
 
 Figure: Webkit rendering flow 
-  
+
 
 You can improve performance by designing your application to avoid unnecessary rendering. Minimizing the chances of DOM tree changes is a key to optimizing Web application performance, because usually the rendering needs to be done whenever the DOM tree is changed (this situation is called "document reflow" - Webkit needs to recalculate the position of elements in the document after a DOM change).
 
@@ -288,7 +288,7 @@ aDiv.style.height = newHeight + 'px'; /* Write */
 	
 
 		Keep only the first page elements in the index.html file.
-		Take advantage of a useful technique called deferring loading. The UI widget creation starts at the DOMContentLoad time, and at this time all the DOM elements in the first page (index.html) are constructed. Of course, images and other resources are not yet loaded at this stage.
+		Take advantage of a useful technique called deferring loading. The UI component creation starts at the DOMContentLoad time, and at this time all the DOM elements in the first page (index.html) are constructed. Of course, images and other resources are not yet loaded at this stage.
 Often the first page can contain unnecessary elements, and consequently slow down the DOM construction. To avoid the problem, construct the first page to contain only the necessary elements to show the first scene, and put the rest of the pages in another HTML file. Similarly, if you do not need some JavaScript functionality on the first page, load the related JavaScript files only after the first page is loaded.
 	
  
diff --git a/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm b/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
index 1d8b6a1..b94dd25 100644
--- a/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/sound_policy_w.htm
@@ -17,7 +17,7 @@
 
 
 
-
+
 	
 
 
diff --git a/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm b/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm
index 97e28e2..ff63998 100644
--- a/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/ui_layout_w.htm
@@ -14,7 +14,7 @@
   
  
  
- 
+ 
 	
 		
 	
@@ -94,34 +94,34 @@
 
 Figure: 320x320 calculator 
 number_pad {width: 100%; height: 70%;}
- 
+ 
 
 An application with this relative layout is auto-fitted when it runs on an unexpected device, such as the device with a 360x480 resolution shown in the following figure. Even though this adjusted layout may not be as good as the original, it is good enough, since it shows a usable application UI.
  
 
 Figure: 360x480 calculator with a relative layout  
-	 
+	 
 
 The following figure shows what happens if you use an absolute 320x320 layout. The presentation is definitely ugly (with an empty white space at the bottom) and usability reduced, although the calculation logic itself still works.
 Figure: 360x480 calculator with an absolute 320x320 layout
 number_pad {width: 320px; height: 224px;} 
  
   
-	 
+	 
 
 Header and Footer Position
 
 While the content layout itself becomes the application UI layout on a Web page, a typical wearable application layout consists of a header area, content area, and footer area. With this trend, many wearable Web applications are designed by separating the 3 areas explicitly.
 Figure: Typical wearable Web application layout  
-	 
+ 
 
 Not setting the place of the header and footer areas clearly can easily cause problems for your layout. In case of the header, the side-effect is relatively small. However, a wrongly defined footer area can be quite visible and lead to poor usability. The following figure shows the original layout of a pedometer application that consists of a header, content, and footer, with a Stop button set in the footer area. 
 Figure: 320x320 sample Web application  
-	 
+ 
 
 In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure.  
 Figure: Layout on 360x480  
-	 
+ 
 
 To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px: 
 
@@ -131,7 +131,7 @@
  
 The following figure shows the same Web application running on the unexpected device after the footer properties are defined properly. With the correct values, the Web application is usable even on a new target, not planned during the development phase. Note that if a relative layout is also applied to the content area, the result is an even better layout and further improved usability.
 Figure: Usable layout on 360x480  
-	 
+ 
 
 Flexible Media
 	
@@ -140,7 +140,7 @@
 
 Figure: Flexible media on 320x320 and 360x480 
 .video iframe {width: 100%; height: auto;}
- 
+ 
 
  
  The following figure shows an example of wrong usage, where usability decreases as the video element is simply scaled up based on the aspect ratio change. If you set the video element size using a fixed size like this, you get no benefit from the increased resolution, and the layout on the whole screen becomes inharmonious, decreasing usability.
@@ -148,7 +148,7 @@
 
 Figure: Fixed size media element 
  .video iframe {width: 320px; height: 240px;} 
- 
+ 
 
 Single Layout Example
 	
@@ -186,7 +186,7 @@
 The code snippet shows that the content size is set to be same as the viewport size. Each box is filled with a different color and placed so that it fills a quarter of the content area. Because each box size is defined with the width and height of 100%, the relative size of each box element remains the same even if the viewport size changes.
 
 -/* Default, used for all */
+<!--Default, used for all-->
 * {box-sizing: border-box;}
 body, div, h1 {margin: 0px; padding: 0px;}
 html, body {width: 100%; height: 100%; overflow-x: hidden;}
@@ -215,14 +215,14 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
 The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area. 
  
  Figure: Original layout on a target device  
-	
+ 
  The following figure shows that the relative layout and scaling are correctly applied even when the same application is run on a mobile device with the aspect ratio of 16:9.
   Figure: Scaled layout on a 16:9 mobile device  
-	
+  
 The following code snippet shows an example where the background color is replaced with an image while the layout is exactly same as in the 4 box example. The following figures show how the layout including media elements (such as images) functions exactly like the basic box layout.
 
 -/* Default, used for all */
+<!--Default, used for all-->
 * {box-sizing: border-box;}
 body, div, h1 {margin: 0px; padding: 0px;}
 html, body {width: 100%; height: 100%; overflow-x: hidden;}
@@ -258,10 +258,10 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
 
  
  Figure: Image-based layout on a target device  
-	
+ 
 
 Figure: Image-based scaled layout on a 16:9 mobile device  
-		
+	
 
 
  Multiple Layouts for Multiple Devices 
@@ -269,16 +269,21 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
   In many cases, the desired end result for your application can be achieved using scaling and a relative layout within a single layout. However, this approach does not always provide the best quality for the end user. 
 You can support the best possible layout and usability with some additional development efforts. For instance, you can create an application which, on a tablet, shows the main information (clock face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (clock face). This kind of end result, as shown in the following figure, cannot be achieved by only scaling up the whole layout of the watch device.
 Figure: Application for a watch and tablet  
-	  
+  
 
-CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues: 
+W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues: 
 
    
   Viewport setting
    Category classification 
-   Classification for display modes (landscape and portrait) 
+   Classification for display modes  
  
-   
+
+ 
+Since the 2.3.1 version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily migrate your application to support both shapes. 
+ Figure: Application for a square and circular device  
+   
+     
 
   Viewport Setting for Multiple Layouts   
 The difference between multiple and single layouts is that, in the multiple layouts, the content width of the viewport meta tag is set to "device-width". This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the "device-width" setting is needed to create an adaptive and responsive Web application. 
@@ -288,12 +293,11 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
 <meta name="viewport" content="width=device-width, user-scalable=no">
 
 
-
 Category Classification
 	
 When creating multiple layouts, you must first configure the layout categories. In other words, a classifying category is needed to fit the layout on the current executable environment. Media queries are supported in CSS3 to give Web application information to the executable environment.
 
-Media Queries
+W3C Media Queries
 Media queries consist of a media type and expressions of media features. 
 
 The media types indicate the media on which the current Web application is running. They are defined in HTML4. The following media types are supported:
@@ -390,23 +394,301 @@ html, body {width: 100%; height: 100%; overflow-x: hidden;}
     	
     
   
-	
+ 
+Tizen Specialized Media Query
+Tizen supports a special media query feature for a circular device shape. The following table lists the supported media features.
+
+
+       
+       
+               
+       
+       
+               
+       
+       
+Note
This feature is supported since 2.3.1.
+
+ 
+
+    
+     
+      
+        
+        
+         
+     
+    
+     
+      
+     
+        
+           
+    
+    
+    
+  Table: Tizen specialized media featureFeature Value Min/Max Description
-tizen-geometric-shape "rectangle" | "circle" No Device shape
+
+You can combine this media query feature with the W3C type in your code. The final view shows the layout inside {...} to the end user:
++@media all and (-tizen-geometric-shape: circle) {...}
+
+ 
+  	
 Classification for Display Modes
 
-You can configure the device landscape and portrait mode using the device-aspect-ratio in Media Queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the max-device-aspect-ratio feature is used. 
+The display mode can be classified as portrait or landscape for a rectangle-shaped device, or circular for a circular device.
+
+Portrait and Landscape
+
+You can configure the device landscape and portrait mode using the device-aspect-ratio attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the max-device-aspect-ratio feature is used. 
 If you use the orientation:portrait/landscape feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the device-aspect-ratio to configure the portrait and landscape mode. 
-+ @media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1) 
 {
-   // For portrait mode
+   <!--For portrait mode-->
 }
 @media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10) 
 {
-   // For landscape mode
+   <!--For landscape mode-->
 }
 	
-	
 
+Circular Device
+
+You can configure the device circular mode using the -tizen-geometric-shape attribute in the Tizen environment. The following example shows how to use the -tizen-geometric-shape feature.
+
+
+       
+       
+               
+       
+       
+               
+       
+       
+Note
This feature is supported since 2.3.1.
+
+
++@media all and (-tizen-geometric-shape: circle) 
+{
+   <!--For a circular device-->
+}
+
+
+Application Migration to a Circular Device	
+
+This section illustrates an example for how you can migrate a basic application from a rectangular device (such as Gear 2 or Gear S) to a circular device. Use this example as the best practice to improve your layout.
+
+The example uses the following HTML and CSS code for the sample application and its layout.
+
++<!--HTML code-->
+<section id="main">
+   <header>HEADER</header>
+   <article id="content">
+      lt;ul>
+         <li>List Item 1</li>
+         <li>List Item 2</li>
+         <li>List Item 3</li>
+         <li>List Item 4</li>
+         <li>List Item 5</li>
+         <li>List Item 6</li>
+         <li>List Item 7</li>
+         <li>List Item 8</li>
+         <li>List Item 9</li>
+         <li>List Item 10</li>
+      </ul>
+   </article>
+   <footer>FOOTER</footer>
+</section>
+
+<!--CSS code-->
+html, body 
+{
+   height: 100%;
+   width: 100%;
+   padding: 0;
+   margin: 0;
+   font-size: 24px;
+   overflow: hidden;
+}
+
+section 
+{
+   width: 100%;
+   height: 100%;
+   overflow: auto;
+   padding: 70px 0;
+}
+
+header, footer 
+{
+   width: 100%;
+   height: 70px;
+   min-height: 70px;
+   line-height: 70px;
+   font-size: 30px;
+   text-align: center;
+   position: fixed;
+}
+
+header 
+{
+   top: 0;
+}
+
+footer 
+{
+   bottom: 0;
+}
+
+article ul li 
+{
+   border-top: 1px solid rgba(52, 52, 52, 1);
+   padding: 15px 20px;
+   color: rgba(209, 209, 209, 1);
+   font-size: 40px;
+}
+
+article ul li:first 
+{
+   border-top: 0 none;
+}
+
+To migrate the application, use the following steps:
+
+  
+  Use a relative layout.
+
+ To achieve a responsive layout for different devices, implement a relative layout. Simply set the width: 100% attribute to the layout elements in the CSS code:
++section 
+{
+   width: 100%;
+   height: 100%;
+   ...
+}
+
+header, footer 
+{
+   width: 100%;
+   ...
+} 
+ 
+	
+	
+		
+	
+	
+		
+	
+	
+Note
The relative layout concept is described in more detail in Relative Layout.
+
+   Set extra spaces both at the top and bottom.
+
+ During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a "padding" space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:
++@media all and (-tizen-geometric-shape: circle) 
+{
+   section {padding: 77px 0;}
+}
+
+
+ Figure: Top and bottom padding  
+   
+
+   Set the header and footer position.
+
+After setting the top and bottom padding, set the header and footer position for scrolling in the circular view.
+For a rectangular device with a lengthwise screen, especially Gear S, the best option is to make only the content area scrollable.
+
+Figure: Scrolling with a rectangular screen  
+
+In a circular screen, it is better to make the whole page scrollable, including the top and bottom space.
+Figure: Scrolling with a circular screen  
+
+
+To implement the header and footer position, use the CSS position attribute:
++<!--Rectangular device-->
+header, footer 
+{
+   position: fixed;
+}
+
+<!--Circular device-->
+@media all and (-tizen-geometric-shape: circle) 
+{
+   header, footer 
+   {
+      position: static;
+   }
+}
+
+
+
+   Move the display to the initial position.
+
+To provide a better user experience, show the entire display at the beginning, including the "top padding" space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.
+
+Figure: Moving to the initial position  
+
+
+The scroll move requires several lines of JavaScript code. In the following sample, the few (N) seconds is set to 1500 ms, but you can change the value as needed.
++(function initScrollPosition() 
+{
+   var SCROLL_DELAY_TIME = 1500,
+       page = document.getElementById("main"),
+       scrollPosition = window.parseInt(window.getComputedStyle(page)["padding-top"]),
+       initScrollTimeoutId = null,
+       mql = window.matchMedia("(-tizen-geometric-shape: circle)");;
+
+   /* The effect is applied to a circular device only, so use mediaquery */
+   if (mql.matches) 
+   {	
+      page.addEventListener("scroll", function clearInitScrollCallback() 
+      {
+         window.clearTimeout(initScrollTimeoutId);
+         page.removeEventListener("scroll", clearInitScrollCallback, false);
+      }, false);
+
+      initScrollTimeoutId = window.setTimeout(function() 
+      {
+         page.scrollTop = scrollPosition;
+      }, SCROLL_DELAY_TIME);
+   }
+}());
+
+
+
+   Set extra attributes for a better view.
+
+Extra attributes are not mandatory in the migration process, but they can be helpful for a better application view.
+Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements' layout are needed too. For example, consider setting the text-align: center attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.
+
++<!--Common style for header and footer text-->
+header, footer 
+{
+   text-align: center;
+}
+
+<!--In a circular screen, list item has a center position-->
+@media all and (-tizen-geometric-shape: circle) 
+{
+   article ul li 
+   {
+      text-align: center;
+      line-height: 60px;
+   }
+}
+
+
+ 
 
 
 
diff --git a/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
index e256caa..8cfa727 100644
--- a/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
+++ b/org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm
@@ -14,14 +14,14 @@
   
  
  
-
+
 	
 		 
 	
 	
 		Related Info
 		
-		    Useful Practices for W3C/HTML5 Features Tutorials
+		    Useful Practices for W3C/HTML5 Features Tutorials
 		
 	
 	
diff --git a/org.tizen.guides/index.xml b/org.tizen.guides/index.xml
index 551a08a..89cbc93 100644
--- a/org.tizen.guides/index.xml
+++ b/org.tizen.guides/index.xml
@@ -13,15 +13,22 @@
 			
 			
 		
+		
+			
+			
+			
+			
+						
+				
 		
 			
 			
 			
 		
 		
+			
 			
 								
-			
 		
 						
 			
@@ -42,13 +49,6 @@
 			
 								
 		
-		
-			
-			
-			
-			
-			
-			
 							
 			
 			
@@ -145,11 +145,12 @@
 			
 							
 						           		
-					
+	
 
 		
 				
 		
+		
 		
 		
 		
@@ -158,63 +159,77 @@
 		
 		
 		
-				
+				
+			
+		
 	
 				
 		      
 	
-				
-		
+	
 		
-		            
+		
+		            
 	
 				
 		
-					
+			
+		
+			
 	
 	
 		
 		
-		
+		
+	
+	
+		
+		
+		
 	
-	
 				
 		
-		
-					
+			
+				
 	
 				
 		
 		
 		
 		
+		
 		
+		
 		
 		
 		
 		
+		
 		
-		
 				
 		
+		
+		
 	
 				
 		
 		
 		
+		
 		
 				
 	
+	
 				
 		
 					
 	
 				
+		
 		
 		
 					
-	
-	
+		
 				
 		
 		
@@ -226,7 +241,7 @@
 					
 	
 	
-		
+		
 			
 		
 			
@@ -244,23 +259,37 @@
 							
 						
 				
-		
-			
-				
-				
+		
+			
+				
+					
+					
+								
+					
 			
-									
+			
+				
+					
+						
+										
+				
+				
+						
+					
 				
 		
 		
 		
-				
+		
+		
+		
 	
 				
 		
 					
 	
 		
+	
 				
 		
 		
diff --git a/org.tizen.tutorials/META-INF/MANIFEST.MF b/org.tizen.tutorials/META-INF/MANIFEST.MF
index 4923a78..a4d34e7 100644
--- a/org.tizen.tutorials/META-INF/MANIFEST.MF
+++ b/org.tizen.tutorials/META-INF/MANIFEST.MF
@@ -2,6 +2,6 @@ Manifest-Version: 1.0
 Bundle-ManifestVersion: 1
 Bundle-Name: Tizen Tutorials
 Bundle-SymbolicName: org.tizen.tutorials;singleton=true
-Bundle-Version: 2.3.1
+Bundle-Version: 2.4.0
 Bundle-Vendor: The Linux Foundation
 
diff --git a/org.tizen.tutorials/about.html b/org.tizen.tutorials/about.html
index df0aa96..2fc6724 100644
--- a/org.tizen.tutorials/about.html
+++ b/org.tizen.tutorials/about.html
@@ -10,7 +10,7 @@
   
  
   About This Content 
-  Tizen 2.3.0 
+  Tizen 2.4.0 
 
   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.
diff --git a/org.tizen.tutorials/html/css/styles.css b/org.tizen.tutorials/html/css/styles.css
index 52c0ab9..4c8f5a8 100644
--- a/org.tizen.tutorials/html/css/styles.css
+++ b/org.tizen.tutorials/html/css/styles.css
@@ -217,14 +217,12 @@ p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep u
 	color: #ffffff;
 }
 
-#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
 #toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
 #toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
 #main {width: 75%; height: 90%;}
 #container {width:100%;}
 #container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
 body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #navigation {width: auto;}
 body.no-toc #toc-navigation {width: auto;}
 body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
 body.no-toc #profile {float: right;right: -32px;}
@@ -252,10 +250,10 @@ ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 7
 	ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
 	ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
 
-	ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
-	ul.devicespecifications li div.devicespec-tit span a.bt-arr 	{display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
-	ul.devicespecifications li div.devicespec-tit span a.bt-arr em 	{display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
-	ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+	ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+	ul.devicespecifications li div.devicespec-tit > span a.bt-arr 	{display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+	ul.devicespecifications li div.devicespec-tit > span a.bt-arr em 	{display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+	ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
 
 	ul.devicespecifications li div.devicespec-con ul.con-list { width:100%;  }
 	ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
diff --git a/org.tizen.tutorials/html/images/clockwidget_sd.png b/org.tizen.tutorials/html/images/basicwatch_sd.png
similarity index 100%
rename from org.tizen.tutorials/html/images/clockwidget_sd.png
rename to org.tizen.tutorials/html/images/basicwatch_sd.png
diff --git a/org.tizen.tutorials/html/images/bluetoothchat.png b/org.tizen.tutorials/html/images/bluetoothchat.png
index 3607fd1..84b8089 100644
Binary files a/org.tizen.tutorials/html/images/bluetoothchat.png and b/org.tizen.tutorials/html/images/bluetoothchat.png differ
diff --git a/org.tizen.tutorials/html/images/cairo-ex1.png b/org.tizen.tutorials/html/images/cairo-ex1.png
deleted file mode 100644
index dd0ce7a..0000000
Binary files a/org.tizen.tutorials/html/images/cairo-ex1.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/cairo_basic.png b/org.tizen.tutorials/html/images/cairo_basic.png
new file mode 100644
index 0000000..99aaed8
Binary files /dev/null and b/org.tizen.tutorials/html/images/cairo_basic.png differ
diff --git a/org.tizen.tutorials/html/images/cairo_evasgl.png b/org.tizen.tutorials/html/images/cairo_evasgl.png
new file mode 100644
index 0000000..6e08cce
Binary files /dev/null and b/org.tizen.tutorials/html/images/cairo_evasgl.png differ
diff --git a/org.tizen.tutorials/html/images/calllog.png b/org.tizen.tutorials/html/images/calllog.png
index 2629285..5633f3e 100644
Binary files a/org.tizen.tutorials/html/images/calllog.png and b/org.tizen.tutorials/html/images/calllog.png differ
diff --git a/org.tizen.tutorials/html/images/chatter.png b/org.tizen.tutorials/html/images/chatter.png
index 73b7a00..33a63d6 100644
Binary files a/org.tizen.tutorials/html/images/chatter.png and b/org.tizen.tutorials/html/images/chatter.png differ
diff --git a/org.tizen.tutorials/html/images/circle_slider.png b/org.tizen.tutorials/html/images/circle_slider.png
new file mode 100644
index 0000000..c4fdb60
Binary files /dev/null and b/org.tizen.tutorials/html/images/circle_slider.png differ
diff --git a/org.tizen.tutorials/html/images/contactsexchanger.png b/org.tizen.tutorials/html/images/contactsexchanger.png
index 4cfe078..7130451 100644
Binary files a/org.tizen.tutorials/html/images/contactsexchanger.png and b/org.tizen.tutorials/html/images/contactsexchanger.png differ
diff --git a/org.tizen.tutorials/html/images/content_sd.png b/org.tizen.tutorials/html/images/content_sd.png
index 20f9cca..2d46c93 100644
Binary files a/org.tizen.tutorials/html/images/content_sd.png and b/org.tizen.tutorials/html/images/content_sd.png differ
diff --git a/org.tizen.tutorials/html/images/downloadmanager.png b/org.tizen.tutorials/html/images/downloadmanager.png
index 0be3e23..76c3e6b 100644
Binary files a/org.tizen.tutorials/html/images/downloadmanager.png and b/org.tizen.tutorials/html/images/downloadmanager.png differ
diff --git a/org.tizen.tutorials/html/images/eventmanager.png b/org.tizen.tutorials/html/images/eventmanager.png
index 69bf90c..fe2a147 100644
Binary files a/org.tizen.tutorials/html/images/eventmanager.png and b/org.tizen.tutorials/html/images/eventmanager.png differ
diff --git a/org.tizen.tutorials/html/images/filemanager.png b/org.tizen.tutorials/html/images/filemanager.png
index a3a4b0b..80cb46f 100644
Binary files a/org.tizen.tutorials/html/images/filemanager.png and b/org.tizen.tutorials/html/images/filemanager.png differ
diff --git a/org.tizen.tutorials/html/images/genlist_wn.png b/org.tizen.tutorials/html/images/genlist_wn.png
new file mode 100644
index 0000000..4550a06
Binary files /dev/null and b/org.tizen.tutorials/html/images/genlist_wn.png differ
diff --git a/org.tizen.tutorials/html/images/graph_app.png b/org.tizen.tutorials/html/images/graph_app.png
deleted file mode 100644
index 5143788..0000000
Binary files a/org.tizen.tutorials/html/images/graph_app.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/mn_fold.png b/org.tizen.tutorials/html/images/mn_fold.png
deleted file mode 100644
index 1f8d62b..0000000
Binary files a/org.tizen.tutorials/html/images/mn_fold.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/mw_fold.png b/org.tizen.tutorials/html/images/mw_fold.png
deleted file mode 100644
index a96e013..0000000
Binary files a/org.tizen.tutorials/html/images/mw_fold.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/n_division.png b/org.tizen.tutorials/html/images/n_division.png
index df38a99..d687bc5 100644
Binary files a/org.tizen.tutorials/html/images/n_division.png and b/org.tizen.tutorials/html/images/n_division.png differ
diff --git a/org.tizen.tutorials/html/images/n_fold.png b/org.tizen.tutorials/html/images/n_fold.png
deleted file mode 100644
index 6336532..0000000
Binary files a/org.tizen.tutorials/html/images/n_fold.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/selfcamera.png b/org.tizen.tutorials/html/images/selfcamera.png
index cbe00b9..75ec9af 100644
Binary files a/org.tizen.tutorials/html/images/selfcamera.png and b/org.tizen.tutorials/html/images/selfcamera.png differ
diff --git a/org.tizen.tutorials/html/images/sensorball.png b/org.tizen.tutorials/html/images/sensorball.png
index 205cce1..1cda2ea 100644
Binary files a/org.tizen.tutorials/html/images/sensorball.png and b/org.tizen.tutorials/html/images/sensorball.png differ
diff --git a/org.tizen.tutorials/html/images/systeminfo_sd.png b/org.tizen.tutorials/html/images/systeminfo_sd.png
index 701e910..5173a84 100644
Binary files a/org.tizen.tutorials/html/images/systeminfo_sd.png and b/org.tizen.tutorials/html/images/systeminfo_sd.png differ
diff --git a/org.tizen.tutorials/html/images/touchpaint_sd.png b/org.tizen.tutorials/html/images/touchpaint_sd.png
index 5ef7775..1aa8fe8 100644
Binary files a/org.tizen.tutorials/html/images/touchpaint_sd.png and b/org.tizen.tutorials/html/images/touchpaint_sd.png differ
diff --git a/org.tizen.tutorials/html/images/w_fold.png b/org.tizen.tutorials/html/images/w_fold.png
deleted file mode 100644
index 1967eb0..0000000
Binary files a/org.tizen.tutorials/html/images/w_fold.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/images/watchface_emulator.png b/org.tizen.tutorials/html/images/watchface_emulator.png
new file mode 100644
index 0000000..a4984ce
Binary files /dev/null and b/org.tizen.tutorials/html/images/watchface_emulator.png differ
diff --git a/org.tizen.tutorials/html/images/watchface_project.png b/org.tizen.tutorials/html/images/watchface_project.png
new file mode 100644
index 0000000..f246dea
Binary files /dev/null and b/org.tizen.tutorials/html/images/watchface_project.png differ
diff --git a/org.tizen.tutorials/html/images/watchface_screen.png b/org.tizen.tutorials/html/images/watchface_screen.png
new file mode 100644
index 0000000..23c98d8
Binary files /dev/null and b/org.tizen.tutorials/html/images/watchface_screen.png differ
diff --git a/org.tizen.gettingstarted/html/images/mw_fold.png b/org.tizen.tutorials/html/images/wn_division.png
similarity index 66%
rename from org.tizen.gettingstarted/html/images/mw_fold.png
rename to org.tizen.tutorials/html/images/wn_division.png
index a96e013..11a7876 100644
Binary files a/org.tizen.gettingstarted/html/images/mw_fold.png and b/org.tizen.tutorials/html/images/wn_division.png differ
diff --git a/org.tizen.devtools/html/images/wn_icon_optional.png b/org.tizen.tutorials/html/images/wn_icon.png
similarity index 89%
rename from org.tizen.devtools/html/images/wn_icon_optional.png
rename to org.tizen.tutorials/html/images/wn_icon.png
index eef91b9..bb5c915 100644
Binary files a/org.tizen.devtools/html/images/wn_icon_optional.png and b/org.tizen.tutorials/html/images/wn_icon.png differ
diff --git a/org.tizen.tutorials/html/images/ww_fold.png b/org.tizen.tutorials/html/images/ww_fold.png
deleted file mode 100644
index b3c1361..0000000
Binary files a/org.tizen.tutorials/html/images/ww_fold.png and /dev/null differ
diff --git a/org.tizen.tutorials/html/index.htm b/org.tizen.tutorials/html/index.htm
index 30e6a4e..a86fcc7 100644
--- a/org.tizen.tutorials/html/index.htm
+++ b/org.tizen.tutorials/html/index.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 
 
 
@@ -35,6 +35,27 @@
 				Data Control
 			
 		
+		Communication
+			
+				Bluetooth
+					
+						Task: Bluetooth Chat
+					
+				
+				NFC
+					
+						Task: Contacts Exchanger
+					
+				
+				Push
+				Secure Element	
+				Messaging
+					
+						Task: Chatter
+					
+									
+					
+					
 		Content
 			
 				Content
@@ -52,13 +73,13 @@
 		
 		Input/Output
 			
+				Archive
 				Filesystem
 					
 						Task: File Manager
 					
 				
 				Message Port				
-				Archive
 			
 				
 		Multimedia
@@ -72,7 +93,11 @@
 			
 				Human Activity Monitor				
 				Power
-				Sensor				
+				Sensor
+					
+						Task: Sensor Ball
+					
+								
 				System Information
 					
 						Task: System Information
@@ -90,27 +115,6 @@
 				Notification		
 			
 		
-		Communication
-			
-				Bluetooth
-					
-						Task: Bluetooth Chat
-					
-				
-				Messaging
-					
-						Task: Chatter
-					
-					
-				NFC
-					
-						Task: Contacts Exchanger
-					
-				
-				Push
-				Secure Element		
-					
-			
 		Social
 			
 				Account
@@ -160,7 +164,6 @@
 				DeviceOrientation Event Specification
 					
 						Task: Compass
-						Task: Sensor Ball
 					
 															
 				Touch Events version 1
@@ -178,7 +181,7 @@
 			
 				HTML5 Canvas
 					
-						Task: Clock Widget
+						Task: Basic Watch
 					
 				
 				HTML5 SVG
@@ -260,6 +263,7 @@
 					
 			
 		
+		Watch Application			
 	
 	
 	
@@ -269,6 +273,7 @@
 		
Application Framework
 			
 				Application
+				Application Group
 				Application Manager
 				Badge
 				Bundle
@@ -277,7 +282,9 @@
 				Notification
 				Package Manager
 				Service Application
+				Widget				
 				Shortcut
+				Watch Application
 			
 		
 		Base
@@ -289,37 +296,39 @@
 		
 		
Content
 			
-				Download
 				Media Content
 				MIME Type
+				Download
 			
 		
 		Context
 			
 				Activity Recognition
 				Gesture Recognition
+				Contextual History
+				Contextual Trigger
 			
 		
 		Graphics
 			
 				OpenGL ES
 				TBM Surface
-				Cairo Integration
-				Graphic Widget
-				
+				Cairo
+				Graphic UI Component
 			
 		
-		Location
+		Location
 			
 				Location
 				Geofence
 				Maps Service
-			
+					
+		
 		Messaging
 			
 				Messages
-				Email
 				Push
+				Email
 			
 		
 		Multimedia
@@ -328,27 +337,32 @@
 				
Camera
 				Image Util
 				Media Codec
+				Media Controller
 				Media Tool
+				Metadata Editor
 				Metadata Extractor
 				Player
 				Radio
 				Recorder
+				Thumbnail Util
 				Tone Player
-				Video Util
 				WAV Player
 				Sound Manager
-			
+				Screen Mirroring Sink
+				Video Util
+						
 		
 		Network
 			
 				Connection
 				Bluetooth
-				NFC	
+				NFC
+				SmartCard	
 				Wi-Fi
 				Wi-Fi Direct	
 			
 		
-		
+		OAuth2
 		Security
 			
 				Key Manager
@@ -357,17 +371,12 @@
 		
 		Social
 			
+				Phonenumber-utils
 				Account Manager
 				Calendar
 				Contacts
 			
-		
-		Sync
-			
-				Sync Adapter
-				Sync Manager
-			
-		
+				
 		System
 			
 				Device
@@ -382,7 +391,7 @@
 			
 		
 		Telephony
-		UI
+		
UI Framework
 			
 				EFL
 				Evas	
@@ -403,15 +412,28 @@
 						Multi-point Touch					
 					
 				
-				UI Control
+				
UI Components
 					
-						Basic
-						Form
-						Naviframe
-						Genlist
-						Menu
-						Panes
-						UI Layout
+						Mobile Native
+							
+								Basic
+								Form
+								Naviframe
+								Genlist
+								Menu
+								Panes
+								UI Layout
+							
+						
+						Wearable Native
+										   
+							   Button
+							   Datetime
+							   Genlist
+							   Popup	
+							   Circle Components
+							
+						
 					
 				
 				Efl Extension
@@ -419,6 +441,7 @@
 				
 				EFL UTIL
 				EFL Optimization
+				EOM
 			
 		
 		UIX
@@ -428,6 +451,12 @@
 			
 		
 		Web
+		Sync
+			
+				Sync Adapter
+				Sync Manager
+					
+		
 	
 
 
diff --git a/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm b/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
index d8bf488..51a33cf 100644
--- a/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm
@@ -16,15 +16,16 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 		Related Info
 		
 			Application Framework Guides
-			Application Framework API
+			Application Framework API for Mobile Native
+			Application Framework API for Wearable Native
 		
 	
 	
@@ -33,9 +34,10 @@
 
 	Application Framework: Controlling Your Application
 	
-The application framework tutorials demonstrate how to use the following features in creating Tizen mobile native applications: 
+The application framework tutorials demonstrate how to use the following features in creating Tizen native applications: 
    
    Application: Using Alarms, Preferences, AppControl, and Other Fundamentals Demonstrates how you can manage application fundamentals, such as application settings and localized strings. 
+   Application Group: Managing Groups Demonstrates how you can define the application launch mode and manage your applications in a group.
     Application Manager: Getting Information about Applications Demonstrates how you can get information about applications. 
    Badge: Displaying the Notification (Badge) Count on the Home Screen Demonstrates how you can create and modify badges.
    Bundle: Using the String-based Dictionary ADT Demonstrates how you can create and manage a key-value dictionary.
@@ -43,9 +45,17 @@
    Message Port: Passing Messages Between Applications Demonstrates how you can send and receive messages through message ports.	   
    Notification: Notifying the User of Application Events Demonstrates how you can display notifications on the application screen.
    Package Manager: Installing and Uninstalling Applications Demonstrates how you can manage and retrieve package information.
-   Service Application: Creating Background Applications Demonstrates how you can create and manage native service applications.   
-   Shortcut: Adding a Shortcut to Home Demonstrates how you can create and modify shortcuts and Dynamic Boxes on the Home screen.
+   Service Application: Creating Background Applications Demonstrates how you can create and manage native service applications.
+   Widget: Creating Widget Applications Demonstrates how you can create and manage widget applications.    
+   
+The following tutorials apply in mobile applications only:
+     
+   Shortcut: Adding a Shortcut to Home Demonstrates how you can create and modify shortcuts on the home screen.
    	
+The following tutorials apply in wearable applications only:
+     
+   Watch Application: Creating a Watch Application Demonstrates how you can create a watch application, set the time, and use the ambient mode.
+   
 
 
 
diff --git a/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm
index ea65ae8..98bd265 100644
--- a/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm
@@ -16,19 +16,20 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 		Content
 		
-			Managing the Application Context
+			Managing the Application Context
 		
 		Related Info
 		
 			Application Manager Guide
-			Application Manager API
+			Application Manager API for Mobile Native
+			Application Manager API for Wearable Native
 		
 	
 	
@@ -36,36 +37,23 @@
 
 
 	Application Manager: Getting Information about Applications
-	
+
 
 This tutorial demonstrates how you can get information about applications. 
 
 Warm-up
 Become familiar with the Application Manager API basics by learning about:
 
-	Managing the Application Context Retrieve the application context and operate on it.
+	Managing the Application Context Retrieve the application context and operate on it.
 
 
-
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-	
-
-	
-			
- Managing the Application Context
-Hide
-  
-			 
+
+ Managing the Application Context
+
 To get the running application context and its details, and to operate on the context:
 
 
-To use the functions and data types of the Application Manager API, include the <app_manager.h> header file in your application:
+
To use the functions and data types of the Application Manager API (in mobile and wearable applications), include the <app_manager.h> header file in your application:
  #include <app_manager.h>
 
@@ -86,7 +74,7 @@ int ret = app_manager_get_app_context(Your App ID, &app_context);
 This example gets for the context of the Clock application. If the function returns APP_MANAGER_ERROR_NONE, it has executed correctly and the app_context variable now contains the handle to the clock context. To prevent memory leaks, release app_context with the app_context_destroy() function after the work is finished.
 
 Operate on the context:
-
+
 Get the application ID and application process ID from the context:
 
 @@ -149,12 +137,6 @@ if (app_context)
 
	
 
 
-			
-				
-		
-				
-
-
 
 
 
diff --git a/org.tizen.tutorials/html/native/app_framework/appgroup_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/appgroup_tutorial_n.htm
new file mode 100644
index 0000000..1af6cb9
--- /dev/null
+++ b/org.tizen.tutorials/html/native/app_framework/appgroup_tutorial_n.htm
@@ -0,0 +1,141 @@
+
+
+
+	
+	
+	
+	
+		
+	
+	
+	
+	
+
+	Application Group: Managing Groups
+
+
+
+
+
+	
+		 
+	
+	
+		Content
+		
+			 Controlling the Launch Mode
+		
+		Related Info
+		
+			Application Group Guide
+			Application Group API for Mobile Native
+			Application Group API for Wearable Native
+		
+	
+	
+
+
+
+	Application Group: Managing Groups
+
+  
+This tutorial demonstrates how you can define the application launch mode and manage your applications in a group.
+  
+Warm-up
+Become familiar with the Application Group API basics by learning about:
+	
+		 Controlling the Launch Mode
+		 Set the launch mode when calling for an application through an app control.		 
+	
+
+
+ Controlling the Launch Mode
+
+In this use case, the caller application has a Launch button. When it is clicked, an app control is used to launch a sub application within the same group.
+ 
+To control the launch mode:
+
+Create the UI with the Launch button:
++static void create_base_gui(appdata_s *ad)
+{
+   Evas_Object *bigbox, *bx, *bt;
+
+   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+   elm_win_autodel_set(ad->win, EINA_TRUE);
+
+   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
+   eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+   bigbox = elm_box_add(ad->win);
+   evas_object_size_hint_weight_set(bigbox, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_win_resize_object_add(ad->win, bigbox);
+   evas_object_show(bigbox);
+
+   bx = elm_box_add(ad->win);
+   elm_box_pack_end(bigbox, bx);
+   evas_object_show(bx);
+
+   bt = elm_label_add(ad->win);
+   elm_object_text_set(bt, "AGT3");
+   elm_box_pack_end(bx, bt);
+   evas_object_show(bt);
+
+   bt = elm_button_add(ad->win);
+   elm_object_text_set(bt, "Launch");
+   elm_box_pack_end(bx, bt);
+   evas_object_show(bt);
+   evas_object_smart_callback_add(bt, "clicked", button_click_cb, NULL);
+
+   evas_object_show(ad->win);
+}
+
+When the button is clicked, use an app control to launch the sub application.
+Define the launch mode for the application to be called using the app_control_set_launch_mode() function. The second parameter defines the launch mode with the app_control_launch_mode_e enumerator (in mobile and wearable applications).
++static void button_click_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   app_control_h h;
+
+   app_control_create(&h);
+   app_control_set_operation(h, "http://tizen.org/appcontrol/operation/view");
+   app_control_set_mime(h, "application/pdf");
+   app_control_set_launch_mode(h, APP_CONTROL_LAUNCH_MODE_GROUP);
+   app_control_send_launch_request(h, NULL, NULL);
+
+   app_control_destroy(h);
+}
+
+static void app_control(app_control_h app_control, void *data)
+{
+   // Handle the launch request
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+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.
+
+
+
+
+
+
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 25028fe..9b6e3a2 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
@@ -16,42 +16,43 @@
 
 
 
-
+
 	
-		
+		 
 	
 	
 		Content
 		
 			Application fundamentals
 				
-				Handling the Application Fundamentals
+				Handling the Application Fundamentals
 				
 				
 			App control
 				
-					Running Applications Using Extra Data
+					Running Applications Using Extra Data
 				
 								
 			Alarm
 				
-					Initializing Alarms
-					Setting an Alarm after Specific Time
-					Setting an Alarm on a Specific Date
-					Setting a Recurring Alarm at a Specific Time of the Day
-					Listing All Scheduled Alarms and Canceling an Alarm
+					Initializing Alarms
+					Setting an Alarm after Specific Time
+					Setting an Alarm on a Specific Date
+					Setting a Recurring Alarm at a Specific Time of the Day
+					Listing All Scheduled Alarms and Canceling an Alarm
 				
 			
 			Application preferences
 				
-					Managing Application Preferences
+					Managing Application Preferences
 				
 			
 		
 		Related Info
 		
 			Application Guide
-			Application API 
+			Application API for Mobile Native 
+			Application API for Wearable Native 
 		
 	
 	
@@ -59,7 +60,7 @@
 
 
 	Application: Using Alarms, Preferences, AppControl, and Other Fundamentals
-	
+
 
 This tutorial demonstrates how you can manage application fundamentals, such as application settings and service applications. 
 
@@ -69,50 +70,38 @@
 
 	Application fundamentals
 		 
-			Handling the Application Fundamentals Define the application entry point and life-cycle callbacks.
+			Handling the Application Fundamentals Define the application entry point and life-cycle callbacks.
 		
 	
     App control
 		
-			Running Applications Using Extra Data Run a specific application control with preconfigured parameters.
+			Running Applications Using Extra Data Run a specific application control with preconfigured parameters.
 		  
     
 	Alarm
 		
-			Initializing Alarms
+			
Initializing Alarms
 			Initialize the alarm for use.
-			Setting an Alarm after Specific Time
+			
Setting an Alarm after Specific Time
 			Set single alarms at specific times.
-			Setting an Alarm on a Specific Date
+			
Setting an Alarm on a Specific Date
 			Set an alarm on a specific date.
-			Setting a Recurring Alarm at a Specific Time of the Day
+			
Setting a Recurring Alarm at a Specific Time of the Day
 			Set a recurring alarm for a period of time at a specific time.
-			Listing All Scheduled Alarms and Canceling an Alarm
+			
Listing All Scheduled Alarms and Canceling an Alarm
 			List all alarms and cancel them.
 		
     
 	Application preferences
 		
-			Managing Application PreferencesManage application preferences.
+			Managing Application PreferencesManage application preferences.
 		
 	
 	
 
 
-
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-	
-			
- Handling the Application Fundamentals
-Hide
-  
-			 
+ Handling the Application Fundamentals
+
 Appcore is the framework all Tizen applications are based on. It is simple and only handles interactions between applications and the operating system.
 An application starts with the main() function. It initializes the appcore and starts it.
 The code below is the minimal application using appcore. It only builds and runs.
@@ -123,7 +112,7 @@
 int
 main(int argc, char *argv[])
 {
-   // Create and ui_app_lifecycle_callback_s object and initialize its contents to 0
+   // Create a ui_app_lifecycle_callback_s object and initialize its contents to 0
    ui_app_lifecycle_callback_s event_callback = {0,};
 
    // Run the application
@@ -133,7 +122,7 @@ main(int argc, char *argv[])
 
 Appcore is based on callbacks. There are two classes of callbacks: those about the application's life-cycle and those about the system.
 The application's life-cycle callbacks are:
-
+
 create: first initialization, comes after app_main() has been called and initializes UI.
 control: triggered when the application is started to do something. It can be called several times during the lifespan of an application, it shows the screen for the action requested. It requires specific information given to the callback.
 terminate: saves work, releases resources, and exits.
@@ -142,7 +131,7 @@ main(int argc, char *argv[])
 
 
 Then, system-related callbacks:
-
+
 low_memory: the system is running low on memory, saves work, and releases resources; if this is not enough are freed, some applications will be killed.
 low_battery: the system is running low on battery (less than 5%), saves work and avoids battery-draining workloads.
 device_orientation: the screen orientation changed between vertical and horizontal, orientation information is given to the callback.
@@ -243,28 +232,20 @@ main(int argc, char *argv[])
 
 The app_control_h type is opaque and information can only be extracted from it through functions from the SDK.
 The most interesting ones are:
-
+
 app_control_get_operation(): retrieves a string describing which operation the application was started for.
 app_control_get_mime(): retrieves the MIME type of the data (e.g. image/jpg).
 app_control_get_app_extra_data(): gets the string value associated with the given key.
 app_control_get_app_extra_data_array(): gets the string array associated with the given key (first check with app_control_is_extra_data_array() whether the data associated with a key is an array).
 
 If other functions are needed, check the app.h header.
-	
-		
-	
-
-			
- Running Applications Using Extra Data
-Hide
-  
-			 
-To run a specified app_control with some preconfigured parameters:
 
+ Running Applications Using Extra Data
 
+To run a specified app_control with some preconfigured parameters:
 
 
-To use the functions and data types of the AppControl API, include the <app.h> header file in your application:
+
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>
 
@@ -403,39 +384,28 @@ if (ret != APP_CONTROL_ERROR_NONE)
 
 
 
-	
-						
-	
-			
-				Initializing Alarms
-				hide
-			
-			
+
+Initializing Alarms
+
 To initialize the alarm:
-To use the functions and data types of the Alarm API, include the <app.h> header file in your application:
+To use the functions and data types of the Alarm API (in mobile and wearable applications), include the <app.h> header file in your application:
  #include <app.h>
 
 
 The http://tizen.org/privilege/alarm.get and http://tizen.org/privilege/alarm.set privileges are required for the Alarm API.
 
-			
-		
-		
-		
-			
-				Setting an Alarm after Specific Time
-				hide
-			
-			
+
+Setting an Alarm after Specific Time
+
 To set an alarm after a specific time:
 
 
 
 
-Implement the AlarmRegister application
+Implement the AlarmRegister application
 AlarmRegister requires the http://tizen.org/privilege/alarm.set privilege.
-
+
 To identify which application to alarm, the Alarm API needs app_control_h.
 Obtain app_control_h of a specific app by calling app_control_set_app_id(app_control_h app_control, const char *app_id);. You can get AlarmTarget app_id from the tizen-manifest.xml file. 
 
@@ -457,7 +427,7 @@ bool init_alarm()
 

 
 	To schedule an alarm after a delay, the function requires 4 parameters:
-  
+  
 	[in] app_control: The destination app_control to perform the specific work when the alarm is triggered	
 	[in] delay: The amount of time before the first execution (in seconds) 
 	[in] period: The amount of time before a subsequent alarm (in seconds). If set to 0, there is only 1 execution.
@@ -474,7 +444,7 @@ bool init_alarm()
 
 
 
-Implement the AlarmTarget application
+Implement the AlarmTarget application
 A scheduled alarm calls AlarmTarget' app_control_cb callback when the alarm expires.
 
 @@ -485,19 +455,12 @@ void service_app_control(app_control_h app_control, void *data)
 
 
 			
-			
-		
-		
-		
-			
-				Setting an Alarm on a Specific Date
-				hide
-			
-			
+
+Setting an Alarm on a Specific Date
 
 To schedule an alarm on a specific date, the function requires 4 parameters:
 
-
+
   [in] app_control: The destination app_control to perform the specific work when the alarm is triggered 
   [in] date: The first active alarm time 
   [in] period: The amount of time before a subsequent alarm (in seconds). If set to 0, there is only 1 execution. 
@@ -567,20 +530,15 @@ ret = alarm_get_current_time(&date);
 date.tm_sec+=4;
 ret = alarm_schedule_at_date(app, &date, 0, &alarm_id);	
 
-			
-		
-		
-			
-				Setting a Recurring Alarm at a Specific Time of the Day
-				hide
-			
-			
+
+Setting a Recurring Alarm at a Specific Time of the Day
+
 
 To schedule an alarm on a specific time of the day with a recurrence, use the alarm_schedule_with_recurrence_week_flag() function, which requires 4 parameters:
-
+
  [in] app_control: The destination app_control that performs the specific work when the alarm is triggered.
  [in] date: The date on which the alarm is triggered for the first time.
- [in] week_flag: The day of the week on which the alarm recurs. The value is defined with the enum alarm_week_flag_e enumerator, and can be a combination of days, for example ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY. The value can also be a binary, such as 1<<3 | 1<<6.
+ [in] week_flag: The day of the week on which the alarm recurs. The value is defined with the enum alarm_week_flag_e enumerator (in mobile and wearable applications), and can be a combination of days, for example ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY. The value can also be a binary, such as 1<<3 | 1<<6.
  [out] alarm_id: The unique ID that identifies the alarm.
 
 
@@ -594,21 +552,16 @@ time_t time_current = mktime(&date);
 dlog_print(DLOG_INFO, TAG, "Schedule on date: %s ", ctime(&time_current));
 ret = alarm_schedule_with_recurrence_week_flag(app_control, &date, ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY, &alarm_id);
 
-			
-		
-		
-			
-				Listing All Scheduled Alarms and Canceling an Alarm
-				hide
-			
-			
+
+Listing All Scheduled Alarms and Canceling an Alarm
+
 
 To list all scheduled alarms, use the following function:
  int alarm_foreach_registered_alarm(alarm_registered_alarm_cb callback, void* user_data)
 
 To list a scheduled alarm, the function requires 2 parameters:
-
+
  [in] callback: The callback function to invoke.
  [in] user_data: The user data to be passed to the callback.
 
@@ -618,7 +571,7 @@ int alarm_foreach_registered_alarm(alarm_registered_alarm_cb callback, void* use
 int alarm_cancel(int alarm_id)
 
 To cancel a scheduled alarm, the function requires 1 parameter:
-
+
  [in] alarm_id: The alarm ID that is cancelled.
 
 
@@ -682,24 +635,13 @@ if (ret != ALARM_ERROR_NONE)
 }

- - - - - -

-Hide -

To manage preferences:

-
To use the functions and data types of the Preference API, include the <app.h> header file in your application:
+
To use the functions and data types of the Preference API (in mobile and wearable applications), include the <app.h> header file in your application:
```
 #include <app.h>
 
```
Store and retrieve simple type variables.
To store a variable, you must create a key-value pair. Use the following functions to create a key-value pair for a specific simple type:
-
- preference_set_int (const char *key, int value)

- - -

diff --git a/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm index 71ac468..b3fa72f 100644 --- a/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm @@ -16,22 +16,23 @@ -

+ @@ -39,7 +40,7 @@

This tutorial demonstrates how you can create, manage, and remove a badge for an application. A badge is an image displayed on the application icon, which informs the user about notifications and events.

@@ -60,23 +61,11 @@ -

Show All
Hide All

-
-
Initializing the Badge Functionality
-Hide -
-
To initialize badges:
1. To use the functions and data types of the Badge API, include the <badge.h> header file in your application:
  +
2. To use the functions and data types of the Badge API (in mobile and wearable applications), include the <badge.h> header file in your application:
```
 #include <stdio.h>
 #include <stdlib.h>
@@ -94,14 +83,9 @@ static int ret = 0;
 #define TEST_PKG "org.tizen.badgeapp"
```
  To determine if a Badge API function has been correctly executed, check its return value. If the value is different from BADGE_ERROR_NONE, an error has occurred.
-
-
-
-
Creating a Badge
-Hide -
-
+ +
Creating a Badge
+
To create a badge for an application, call the badge_new() function:
```
badge_new(const char *writable_app_id)
```
@@ -112,16 +96,8 @@ if (ret != BADGE_ERROR_NONE) { // Error handling } -
-
-
-
Managing the Badge
-Hide -
-
- +
Managing the Badge

To manage the badge:
@@ -131,7 +107,7 @@ if (ret != BADGE_ERROR_NONE)
To get the count attribute, call the badge_get_count() function:
```
badge_get_count(const char *app_id, unsigned int *count)
```
The function takes the following parameters:
-
-
-
-
Removing the Badge
-Hide -
-
+ +
Removing the Badge
+
To remove the badge from the application, call the badge_remove() function:
```
badge_remove(const char *app_id)
```
The function takes the following parameters:
-
-

diff --git a/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm index 315ae22..b5e2b99 100644 --- a/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm @@ -16,27 +16,28 @@ -

+ @@ -44,44 +45,33 @@

This tutorial demonstrates how you can access and use bundles, which are key-value dictionaries.

Become familiar with the Bundle API basics by learning about:

Initializing a Bundle +
Initializing a Bundle
Initialize bundle for use.
Content management
- Adding Content to a Bundle +
- Adding Content to a Bundle
  Add content to a valid bundle.
- Managing and Using the Bundle Content +
- Managing and Using the Bundle Content
  Add, delete, and get values of the bundle content.
- Iterating a Bundle +
- Iterating a Bundle
  Iterate a bundle.
Encoding and Decoding a Bundle +
Encoding and Decoding a Bundle
Encode and decode a bundle.
Cleaning up a Bundle +
Cleaning up a Bundle
Release the bundle after use.

Show All
Hide All

-
-
Initializing a Bundle
-Hide -
-
-
To use the functions and data types of the Bundle API, include the <bundle.h> header file in your application:
+
Initializing a Bundle
+ +
To use the functions and data types of the Bundle API (in mobile and wearable applications), include the <bundle.h> header file in your application:
```
 #include <bundle.h>
 
```
@@ -89,14 +79,9 @@
```
bundle* bund = NULL;
 
 bund = bundle_create();
```
-
-
-
-
Adding Content to a Bundle
-Hide -
-
+ +
Adding Content to a Bundle
+
Fill a valid bundle instance with content. The content is in the form of key-value pairs. The key is always a string. The value can be of the following types:
@@ -124,7 +109,7 @@ bund = bundle_create();

Each value type is associated with a function that can operate on it:
-
-
-
-
Managing and Using the Bundle Content
-Hide -
-
+ +
Managing and Using the Bundle Content
+
You can perform the following operations on a bundle:
-
-
-
-
Iterating a Bundle
-Hide -
-
+ +
Iterating a Bundle
+
The bundle_foreach() function requires a callback function to operate. The callback function must first determine the key-value pairs and then perform the specified operations.

After the bundle_foreach() function, the _bundle_iterator_t() function is invoked for each record in the bundle:
@@ -249,14 +224,9 @@ void test_bundle_foreach(void) bundle_foreach(b, iterate_bundle_foreach, NULL); bundle_free(b); } -
-
-
-
Encoding and Decoding a Bundle
-Hide -
-
+ +
Encoding and Decoding a Bundle
+
To store or send a bundle over a serial connection, encode the bundle to bundle_raw (a typedef of unsigned char). To encode the bundle, call the bundle_encode() function.

To store the bundle, write bundle_raw to a file, for example, and then open it with the bundle_decode() function. The encoded data and created bundle must be released when no longer needed.
@@ -284,21 +254,11 @@ void test_bundle_encode_decode(void) bundle_free(b2); } -
-
-
-
Cleaning up a Bundle
-Hide -
-
+ +
Cleaning up a Bundle
+
When no longer needed, release the bundle by calling the bundle_free() function.
```
bundle_free(bund);
```
-
-

diff --git a/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm index 5c83c79..0cf89b7 100644 --- a/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm @@ -16,21 +16,22 @@ -

+ @@ -38,7 +39,7 @@

This tutorial demonstrates how you can get, set, add, and remove map data, and insert, select, update, and delete SQL data.

@@ -46,30 +47,18 @@

Become familiar with the Data Control API basics by learning about:

Initializing Data Controls +
Initializing Data Controls
Initialize data controls for use.
Working with Map-type Data Controls +
Working with Map-type Data Controls
Work with Map-type data controls.
Working with SQL-type Data Controls +
Working with SQL-type Data Controls
Work with SQL-type data controls.

Show All
Hide All

-Hide -

To use the functions and data types of the Data Control API, include the <data_control.h> header file in your application:

To use the functions and data types of the Data Control API (in mobile and wearable applications), include the <data_control.h> header file in your application:

 #include <data_control.h>
 
@@ -81,14 +70,9 @@
 To execute this application, the <sqlite3.h>, <stdlib.h>, <glib.h>, and <string.h> header files have to be included too.
 
   This data control use cases run 2 applications. Each application plays a different role: one for the consumer, the other for the provider. For the consumer application, the http://tizen.org/privilege/datasharing and http://tizen.org/privilege/appmanager.launch privileges must be added. For the provider application, in the IDE, go to tizen-manifest.xml > Advanced > Data Control > Add (Read, Write SQL and Read, Write Map) access rights.
-

-
-
Working with Map-type Data Controls
-Hide -
-
+ +
Working with Map-type Data Controls
+
To get, add, remove, and set map-type data using the Data Control API:
-
-
-
-
Working with SQL-type Data Controls
-Hide -
-
+ +
Working with SQL-type Data Controls
+
To insert, select, update, and delete SQL-type data using the Data Control API:
-
-

diff --git a/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm index 1a42695..6431574 100644 --- a/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm @@ -16,22 +16,23 @@ -

+ @@ -39,7 +40,6 @@

This tutorial demonstrates how you can register, unregister, and check the message port, and send messages through the message port.

@@ -47,39 +47,26 @@

Become familiar with the Message Port API basics by learning about:

Initializing Message Port Communication +
Initializing Message Port Communication
Initialize the message port communication for use.
Using Uni-directional Message Port Communication +
Using Uni-directional Message Port Communication
Send and receive messages using uni-directional message port communication between Tizen native applications.
Using Bi-directional Message Port Communication +
Using Bi-directional Message Port Communication
Send and receive messages using bi-directional message port communication between Tizen native applications.
Using Trusted Message Port Communication +
Using Trusted Message Port Communication
Send and receive messages using trusted message port communication between Tizen native applications.

Show All
Hide All

-
-
Initializing Message Port Communication
-Hide -
-
+
Initializing Message Port Communication

To initialize message port communication:
1. -
  To use the functions and data types of the Message Port API, include the <message_port.h> header file in your application:
  +
  To use the functions and data types of the Message Port API (in mobile and wearable applications), include the <message_port.h> header file in your application:
```
 #include <message_port.h>
 
```
-
-
-
-
Using Uni-directional Message Port Communication
-Hide -
-
+
Using Uni-directional Message Port Communication
+
To send a message from Application 1 to Application 2 using the Message Port API:

Figure: Uni-directional message port communication
-
+
-
-
-
-
Using Bi-directional Message Port Communication
-Hide -
-
+ +
Using Bi-directional Message Port Communication
+
To send a message from Application 1 to Application 2, and from Application 2 to Application 1:

Figure: Bi-directional message port communication
-
+
1. @@ -298,7 +274,7 @@ else
  To get a response from the receiver, local port information has to be sent to the receiver when the message was delivered. To do this, call the message_port_send_message_with_local_port() function.
  
  The function requires 4 parameters:
  -
-
-
-
-
Using Trusted Message Port Communication
-Hide -
-
+ +
Using Trusted Message Port Communication
+
To use the trusted message port communication:

Figure: Trusted uni-directional message port communication
-
+

Create the author certificate, register the created certificate to the IDE, and give permissions by the application certificate in the manifest editor.
@@ -356,17 +327,12 @@ if (test_check_remote_port())
The usage is similar to the normal Message Port API implementation. However, you must use trusted functions instead of normal functions.
-
-

diff --git a/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm index 5ed1ad5..b1cf813 100644 --- a/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm @@ -16,34 +16,34 @@ -

+ @@ -51,7 +51,6 @@

This tutorial demonstrates how you can display notifications in your application.

@@ -88,53 +87,37 @@ -

Show All
Hide All

-
-
Initializing Notifications
-Hide -
-
+
Initializing Notifications
+
To initialize notifications:
-
1. To use the functions and data types of the Notification API, include the <notification.h> header file in your application: +
  1. To use the functions and data types of the Notification API (in mobile and wearable applications), include the <notification.h> header file in your application:
```
 #include <notification.h>
```
  2. To follow this tutorial, place an image file i.e. in yours application shared resource directory. The following variables are used in the tutorial code: +
  3. To follow this tutorial, place an image file in, for example, your application's shared resource directory. The following variables are used in the tutorial code:
```
static notification_h notification = NULL;
 char *image_path[BUFLEN];
 char * shared_path = app_get_shared_resource_path();
-snprintf(image_path, BUFLEN, "%stutorial_native_api_application.png", shared_path);
+snprintf(image_path, BUFLEN, "%stutorial_native_api_application.png", shared_path);
 free(shared_path);
```
  -
-
-
-
Creating a Notification
-Hide -
-
+ +
Creating a Notification
+
To create a notification:

Initialize a notification handle by calling the notification_create() function:
```
notification_h notification_create(notification_type_e type)
```
The function takes the following parameters:
-
-
-
-
Setting Notification Attributes
-Hide -
-
+ +
Setting Notification Attributes
+
You can set the following attributes for a notification:
-
-
-
-
Posting a Notification
-Hide -
-
+ +
Posting a Notification
+
To post a notification to the database, use the notification_post() function:
```
notification_post (notification_h noti)
```
The function takes the following parameters:
-
-
-
-
Updating Notification Content
-Hide -
-
+ +
Updating Notification Content
+
To update the content of a notification, use the notification_update() function:
```
notification_update (notification_h noti)
```
The function takes the following parameters:
-
-
-
-
Deleting a Notification
-Hide -
-
+ +
Deleting a Notification
+
To delete a notification:
1. To delete a notification from the database, use the notification_delete() function:
```
notification_delete(notification_h noti)
```
  The function takes the following parameters:
  -
-
-

-Hide -

To display the progress bar:

Notification with progress bar, is created with NOTIFICATION_TYPE_ONGOING parameter. Then progress may be updated like in following example:

Use the NOTIFICATION_TYPE_ONGOING parameter to create a notification with a progress bar. The following example illustrates how the progress data is updated.

To set the initial progress:

 notification_h notification = NULL;
 
-// Create notification
+// Create a notification
 notification = notification_create(NOTIFICATION_TYPE_ONGOING);
-PRINT_MSG("notification_create %s", (notification != NULL) ? "succeed" : "failed");
+PRINT_MSG("notification_create %s", (notification != NULL) ? "succeed" : "failed");
 
-// Set parameters
-int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text", NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
-PRINT_MSG("notification_set_text %s", (ret == 0) ? "succeed" : "failed");
+// Set the parameters
+int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text", NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+PRINT_MSG("notification_set_text %s", (ret == 0) ? "succeed" : "failed");
 
 ret = notification_set_progress(notification, 0);
-PRINT_MSG("notification_set_progress %s", (ret == 0) ? "succeed" : "failed");
+PRINT_MSG("notification_set_progress %s", (ret == 0) ? "succeed" : "failed");
 
-ret = notification_set_tag(notification, "noti_tag");
-PRINT_MSG("notification_set_tag %s", (ret == 0) ? "succeed" : "failed");
+ret = notification_set_tag(notification, "noti_tag");
+PRINT_MSG("notification_set_tag %s", (ret == 0) ? "succeed" : "failed");
 
-// Send notification
+// Send the notification
 ret = notification_post(notification);
-PRINT_MSG("notification_post %s", (ret == 0) ? "succeed" : "failed");
+PRINT_MSG("notification_post %s", (ret == 0) ? "succeed" : "failed");
 
-// Change status of notification
+// Change the status of the notification
 ecore_timer_add(1, timeout_func, NULL);

 static Eina_Bool timeout_func(void *data)
 {
-  static int i = 0;
-  double progress = 0;
-  i++;
-  notification_h notification = notification_load_by_tag("noti_tag");
-  notification_set_progress(notification, ((double) i / 10.0));
-  notification_get_progress(notification, &progress);
-  notification_update(notification);
-
-  dlog_print(DLOG_INFO, "NOTIFICATION", "Progress: %f\n", progress);
-
-  if (10 == i)
-  { 
-    dlog_print(DLOG_INFO, "NOTIFICATION", "End of awaiting!n"); 
-    notification_delete(notification); 
-    return ECORE_CALLBACK_DONE; 
-  } 
-
-  return ECORE_CALLBACK_PASS_ON;
+   static int i = 0;
+   double progress = 0;
+   i++;
+   notification_h notification = notification_load_by_tag("noti_tag");
+   notification_set_progress(notification, ((double) i / 10.0));
+   notification_get_progress(notification, &progress);
+   notification_update(notification);
+
+   dlog_print(DLOG_INFO, "NOTIFICATION", "Progress: %f\n", progress);
+
+   if (10 == i)
+   { 
+      dlog_print(DLOG_INFO, "NOTIFICATION", "End of awaiting!n"); 
+      notification_delete(notification);
+
+      return ECORE_CALLBACK_DONE; 
+   } 
+
+   return ECORE_CALLBACK_PASS_ON;
 }
+

Figure: Progress bar

Progress bar

diff --git a/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm index 292aeaf..2e58bdc 100644 --- a/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm @@ -16,21 +16,22 @@ -

+ @@ -38,41 +39,28 @@

This tutorial demonstrates how you can retrieve package information and manage packages.

Become familiar with the Package Manager API basics by learning about:

Retrieving All Package Information of Installed Packages +
Retrieving All Package Information of Installed Packages
Retrieve all package information of installed packages.
Getting Specific Package Information +
Getting Specific Package Information
Get specific package information.
Listening to Package Events +
Listening to Package Events
Listen package events, such as installing, uninstalling, and updating.

Show All
Hide All

- -

-
-
Retrieving All Package Information of Installed Packages
-Hide -
-
To retrieve all package information of installed packages:
1. To use the functions and data types of the Package Manager API:
  -
  1. Include the <package_manager.h> header file in your application: +
  2. To use the functions and data types of the Package Manager API (in mobile and wearable applications):
    +
    1. Include the <package_manager.h> header file in your application:
      #include <package_manager.h>
    -
-
-
-
Getting Specific Package Information
-Hide -
-
+ +
Getting Specific Package Information
+
To get specific package information:
1. To use the functions and data types of the Package Manager API:
  -
  1. Include the <package_manager.h> header file in your application: +
  2. To use the functions and data types of the Package Manager API (in mobile and wearable applications):
    +
    1. Include the <package_manager.h> header file in your application:
      #include <package_manager.h>
    -
-
-
-
Listening to Package Events
-Hide -
-
+ +
Listening to Package Events
+
To detect package events, such as installation, uninstallation, and updates:
1. To use the functions and data types of the Package Manager API:
  -
  1. Include the <package_manager.h> header file in your application: +
  2. To use the functions and data types of the Package Manager API (in mobile and wearable applications):
    +
    1. Include the <package_manager.h> header file in your application:
      #include <package_manager.h>
    -
-

diff --git a/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm index af8f773..b676429 100644 --- a/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/app_framework/service_app_tutorial_n.htm @@ -16,19 +16,20 @@ -

+ @@ -36,7 +37,6 @@

This tutorial demonstrates how you can manage service applications.

@@ -44,27 +44,15 @@

Become familiar with the Service Application API basics by learning about:

Listening to Events
Register and set callbacks for application state change events and system events.
Listening to Events
Register and set callbacks for application state change events and system events.

Show All
Hide All

- -

-
-
Listening to Events
-Hide -
-
+
Listening to Events
+
To listen to events:
1. To use the functions and data types of the Service Application API, include the <service_app.h> header file in your application:
  +
2. To use the functions and data types of the Service Application API (in mobile and wearable applications), include the <service_app.h> header file in your application:
```
 #include <service_app.h>
 
```
-
-

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 2acb8a4..7f180c6 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 @@ -16,50 +16,49 @@ -

+ -

This tutorial demonstrates how you can add shortcuts on the Home screen, and track when shortcuts are added to the Home screen.

This tutorial demonstrates how you can add shortcuts on the home screen, and track when shortcuts are added to the home screen.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Shortcut API basics by learning about:

Adding a Shortcut -
Add a shortcut to the Home screen.
Adding a Shortcut +
Add a shortcut to the home screen.

Show All
Hide All

-
-
Adding a Shortcut
-Hide -
-
-
To add a shortcut to the Home screen from your application:
+
To add a shortcut to the home screen from your application:
1. Add a shortcut, using the shortcut_add_to_home() function:
  +
2. 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);
```
  -
  To add a shortcut, you have to know the package name and set an icon for the application. The icon parameter may be set to NULL, for adding a default icon for the application.
3. Track possible errors by a callback function:
  +
4. To track possible errors, define a callback function:
```
static int result_cb(int ret, void *data)
 {
    if (ret < 0)
@@ -87,11 +86,6 @@
    }
 }
 
```
-
-

diff --git a/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm new file mode 100644 index 0000000..5a8e765 --- /dev/null +++ b/org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm @@ -0,0 +1,420 @@ + + + + + + + + + + + + + + Watch Application: Creating a Watch Application + + + + + + +

+ +

+ + +

This tutorial demonstrates how you can create a watch application, set the time, and use the ambient mode.

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

Become familiar with the Watch Application API basics by learning about:

Initializing the Watch Application +
Initialize a watch application for use.
Managing Life-cycle Callbacks +
Set the necessary callbacks for application life-cycle management.
Managing System-related Callbacks +
Manage the callbacks that monitor system status changes.
Drawing the Watch UI +
Manage the time handle and retrieve the window object for the watch UI.
Getting the Current Time +
Get the current time or time zone.
Using the Ambient Mode +
Use the ambient mode to show limited information on the screen.

+ + +

+ +

To initialize the watch application:

To use the functions and data types of the Watch Application API, include the <watch_app.h> header file in your application: +
```
+#include <watch_app.h>
+
```
+
To use the watch_app_ambient_tick_cb() callback in the ambient mode, declare the http://tizen.org/privilege/alarm.set privilege in the manifest file. +

+ +

+ +

To manage the life-cycle callbacks:

The create callback is called before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures. +

+bool app_create(int width, int height, void* user_data)
+{
+   // Hook to take necessary actions before the main event loop starts
+   // This usually means initializing the UI and application data
+
+   return true;
+}
+

The app_control callback is called when another application sends a launch request to the application. +

+void app_control(app_control_h app_control, void* user_data) 
+{
+   // Handle the launch request, show the user the task requested through the "app_control" parameter
+}
+

The pause callback is called when the application is completely obscured by another application and becomes invisible. +

+void app_pause(void* user_data) 
+{
+   // Take necessary actions when application becomes invisible 
+   // Release the resources needed to draw the normal watch 
+}
+

The resume callback is called when the application becomes visible. +

void app_resume(void* user_data)
+{
+   // Take the necessary actions when application becomes visible
+   // Acquire the resources needed to draw the normal watch 
+}
+

The terminate callback is called when the application main loop exits. +

void app_terminate(void* user_data)
+{
+   // Release all resources
+}
+

The time_tick callback is called at least once per second. The watch applications can get the current time from the watch_time time handle to draw a normal watch. +

+void app_time_tick(watch_time_h watch_time, void* user_data)
+{
+   // Called at least once per second
+   // Draw a normal watch with the hour, minute, and second
+}
+

Set the event callbacks in the watch_app_lifecycle_callback_s structure, and pass the structure to the watch_app_main() function that starts the watch application event loop: +

+int main(int argc, char* argv[])
+{
+   appdata ad = {0,};
+   watch_app_lifecycle_callback_s callback = {0,};
+
+   callback.create = app_create;
+   callback.app_control = app_control;
+   callback.terminate = app_terminate;
+   callback.pause = app_pause;
+   callback.resume = app_resume;
+   callback.time_tick = app_time_tick;
+   // Ambient mode callbacks
+
+   int ret = watch_app_main(argc, argv, &callback, &ad);
+   if (ret != APP_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() is failed. err = %d", ret);
+   }
+
+   return ret;
+}
+

+ +

+ +

To manage the callbacks related to system status changes:

+ +

Define the following callback functions:
+
- lang_changed: Triggered when the system language changes and the messages are translated.
- region_changed: Triggered when the time zone changes.
- low_memory: Triggered when the system is running low on memory. Use the callback to save the current work and release resources; if this is not enough, the platform frees resources automatically and can even kill some applications.
- low_battery: Triggered when the system is running low on battery (less than 5%). Use the callback to save the current work and avoid battery-draining workloads.
- device_orientation: Triggered when the screen orientation changes between vertical and horizontal. The orientation information is given to the callback.
+ +
```
+void lang_changed(app_event_info_h event_info, void* user_data)
+{
+   // Take the necessary actions when the language setting changes
+}
+ 
+void region_changed(app_event_info_h event_info, void* user_data)
+{
+   // Take the necessary actions when the region setting changes
+}
+ 
+void low_battery(app_event_info_h event_info, void* user_data)
+{
+   // Take the necessary actions when the system is running low on battery
+   watch_app_exit();
+}
+ 
+void low_memory(app_event_info_h event_info, void* user_data)
+{
+   // Take the necessary actions when the system is running low on memory
+   watch_app_exit();
+}
+
```

+bool app_create(void *user_date)
+{
+   // Register callbacks for each system event
+   if (watch_app_add_event_handler(&handler, APP_EVENT_LANGUAGE_CHANGED, lang_changed, NULL) != APP_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+   }
+
+   if (watch_app_add_event_handler(&handler, APP_EVENT_REGION_FORMAT_CHANGED, region_changed, NULL) != APP_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+   }
+
+   if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_BATTERY, low_battery, NULL) != APP_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+   }
+
+   if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_MEMORY,low_ memory, NULL) != APP_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+   }
+
+   if (watch_app_add_event_handler(&handler, APP_EVENT_DEVICE_ORIENTATION_CHANGED, device_orientation, NULL) != APP_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+   }
+
+   return true;
+}
+

+ +

To draw the watch UI, you need the current time handle and the window object of the idle screen:

+ +

Get the window object with the watch_app_get_elm_win() function: +

+#include <watch_app_efl.h>
+
+typedef struct 
+{
+   Evas *evas;
+   Evas_Object *win;
+   Evas_Object *conform;
+   Evas_Object *label;
+} 
+appdata;
+
+static void __create_base_gui(appdata *ad, int width, int height)
+{
+   int ret;
+   watch_time_h watch_time = NULL;
+   ret = watch_app_get_elm_win(&ad->win);
+
+   if (ret != APP_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret);
+      return;
+   }
+   evas_object_resize(ad->win, width, height);
+   ad->conform = elm_conformant_add(ad->win);      
+   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);
+   ad->label = elm_label_add(ad->conform);
+   evas_object_resize(ad->label, width, height / 3);
+   evas_object_move(ad->label, 0, height / 3);
+   evas_object_show(ad->label); 
+

Get the time handle for the current time with the watch_time_get_current_time() function: + +

+   ret = watch_time_get_current_time(&watch_time);
+   if (ret != APP_ERROR_NONE)
+      dlog_print(DLOG_ERROR, LOG_TAG, "failed to get current time. err = %d", ret);
+   __update_watch(ad, watch_time);
+}
+
+
+bool app_create(void *user_date)
+{
+   // Define system callbacks
+
+   appdata *ad = data;
+   __create_base_gui(ad, width, height);
+
+   return true;
+} 
+

When you no longer need the watch_time_h time handle, release it with the watch_time_delete() function. +

+ +

+ +

You can get the current local time in various formats using the Watch Application methods and the time handle. When retrieving the current local time, the time handle parameter cannot be NULL.

+ +

For example, you can use the int watch_time_get_minute() method to retrieve the current minute value.

+static void __update_watch(appdata *ad, watch_time_h watch_time)
+{
+   watch_text[TEXT_BUF_SIZE];
+   int hour24, minute, second;
+
+   if (watch_time == NULL)
+   return;
+
+   watch_time_get_hour24(watch_time, &hour24);
+   watch_time_get_minute(watch_time, &minute);
+   watch_time_get_second(watch_time, &second);
+   snprintf(watch_text, TEXT_BUF_SIZE, 
+            "<align=center>Hello Watch<br/>%02d:%02d:%02d</align>",
+            hour24, minute, second);
+   elm_object_text_set(ad->label, watch_text);
+} 
+
+static void __create_base_gui(appdata *ad, int width, int height)
+{
+   // Get the window object and time handle
+
+   __update_watch(ad, watch_time);
+} 
+

+ +

You can also get the UTC time and time zone, if needed, using the watch_time_get_utc_time(), watch_time_get_utc_timestamp(), and watch_time_get_time_zone() functions.

+ +

+ +

To use the ambient mode:

Define the ambient mode callbacks. +
- The watch_app_ambient_changed_cb() callback is triggered when the ambient mode is enabled or disabled in the device. You can use the callback to initialize your ambient mode UI.
- The watch_app_ambient_tick_cb() callback is triggered every minute while the device is in the ambient mode. You can use the callback to update the time on your watch application in the ambient mode. In this callback, do not perform time-consuming task and always update the UI as fast as possible. The platform can put the device to sleep shortly after the ambient tick expires.
+
```
+void app_ambient_tick(watch_time_h watch_time, void* user_data)
+{
+   appdata *ad = user_data;
+   __update_watch(ad, watch_time);
+}
+
+void app_ambient_changed(bool ambient_mode, void* user_data)
+{
+   if (ambient_mode) 
+   {
+      // Prepare to enter the ambient mode
+   }
+   else 
+   {
+      // Prepare to exit the ambient mode
+   }
+}
+
+
```
+

+int main(int argc, char* argv[])
+{
+   appdata ad = {0,};
+   watch_app_lifecycle_callback_s callback = {0,};
+
+   // Other life-cycle callbacks
+
+   callback.ambient_tick = app_ambient_tick;
+   callback.ambient_changed = app_ambient_changed;
+
+   int ret = watch_app_main(argc, argv, &callback, &ad);
+   if (ret != APP_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() is failed. err = %d", ret);
+   }
+   return ret;
+} 
+

+ + + + +

+ +

+ + + + + + + diff --git a/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm new file mode 100644 index 0000000..dac6f6f --- /dev/null +++ b/org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm @@ -0,0 +1,407 @@ + + + + + + + + + + + + + + Widget: Creating Widget Applications + + + + + + +

+ +

+ + +

This tutorial demonstrates how you can create a widget application.

+ + +

Become familiar with the Watch Application API basics by learning about:

Initializing the Widget Application +
Initialize a widget application for use.
Creating the Widget Application +
Create a widget application, and define and register the system callbacks.
Managing Widget Object Life-cycle Callbacks +
Define and register the life-cycle callbacks.
Drawing the Widget UI +
Create a UI object of the widget on the home screen.
Managing the Widget Instance +
Get the widget instance and the instance ID.

+ + +

+ +

To initialize the widget application:

To use the functions and data types of the Widget API (in mobile and wearable applications), include the <widget_app.h> header file in your application: +
```
+#include <widget_app.h>
+
```
Edit the widget application settings in the manifest file.

+ +

+ +

To create the widget application:

Start and initialize the application with the main() function.

Set up the widget_app_lifecycle_callback_s structure variable for the widget instance life-cycle callbacks, define the life-cycle functions for the widget application itself (widget_app_create() for initialization and widget_app_terminate() for termination), and call the widget_app_main() to start the application event loop.

+int
+main(int argc, char *argv[])
+{
+   widget_app_lifecycle_callback_s ops = {0,};
+   int ret;
+
+   ops.create = widget_app_create;
+   ops.terminate = widget_app_terminate;
+
+   ret = widget_app_main(argc, argv, &ops, NULL);
+   if (ret != WIDGET_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "widget_app_main() failed. err = %d", ret);
+   }
+
+   return ret;
+} 
+

Use the widget_app_create() function to initialize any resources that can be shared among widget instances. This function is called before the main event loop starts. +

+widget_class_h widget_app_create (void *user_data)
+{
+   // Hook to take necessary actions before main event loop starts
+   widget_instance_lifecycle_callback_s obj_callback = {0,};
+   app_event_handler_h handlers[5] = {NULL, };
+
+   // Register the callback functions for the widget object life-cycle
+

At the end of the widget_app_create() function, remember to create a widget instance class and return a handle for it, so that the handle can be used for making widget instances.

+   // Register the callback functions for system events
+   widget_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, 
+                                widget_app_low_battery, NULL);
+   widget_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, 
+                                widget_app_low_memory, NULL);
+   widget_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, 
+                                widget_app_lang_changed, NULL);
+   widget_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], 
+                                APP_EVENT_REGION_FORMAT_CHANGED, widget_app_region_changed, NULL);
+
+   return widget_app_class_create(obj_callback);
+}
+

When the system-related callback are no longer needed, remove them with the widget_app_remove_event_handler() function.

Define the callback functions for the system events: +

+void widget_app_lang_changed(app_event_info_h event_info, void* user_data)
+{
+   // Take actions when language setting changes and messages must be translated
+   char *locale = NULL;
+   app_event_get_language(event_info, &locale);
+   elm_language_set(locale);
+   free(locale);
+}
+ 
+void widget_app_region_changed(app_event_info_h event_info, void* user_data)
+{
+   // Take actions when the time zone changes
+}
+ 
+void widget_app_low_battery(app_event_info_h event_info, void* user_data)
+{
+   // Take actions when system is running low on battery (less than 5%)
+   // Save the work and avoid battery-intensive processes
+   widget_app_exit();
+}
+ 
+void widget_app_low_memory(app_event_info_h event_info, void* user_data)
+{
+   // Take actions when system is running on low memory
+   // Save the work and release resources; if necessary, some apps can be killed
+   widget_app_exit();
+}
+

When you no longer need the widget application, release the resources and terminate the application: +
```
+static void
+widget_app_terminate(void *user_data)
+{
+   // Release all resources
+} 
+
```
+

+ +

To manage the widget object life-cycle:

Define the widget object life-cycle callbacks: +
- This callback is triggered when the widget instance is created. +
  Initialize resources for this widget instance and draw the UI. If bundle content is not NULL, restore the previous status.
  +
```
+int widget_instance_create(widget_context_h context, bundle *content, int w, int h)
+{
+   widget_instance_data_s *wid = (widget_instance_data_s*) malloc(sizeof(widget_instance_data_s));
+   int ret;
+
+   if (content != NULL) 
+   {
+      // Recover the previous status with the bundle object
+   }
+
+   // Create the UI
+
+   return WIDGET_ERROR_NONE;
+}
+
```
  +
- This callback is triggered when the widget instance is destroyed. +
  Release all widget resources. If the reason for the termination is not WIDGET_APP_DESTROY_TYPE_DEFAULT, store the current status with the incoming bundle.
  +
```
+int widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason, bundle *content)
+{
+   if (reason != WIDGET_APP_DESTROY_TYPE_DEFAULT) 
+   {
+      // Save the current status at the bundle object
+   }
+
+   return WIDGET_ERROR_NONE;
+} 
+
```
  + +
- This callback is triggered when the widget instance is paused. +
  Take the necessary actions since the widget instance becomes invisible. The framework can destroy a paused widget instance.
  +
```
+int widget_instance_pause(widget_context_h context)
+{
+   return WIDGET_ERROR_NONE;
+}
+
```
  +
- This callback is triggered when the widget instance is resumed. +
  Take the necessary actions since the widget instance becomes visible.
  +
```
+int widget_instance_resume(widget_context_h context)
+{
+   return WIDGET_ERROR_NONE;
+}
+
```
  +
- This callback is triggered before the widget instance is resized. +
  Take the necessary actions to accommodate the new size.
  +
```
+int widget_instance_resize(widget_context_h context, int w, int h)
+{
+   return WIDGET_ERROR_NONE;
+} 
+
```
  +
- This callback is triggered when a widget update event is received. +
  Take the necessary actions for the widget update. If the force parameter is true, the widget can be updated even in the pause state.
  +
```
+int widget_instance_update(widget_context_h context, bundle *content, int force)
+{
+   return WIDGET_ERROR_NONE;
+}
+
```
  +
+

Register the callbacks in the widget_instance_lifecycle_callback_s structure during the widget application initialization: +

+widget_class_h widget_app_create (void *user_data)
+{
+   widget_instance_lifecycle_callback_s obj_callback = {0,};
+   // Register the callback functions
+   obj_callback.create = widget_instance_create;
+   obj_callback.destroy = widget_instance_destroy;
+   obj_callback.pause = widget_instance_pause;
+   obj_callback.resume = widget_instance_resume;
+   obj_callback.resize = widget_instance_resize;
+   obj_callback.update = widget_instance_update;
+
+   // Register system-related callbacks
+
+   return widget_app_class_create(obj_callback);
+}
+

+ +

+ +

To draw the widget UI, you must get a window object with the widget_app_get_elm_win() function and create the UI on the home screen:

+#include <widget_app_efl.h>
+
+typedef struct widget_instance_data 
+{
+   Evas_Object *win;
+   Evas_Object *conform;
+   Evas_Object *label;
+} 
+widget_instance_data_s;
+
+static int
+widget_instance_create(widget_context_h context, bundle *content, 
+int w, int h)
+{
+   widget_instance_data_s *wid = (widget_instance_data_s*) malloc(sizeof(widget_instance_data_s));
+
+   int ret;
+   if (content != NULL) 
+   {
+      // Recover the previous status with the bundle object
+   }
+
+   // Window 
+   ret = widget_app_get_elm_win(context, &wid->win);
+   if (ret != WIDGET_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret);
+
+      return WIDGET_ERROR_FAULT;
+   }
+
+   evas_object_resize(wid->win, w, h);
+
+   // Conformant
+   wid->conform = elm_conformant_add(wid->win);
+   evas_object_size_hint_weight_set(wid->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_win_resize_object_add(wid->win, wid->conform);
+   evas_object_show(wid->conform);
+
+   // Label
+   wid->label = elm_label_add(wid->conform);
+   evas_object_resize(wid->label, w, h / 3);
+   evas_object_move(wid->label, 0, h / 3);
+   evas_object_show(wid->label);
+   elm_object_text_set(wid->label, "Hello widget");
+
+   // Show the window after the base GUI is set up
+   evas_object_show(wid->win);
+
+   widget_app_context_set_tag(context, wid);
+
+   return WIDGET_ERROR_NONE;
+} 
+

+ +

+ +

To manage the widget instance:

You can set a customized widget instance with the widget_app_context_set_tag() function when the instance is created. To update or destroy the customized widget, get the instance with the widget_app_context_get_tag() function. +

+typedef struct 
+{
+   int val1;
+} user_defined_s;
+
+
+int widget_instance_create(widget_context_h context, bundle *content, int w, int h)
+{
+   user_defined_s *uds = (user_defined_s*)malloc(sizeof(user_defined_s));
+   uds->val1 = 0;
+   widget_app_context_set_tag(context, uds);
+}
+
+int widget_instance_destroy(widget_context_h context, widget_destroy_type_e reason, bundle *content)
+{
+   user_defined_s *uds = NULL;
+   widget_app_context_get_tag(context, (void**)&uds);
+   free(uds);
+}
+
+int widget_instance_update(widget_context_h context, bundle *content, int force)
+{
+   user_defined_s *uds = NULL;
+   widget_app_context_get_tag(context, (void**)&uds);
+   uds->val1 = 1;
+}
+

Get the widget instance ID: +

+int widget_instance_update(widget_context_h context, bundle *content, int force)
+{
+   const char *inst_id = NULL;
+   inst_id = widget_app_get_id(context);
+}
+

+ + + + + + +

+ +

+ + + + + + + diff --git a/org.tizen.tutorials/html/native/base/base_tutorials_n.htm b/org.tizen.tutorials/html/native/base/base_tutorials_n.htm index 0617c96..e09d314 100644 --- a/org.tizen.tutorials/html/native/base/base_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/base/base_tutorials_n.htm @@ -16,15 +16,16 @@ -

Related Info

@@ -33,7 +34,7 @@

The base tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The base tutorials demonstrate how to use the following features in creating Tizen native applications:

Sqlite: Managing the SQL Database
Demonstrates how you can access SQLite and OpenSSL, and encrypt and store application data.
i18n: Managing Characters, Numbers, and Locales
Demonstrates how you can manage numbers, date, time and locale information.

Content

Managing Characters and Strings
Managing Dates and Calendar
Managing Locales
Managing Numbers
Managing Characters and Strings
Managing Dates and Calendar
Managing Locales
Managing Numbers

Related Info

@@ -39,7 +40,7 @@

This tutorial demonstrates how you can manage numbers, date, time and locale information.

@@ -57,21 +58,8 @@

Show All
Hide All

- -

- Hide -

@@ -80,8 +68,8 @@ @@ -101,7 +89,7 @@ i18n_ustring_copy_ua(s2, "Bada"); int32_t result = i18n_ustring_compare(s1, s2); -

For a more complex, locale-sensitive comparison, use the Ucollator API:

For a more complex, locale-sensitive comparison, use the Ucollator API (in mobile and wearable applications):

Create a Ucollator using the i18n_ucollator_create() function.
Specify the locale as the first argument and a handle to the created Ucollator as the second argument.
```
@@ -109,7 +97,7 @@ i18n_ucollator_h coll;
 i18n_ucollator_create(I18N_ULOCALE_US, &coll);
 
```

Set the Ucollator strength.

The strength influences how strings are compared. There are a few available strength levels:

Primary differences, such as different base letters ("a" vs "b")
Secondary differences, such as different accented forms of the same base letter ("a" vs "Ã¤")
Tertiary differences, such as case differences ("a" vs "A")

To convert strings to Ustrings:

To convert a byte string to a Unicode string (Ustring), use the i18n_ustring_copy_ua() function.

 const char *src = "Tizen";
 i18n_uchar dest[64];
@@ -159,7 +147,7 @@ i18n_ustring_from_UTF8(dest, 64, &dest_len, src, -1, &error_code);
 Converting Ustrings to Strings
 To convert Ustrings to strings:
 
-
+
 To convert a Ustring to a byte string, use the i18n_ustring_copy_au() function.
  i18n_uchar src[64];
@@ -198,7 +186,7 @@ i18n_uchar_get_ublock_code(character, &ublock);
 To normalize a Ustring:
 
 Get a Unormalizer instance.
-To get a Unormalizer instance, use the i18n_unormalization_get_instance() function of the Unormalization API. The first argument is NULL to use the built-in normalizer, then specify the name of the normalizer (nfc or nfkc), normalization mode (compose or decompose), and a handle to get a normalizer.
+To get a Unormalizer instance, use the i18n_unormalization_get_instance() function of the Unormalization API (in mobile and wearable applications). The first argument is NULL to use the built-in normalizer, then specify the name of the normalizer (nfc or nfkc), normalization mode (compose or decompose), and a handle to get a normalizer.
  i18n_unormalizer_h normalizer;
 i18n_unormalization_get_instance(NULL, "nfc", I18N_UNORMALIZATION_DECOMPOSE, &normalizer);
@@ -218,7 +206,7 @@ i18n_unormalization_normalize(normalizer, &src, 1, dest, 4, &dest_str_le
 To search a substring in a Ustring:
 
 Create a search iterator.
-To create a search iterator, use the i18n_usearch_create() function of the Usearch API. To create the iterator, specify the searched pattern, the length of the searched pattern (-1 if the string is zero-terminated), the Ustring where the pattern is searched, the length of this Ustring, a locale associated with the text language, an optional break iterator structure, and a handle to created search iterator.
+To create a search iterator, use the i18n_usearch_create() function of the Usearch API (in mobile and wearable applications). To create the iterator, specify the searched pattern, the length of the searched pattern (-1 if the string is zero-terminated), the Ustring where the pattern is searched, the length of this Ustring, a locale associated with the text language, an optional break iterator structure, and a handle to created search iterator.
  i18n_uchar text[64];
 i18n_ustring_copy_ua(text, "TIZEN");
@@ -250,22 +238,16 @@ i18n_uchar dest[64];
 i18n_ustring_to_upper(dest, 64, src, -1, I18N_ULOCALE_US, &error_code);
 
 	
-			
-		
-		
-			
-				Managing Dates and Calendar
-				Hide
-			
-			
+Managing Dates and Calendar
+
 
 To create and use the Ucalendar:
 
-To use the date and calendar-related features of the Ucalendar, Udate, and Udatepg API, include the <utils_i18n.h> header file in your application:
+
To use the date and calendar-related features of the Ucalendar (in mobile and wearable applications), Udate (in mobile and wearable applications), and Udatepg (in mobile and wearable applications) APIs, include the <utils_i18n.h> header file in your application:
  #include <utils_i18n.h>
 
-
+
 	The Ucalendar API is used for converting between an i18n_udate object and a set of integer fields, such as I18N_UCALENDAR_YEAR, I18N_UCALENDAR_MONTH, I18N_UCALENDAR_DAY, and I18N_UCALENDAR_HOUR.
 	The Udate API consists of functions that convert dates and times from their internal representations to a textual form and back again in a language-independent manner.
 	The Udatepg API provides flexible generation of date format patterns, such as "yy-MM-dd".
@@ -350,24 +332,18 @@ i18n_udatepg_destroy(udatepg);
 i18n_udate_destroy(date_format);

- - - -

- Hide -

+ +

To manage the features of a specific geographical, political, or cultural region:

To use the locale-related features of the Ulocale API, include the <utils_i18n.h> header file in your application:
+
To use the locale-related features of the Ulocale API (in mobile and wearable applications), include the <utils_i18n.h> header file in your application:
```
 #include <utils_i18n.h>
 
```
To manage locale information: -

- -

- Hide -

To format and parse numbers for a locale:

+ +

+ +

To format and parse numbers for a locale:

To use the number-related features of the Unumber API, include the <utils_i18n.h> header file in your application:
+
To use the number-related features of the Unumber API (in mobile and wearable applications), include the <utils_i18n.h> header file in your application:
```
 #include <utils_i18n.h>
 
```

When you finish using the number format, destroy it with the i18n_unumber_destroy() function.

i18n_unumber_destroy(num_format);

- - - 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 120b1bc..89d64b0 100644 --- a/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm @@ -16,71 +16,60 @@ -

+ -

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 native API layout.

Become familiar with the basics of the Sqlite API by learning about:

Initializing the Database +
Initializing the Database
Initialize the database for use.
Storing Encrypted Data +
Storing Encrypted Data
Store AES encrypted data in the SQL database.

Show All
Hide All

- -

-
-
Initializing the Database
-Hide -
-
+
Initializing the Database
+
Initialize external open source libraries:
1. To operate on an SQL database provided by SQLite:
  -
  1. To operate with OpenSSL AES, salt and initial vectors are needed. Those are auxiliary variables, which are used to generate a cryptographic key:
    -
    - Include the required headers:
      -
      +
      
      #include <stdio.h>
      
      #include <string.h>
      
      #include <time.h>
      @@ -121,7 +110,6 @@ unsigned char iv[17]; // Encryption initial vector
      - sqlite3_shutdown(); sqlite3_config(SQLITE_CONFIG_URI, 1); @@ -200,8 +188,8 @@ static int CreateTable()
      void PrepareToSQL(unsigned char* msg) { - int i=0; - while(msg[i]!=0x00) + int i = 0; + while (msg[i]!=0x00) { if (msg[i]=='\'')msg[i]='a'; if (msg[i]=='\"')msg[i]='b'; @@ -209,16 +197,11 @@ void PrepareToSQL(unsigned char* msg) } }
      -
-
-
-
Storing Encrypted Data
-Hide -
-
+ +
Storing Encrypted Data
+
This scenario shows how to:
-
-

diff --git a/org.tizen.tutorials/html/native/content/content_tutorials_n.htm b/org.tizen.tutorials/html/native/content/content_tutorials_n.htm index 876cfb6..79556b5 100644 --- a/org.tizen.tutorials/html/native/content/content_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/content/content_tutorials_n.htm @@ -16,17 +16,17 @@ -

+ @@ -34,13 +34,16 @@

The content tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The content tutorials demonstrate how to use the following features in creating Tizen native applications:

Download: Downloading Content from the Internet
Demonstrates how you can download content asynchronously from a given URL into the device storage.
Media Content: Using Album, Bookmark, Playlist, and Other Media Content
Demonstrates how you can manage media content.
MIME Type: Mapping MIME Types to and from File Extensions
Demonstrates how you can map MIME types to file extensions.

The following tutorials apply in mobile applications only:

Download: Downloading Content from the Internet
Demonstrates how you can download content asynchronously from a given URL into the device storage.

diff --git a/org.tizen.tutorials/html/native/content/download_tutorial_n.htm b/org.tizen.tutorials/html/native/content/download_tutorial_n.htm index c87c597..d4a31ea 100644 --- a/org.tizen.tutorials/html/native/content/download_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/content/download_tutorial_n.htm @@ -16,53 +16,50 @@ -

All source and destination buffers must be different.
To use the localization-related features of the i18n API, include the <utils_i18n.h> header file in your application: +
- All source and destination buffers must be different.
- To use the localization-related features of the i18n API (in mobile and wearable applications), include the <utils_i18n.h> header file in your application:
```
 #include <utils_i18n.h>
 
```

+ + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Download API basics by learning about:

Downloading Content from a URL +
Downloading Content from a URL
Receive a download ID, configure a download URL and destination, and launch a download process.

Show All
Hide All

- -

-
-
Downloading Content from a URL
-Hide -
-
- +
Downloading Content from a URL

To download content:
1. To use the functions and data types of the Download API, include the <download.h> header file in your application:
  @@ -108,7 +105,7 @@ error = download_set_file_name(download_id, "downloaded_file.bin");
2. Set the download options: -
  - Auto download +
    - Auto download
      To set an automatic download, call the download_set_auto_download() function passing the download handle and setting the second parameter to true.
      
      This operation changes the download manager state so that it continues downloading even after the client process is terminated. Set the notification download option when using this feature, to allow the user to receive the download result when the client process is not alive.
      @@ -133,7 +130,7 @@ error_code = download_get_network_type (download_id, &value);
    - Notifications
      To set notifications with a service action, use the download_set_notification_type() function. The download_notification_type_e enumeration defines the available download network types. The default value is DOWNLOAD_NOTIFICATION_TYPE_NONE, if the client does not set any values.
      
      If the client wants to change the title or description of the notification item, use the download_set_notification_title() or download_set_notification_description() function. If the client wants to change the action when the notification item is clicked, use the download_set_notification_service_handle() function. If the service action is not set, the default operation is the following:
      -
      +
      
      When clicking a completed notification message, the proper application for playing the downloaded content is launched. If there is no proper application, an error message is shown at the status tray.
      
      When clicking a failed notification message, the client application requesting the download is launched.
      
      @@ -170,7 +167,7 @@ error = download_cancel(download_id);
      Monitor the download progress.
      Use the progress callback to monitor the download progress. The following example prints the number of bytes received and the total size of the file being downloaded. Since you do not know the file size at the beginning, use 0.
      -
      Create the download: +
      Create the download:
      unsigned long long content_size = 0; @@ -214,11 +211,6 @@ download_unset_progress_cb(download_id); download_unset_state_changed_cb(download_id); error = download_destroy(download_id);
      -
-

diff --git a/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm b/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm index 1fee090..3639947 100644 --- a/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/content/media_content_tutorial_n.htm @@ -16,98 +16,99 @@ -

This tutorial demonstrates how you can manage media content.

@@ -116,143 +117,132 @@

Media content
- Initializing Media Content +
- Initializing Media Content
  Initialize the database for use.
- Getting the Folder List +
- Getting the Folder List
  Get a folder list.
- Getting the Item List +
- Getting the Item List
  Get an item list.
- Destroying the Handle +
- Destroying the Handle
  Destroy a handle.
- Receiving Update Notifications +
- Receiving Update Notifications
  Set an update notification callback.
Album
- Initializing the Album Module +
- Initializing the Album Module
  Initialize media albums for use.
- Finding All Albums +
- Finding All Albums
  Find information about albums available in the system.
- Finding Albums Using a Filter +
- Finding Albums Using a Filter
  Find albums that satisfy a specific condition.
- Retrieving Album Content Information +
- Retrieving Album Content Information
  Retrieve information about the media items in an album.
Bookmark
- Initializing Bookmarks +
- Initializing Bookmarks
  Initialize bookmarks for use.
- Inserting a Bookmark +
- Inserting a Bookmark
  Set a bookmark for a video file.
- Finding Bookmarks +
- Finding Bookmarks
  Find bookmarks using a filter.
- Reading Bookmark Information +
- Reading Bookmark Information
  Read the details of a given bookmark.
- Removing a Bookmark +
- Removing a Bookmark
  Remove a bookmark from a video file.
Filter
- Initializing a Filter +
- Initializing a Filter
  Initialize filter for use.
- Setting up a Filter +
- Setting up a Filter
  Create a filter and set its properties.
- Using Filters to Find Media Items +
- Using Filters to Find Media Items
  Use a filter to find media items.
Folder
- Initializing Media Folders +
- Initializing Media Folders
  Initialize media folders for use.
- Finding All Media Folders +
- Finding All Media Folders
  List all available media folders.
- Finding Folders Using a Filter +
- Finding Folders Using a Filter
  Find folders satisfying a given condition, and sort the results.
- Finding Folder Content +
- Finding Folder Content
  List folder content and get information about media items in the folders.
Media information
- Initializing Media Information +
- Initializing Media Information
  Initialize media information for use.
- Using Media Information +
- Using Media Information
  Use media information.
- Inserting Media in the Database +
- Inserting Media in the Database
  Add media information in the media database.
- Inserting Media in a Folder +
- Inserting Media in a Folder
  Add media information in a folder.
Playlist
- Initializing a Playlist +
- Initializing a Playlist
  Initialize playlists for use.
- Managing Playlists +
- Managing Playlists
  Add playlists to the database, search them, and retrieve information about them.
Tag
- Initializing Media Tags +
- Initializing Media Tags
  Initialize media tags for use.
- Getting the Tag List +
- Getting the Tag List
  Get information about media tags.
Storage -
- Initializing Storage -
  Initialize storage information for use.
- Getting the Storage List -
  Get information about the storage.
-
Storage +
- Initializing the Storage +
  Initialize storage information for use.
- Getting the Storage List +
  Get information about the storage.
+

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

Advanced media content
- Finding Media Item Groups +
- Finding Media Item Groups
  Find all available media items grouped by their MIME type.
- Finding Media Item Groups Using a Filter +
- Finding Media Item Groups Using a Filter
  Find grouped media items filtered by name.

Show All
Hide All

-
-
Initializing Media Content
-Hide -
-
+ +
Initializing Media Content
+
To use the media database:
1. Functions in this module use an SQLite database to save the metadata of the media files on your device, along with the tags and bookmarks that the user sets. To use the functions and data types of the Media Content API, include the <media_content.h> header file in your application:
  +
2. Functions in this module use an SQLite database to save the metadata of the media files on your device, along with the tags and bookmarks that the user sets. To use the functions and data types of the Media Content API (in mobile and wearable applications), include the <media_content.h> header file in your application:
```
 #include <media_content.h>
 #include <glib.h>
@@ -278,14 +268,9 @@ media_content_disconnect ();
 
```
-
-
-
-
Getting the Folder List
-Hide -
-
+ +
Getting the Folder List
+
To retrieve a list of folders where the media files are stored, register a callback function for each API to manage an individual item in the callback function:
-
-
-
-
Getting the Item List
-Hide -
-
+ +
Getting the Item List
+
To retrieve the item list, use a foreach function with a previously defined callback:
-
-
-
-
Destroying the Handle
-Hide -
-
+ +
Destroying the Handle
+
To destroy the handle received from each function (to release resources):
```
@@ -452,14 +427,9 @@ if (all_item_list)
 // Destroy handle of the filter
 media_filter_destroy(filter);
 
```
-
-
-
-
Receiving Update Notifications
-Hide -
-
+ +
Receiving Update Notifications
+
To get notifications of database changes, register a callback. You can only set 1 notification callback at this stage of the process:
-
-
-
-
Initializing the Album Module
-Hide -
-
-
To use the functions and data types of the Media Album API, include the <media_content.h> header file in your application:
+
Initializing the Album Module
+ +
To use the functions and data types of the Media Album API (in mobile and wearable applications), include the <media_content.h> header file in your application:
```
 #include <media_content.h>
 
```
@@ -550,14 +513,9 @@ media_content_unset_db_updated_cb();
When the module is no longer needed, close the connection:
```
media_content_disconnect();
```
-
-
-
-
Finding All Albums
-Hide -
-
+ +
Finding All Albums
+
To find all albums in the system and access information about the album content:
1. Find all albums.
  Call the media_album_get_album_count_from_db() and media_album_foreach_album_from_db() functions to receive information about albums. Set the first parameter to NULL to retrieve all albums and perform no filtering.
  @@ -643,14 +601,9 @@ media_content_unset_db_updated_cb();
-
-
-
-
Finding Albums Using a Filter
-Hide -
-
+ +
Finding Albums Using a Filter
+
Use a filter to find the albums that meet a certain criteria. If an album does not meet the conditions, it is not in the results.

Before searching for the albums, create the filter, and set its conditions and sort order:
@@ -670,19 +623,14 @@ media_filter_set_order(filter, MEDIA_CONTENT_ORDER_DESC, MEDIA_DISPLAY_NAME, MED media_album_foreach_album_from_db(filter, media_album_list_cb, NULL); media_filter_destroy(filter); -
-
-
-
Retrieving Album Content Information
-Hide -
-
+ +
Retrieving Album Content Information
+
To access information about the media items in a given album:
1. Request album content. -
  1. Before you can read the album content information, acquire the album ID. If you have the album handle (media_album_h), you can call the media_album_get_album_id() function:
    +
    1. Before you can read the album content information, acquire the album ID. If you have the album handle (media_album_h), you can call the media_album_get_album_id() function:
      
      int id = -1; @@ -758,18 +706,12 @@ media_album_get_album_id(album, &id);
    -
-
-
-
Initializing Bookmarks
-Hide -
-
+ +
Initializing Bookmarks

To initialize the bookmark feature:
1. -
  To use the functions and data types of the Media Bookmark API, include the <media_content.h> header file in your application:
  +
  To use the functions and data types of the Media Bookmark API (in mobile and wearable applications), include the <media_content.h> header file in your application:
```
 #include <media_content.h>
 
```
-
-
-
-
Inserting a Bookmark
-Hide -
-
+ +
Inserting a Bookmark
+
To set a bookmark for a video file at a given timestamp, use the media_bookmark_insert_to_db() function:
```
char* thumbnail_path = "path/to/image/file";
@@ -797,14 +734,9 @@ media_bookmark_insert_to_db(media_id, 220, thumbnail_path);
 media_bookmark_insert_to_db(media_id, 210, thumbnail_path);
```
The parameters are the media ID of the video file, the moment (time in seconds from the beginning) in the video to bookmark, and the image used as a thumbnail for the bookmark. You can use the same thumbnail for more than 1 bookmark.
-
-
-
-
Finding Bookmarks
-Hide -
-
+ +
Finding Bookmarks
+
To find a media item's bookmarks and filter the results:

Finding All Bookmarks
@@ -864,21 +796,16 @@ media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);media_filter_destroy(filter);

- -

-Hide -

+ +

To read the bookmark information within a callback after finding the bookmark:

bool get_bookmarks_cb(media_bookmark_h bookmark, void* user_data)
 {
    char *thumb = NULL;
 
-   if(bookmark != NULL) 
+   if (bookmark != NULL) 
    {
        media_bookmark_get_thumbnail_path(bookmark, &thumb);
        dlog_print(DLOG_DEBUG, LOG_TAG, "Thumbnail path: %s\n", thumb);
@@ -894,14 +821,9 @@ media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);

The above callback prints the thumbnail path and marked time for each found bookmark.

Free the thumbnail path after use.

-Hide -

+ +

To remove a bookmark:

Acquire the bookmark ID:
@@ -915,15 +837,10 @@ media_bookmark_get_bookmark_id(bookmark, &bookmark_id);

Delete the bookmark:

media_bookmark_delete_from_db(bookmark_id);

-Hide -

To use the functions and data types of the Media Filter API, include the <media_content.h> header file in your application:

+ +

+ +

To use the functions and data types of the Media Filter API (in mobile and wearable applications), include the <media_content.h> header file in your application:

 #include <media_content.h>

@@ -934,14 +851,9 @@ media_bookmark_get_bookmark_id(bookmark, &bookmark_id);

When the service is no longer needed, close the connection:

media_content_disconnect();

- -

-Hide -

+ +

To create a filter and set its properties: offset, condition, and sorting order.

The function parameters are:

Filter handle

Filter handle
Condition string used for filtering the search results -
Queries made with the Content API are passed to a SQL database. A part of each query is a WHERE clause that determines which properties correspond to certain conditions. The condition string defines the WHERE clause and must match the following pattern:
+
Queries made with the Content API (in mobile and wearable applications) are passed to a SQL database. A part of each query is a WHERE clause that determines which properties correspond to certain conditions. The condition string defines the WHERE clause and must match the following pattern:
```
<property> <relation> <value>
 
 // If the relation is =, >, >=, <, or <=, the following is also valid
@@ -986,7 +898,7 @@ ret = media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);Condition properties are defined by a series of #define directives. Each Content submodule contains definitions for properties used in the submodule.
```
Collation type determining how the strings are compared -
The media_content_collation_e enumerator defines the available collation types.

The media_content_collation_e enumerator (in mobile and wearable applications) defines the available collation types.

To read the condition of an existing filter, use the media_filter_get_condition() function:

media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, MEDIA_ARTIST, MEDIA_CONTENT_COLLATE_DEFAULT);

The second and fourth parameters determine the order and collation types, and the available types are defined in the media_content_order_e and media_content_collation_e enumerators.

The second and fourth parameters determine the order and collation types, and the available types are defined in the enumerators media_content_order_e (in mobile and wearable applications) and media_content_collation_e (in mobile and wearable applications).

To read the order settings of a filter, use the media_filter_get_order() function:

-Hide -

+ +

To use a filter to find media items:

The filter construction depends on what kind of a query it is used for. The condition string contains different properties (columns), depending on the submodule.

The following example finds media items with the following conditions:

The artist is 'Tizen'

The artist is 'Tizen'
The search for the artist is case-insensitive
The results are ordered by the artist, ascending, and case-sensitive
At most 5 results are provided, starting from the first result

-Hide -

To use the functions and data types of the Media Folder API, include the <media_content.h> header file in your application:

+ +

+ +

To use the functions and data types of the Media Folder API (in mobile and wearable applications), include the <media_content.h> header file in your application:

 #include <media_content.h>

@@ -1084,14 +986,9 @@ media_filter_destroy(filter);

media_content_disconnect();

-Hide -

+ +

To list all available media folders and their content:

Once you have the folder handle (media_folder_h), you can read the folder information:

Use the media_folder_get_folder_id(), media_folder_get_name(), and media_folder_get_path() functions to read the folder ID, name, and path:
+
- Use the media_folder_get_folder_id(), media_folder_get_name(), and media_folder_get_path() functions to read the folder ID, name, and path:
```
   char *folder_id = NULL;
    char *name = NULL;
@@ -1213,14 +1110,9 @@ media_filter_destroy(filter);
```

-Hide -

+ +

Use filters to choose which folders are found by the media_folder_foreach_folder_from_db() function. For example, find folders which meet certain conditions, such as a name containing a given substring. Other modifications of the results, such as sorting, are also possible.

Set the condition with the media_filter_set_condition() function.

The condition is the string used as the argument to the WHERE clause in the SQL query. The general format is "<property> <relation> <value>", such as "FOLDER_NAME = 'Downloads'".

Condition for the 'Downloads' folder name: +

Condition for the 'Downloads' folder name:

#define BUFLEN 200
 char buf[BUFLEN] = { '\0' };
@@ -1267,14 +1159,9 @@ media_folder_foreach_folder_from_db(filter, folder_cb, NULL);
 media_filter_destroy(filter);

- -

-Hide -

+ +

To insert media in the database:

To use newly created media files, first insert them into the database. You need the http://tizen.org/privilege/content.write privilege to use the needed APIs.
@@ -1530,7 +1401,7 @@ filter = NULL;

To add information in the database:

You can use the media_info_insert_to_db() function:

int ret = MEDIA_CONTENT_ERROR_NONE;
 char *path = "/opt/usr/media/Images/Default.jpg";
 media_info_h media_item = NULL;
@@ -1573,16 +1444,8 @@ ret = media_content_scan_file(file_path);
 
 
 After using the media_info_insert_to_db() function, destroy the received media_info_h with using the media_info_destroy() function.

-Hide -

- +

To insert media in a folder:

@@ -1612,17 +1475,11 @@ if (ret != MEDIA_CONTENT_ERROR_NONE) }

- - -

-Hide -

+ +

To use the playlists:

To use the functions and data types of the Media Playlist API, include the <media_content.h> header file in your application:
+
1. To use the functions and data types of the Media Playlist API (in mobile and wearable applications), include the <media_content.h> header file in your application:
```
 #include <media_content.h>
 
```
  @@ -1637,19 +1494,14 @@ media_content_connect(); media_content_disconnect();
-

-Hide -

+ +

To create and insert a playlist to the database, perform a search on existing records and handle the found items:

Insert a record to the database. -

To operate on the database, it has to contain records. Add a new playlist to the database using the media_playlist_insert_to_db() function. It returns a handle to the newly created record.

media_playlist_h playlist = NULL;
 filter_h audio_filter = NULL;
 GList *media_id_list = NULL; // This requires glib.h inclusion
@@ -1727,7 +1579,7 @@ media_playlist_foreach_playlist_from_db(NULL, playlist_list_cb,  NULL);
 
 Handle the found records.
 
-When a record is found, a callback function is invoked. A handle to the record is passed as a playlist function parameter. 
+When a record is found, a callback function is invoked. A handle to the record is passed as a playlist function parameter. 
 static bool playlist_list_cb(media_playlist_h playlist, void* user_data) 
 {
    char *name = NULL;
@@ -1768,7 +1620,7 @@ media_playlist_foreach_playlist_from_db(NULL, playlist_list_cb,  NULL);
 }
 
 The callback function operates on the records the same way as before. To get the media info, use the following functions:
-media_info_get_audio()
+media_info_get_audio()
 media_info_get_media_id()
 media_info_get_size()
 
@@ -1792,15 +1644,10 @@ media_playlist_destroy(playlist);
 
 media_filter_destroy(audio_filter);
 media_content_disconnect();

-Hide -

To use the functions and data types of the Media Tag API, include the <media_content.h> header file in your application:

+ +

+ +

To use the functions and data types of the Media Tag API (in mobile and wearable applications), include the <media_content.h> header file in your application:

 #include <media_content.h>

@@ -1813,14 +1660,9 @@ media_content_disconnect();

media_content_disconnect();

- -

- -Hide -

+ + +

To get the tag list:

@@ -1925,37 +1767,28 @@ else } -

-Hide -

To use the functions and data types of the Storage API, include the <media_content.h> header file in your application:

+ +

To initialize the storage for use:

+ +

To use the functions and data types of the Media Storage API (in mobile and wearable applications), include the <media_content.h> header file in your application:
```
 #include <media_content.h>
-
```
+

Before retrieving tag information, open a connection to the Content Service by calling the media_content_connect() function:

Before retrieving storage information, open a connection to the Content Service by calling the media_content_connect() function:
+
```
media_content_connect();
```
-
Close the connection when the service is no longer needed:
+
When the service is no longer needed, close the connection:
```
media_content_disconnect();
```
+

+ + +

- -

-Hide -

To get the storage list:

After getting the storage information which is already set, you can use the information for advanced search. -

Get the storage information :

Get the storage information:

 char *id = NULL;
 char *name = NULL;
@@ -1979,7 +1812,7 @@ char *path = NULL;
 GList *storage_list = NULL; // Include glib.h
 media_storage_h storage = NULL;
 
-ret = media_storage_foreach_storage_from_db(NULL, storage_cb, &storage_list);
+ret = media_storage_foreach_storage_from_db(NULL, storage_cb, &storage_list);
 if (ret != MEDIA_CONTENT_ERROR_NONE) 
 {
    dlog_print(DLOG_ERROR, LOG_TAG, "media_storage_foreach_storage_from_db failed: %d", ret);
@@ -1990,7 +1823,7 @@ else
 {
    int i;
 
-   for (i = 0; i < g_list_length(storage_list); i++)
+   for (i = 0; i < g_list_length(storage_list); i++)
    {
       storage = (media_storage_h)g_list_nth_data(storage_list, i);
       media_storage_get_id(new_storage, &id);
@@ -2004,24 +1837,17 @@ else
       free(storage);
    }
 }
-

- -

-Hide -

+ +

To find groups of media items and items in a given group:

Search for groups.
A group is a collection of media items which have the same value of a given property. For example, if the property is the artist, there are as many groups as there are artists, and each group consists of items by the same artist. The possible groups are determined by the media_group_e values, such as MEDIA_CONTENT_GROUP_ARTIST and MEDIA_CONTENT_GROUP_MIME_TYPE.
-
1. +
  1. Find the number of MIME type-related groups:
```
@@ -2045,7 +1871,7 @@ media_group_foreach_group_from_db(NULL, group, group_cb, (void *) group);
 
```
2. Receive group data. -
  1. +
    1. Define the callback for receiving the group data. If the callback returns true, the iteration over the found groups continues. If the return value is false, the iteration is stopped.
      
      Each time the callback is called for a group, the group name is passed as the name argument. In this case, names are set to various found MIME types, such as image/png and audio/mpeg.
      @@ -2093,14 +1919,7 @@ bool media_cb(media_info_h media, void *user_data)
  -

-Hide -

To find groups containing only items matching the given criteria:

@@ -2134,13 +1953,6 @@ dlog_print(DLOG_DEBUG, LOG_TAG, "Group count: %d\n", count); media_group_foreach_group_from_db(filter, group, group_cb, (void *) group);

- -

- - - -

diff --git a/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm b/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm index 9bf5161..80693ae 100644 --- a/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm @@ -16,57 +16,47 @@ -

This tutorial demonstrates how you can map MIME types to file extensions and vice versa.

Become familiar with the MIME Type API basics by learning about:

Getting the MIME Type for a File Extension +
Getting the MIME Type for a File Extension
Get a MIME type when an extension is known.
Getting Extensions for a MIME Type +
Getting Extensions for a MIME Type
Get extensions mapped to certain MIME types.

Show All
Hide All

- -

-
-
Getting the MIME Type for a File Extension
-Hide -
-
+ +
Getting the MIME Type for a File Extension
+
To get the MIME types of all files in a directory when the extensions are known:
1. To use the functions and data types of the MIME Type API, include the <mime_type.h> header file in your application:
  +
2. To use the functions and data types of the MIME Type API (in mobile and wearable applications), include the <mime_type.h> header file in your application:
```
 #include <mime_type.h>
 
```
  @@ -117,18 +107,13 @@ if (dir) closedir(dir); }
-
-
-
-
Getting Extensions for a MIME Type
-Hide -
-
+ +
Getting Extensions for a MIME Type
+
To get a list of extensions associated, for example, with an image or jpeg MIME type:
1. To use the functions and data types of the MIME Type API, include the <mime_type.h> header file in your application:
  +
2. To use the functions and data types of the MIME Type API (in mobile and wearable applications), include the <mime_type.h> header file in your application:
```
 #include <mime_type.h>
 
```
  @@ -148,11 +133,6 @@ for (i=0; i < length; i++) free(extension[i]); free(extension);
-
-

diff --git a/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm b/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm index 01c0891..d3ff254 100644 --- a/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/context/activity_tutorial_n.htm @@ -14,19 +14,20 @@ -

+ @@ -34,7 +35,7 @@

This tutorial demonstrates how you can manage and monitor various system information and attached devices.

@@ -46,23 +47,10 @@ -

Show All
Hide All

- -

-
-
Detecting Activities
- Hide -
-
+
Detecting Activities

To set and unset callback functions for the activity monitor and retrieve details from the received activity data:
-
1. To use the activity recognition-related features of the Activity Recognition API, include the <activity_recognition.h> header file in your application:
  +
  1. To use the activity recognition-related features of the Activity Recognition API (in mobile and wearable applications), include the <activity_recognition.h> header file in your application:
```
 #include <activity_recognition.h>
 
```
  2. To subscribe to notifications about specific activity state changes, invoke the activity_start_recognition() function to register a callback function.
    When specific activity data is received, the example_activity_callback callback is invoked.
    -
    The following example starts the activity monitor to receive notifications when the ACTIVITY_WALK activity is detected. Any of the activity_type_e enumerators can be used in place of the ACTIVITY_WALK value.
    +
    The following example starts the activity monitor to receive notifications when the ACTIVITY_WALK activity is detected. Any of the activity_type_e enumerators (in mobile and wearable applications) can be used in place of the ACTIVITY_WALK value.
```
 activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NULL);
 
```
    @@ -93,15 +81,12 @@ activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NUL if (result != ACTIVITY_ERROR_NONE) { - /* Error handling */ + // Error handling } }
  3. When activity monitoring is no longer used, unset the callback function and destroy the handle:
```
activity_stop_recognition(handle);
 activity_release(handle);
```
  -
-

diff --git a/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm b/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm index cc07def..28a8d6b 100644 --- a/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm @@ -83,7 +83,7 @@ gesture_create(&handle); if (event == GESTURE_EVENT_DETECTED) { - /* Handle the event */ + // Handle the event } } } diff --git a/org.tizen.tutorials/html/native/context/trigger_tutorial_n.htm b/org.tizen.tutorials/html/native/context/trigger_tutorial_n.htm index 67ab21d..9881285 100644 --- a/org.tizen.tutorials/html/native/context/trigger_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/context/trigger_tutorial_n.htm @@ -268,7 +268,7 @@ context_trigger_remove_rule(rule_id);

To retrieve all rules:

Retrieve all the enabled rules registered by the application and disable them. The following example shows how to query the application%#39;s own rule IDs, disable the enabled rules, and remove all the rules.

Retrieve all the enabled rules registered by the application and disable them. The following example shows how to query the application's own rule IDs, disable the enabled rules, and remove all the rules.

Only the owner application can enable, disable, remove, and retrieve the rules.

 int* enabled_rule_ids;
diff --git a/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm
index a828d53..b47cf1d 100644
--- a/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm
@@ -11,316 +11,453 @@
 	
 	
 
-	Cairo Integration: Linking Cairo and Evas  
+	Cairo: Linking Cairo and Evas  
 
 
 
 
-
+
 	
-		

+		 

 	
 	
 		Content
 		
-			Creating a Rectangle with a Black Border
-			Displaying a Temperature Graph
+			Drawing a Polygon Using a Cairo Image
+			Displaying Animated Geometrical Figures Using Cairo Evas_GL
+
 				
 		Related Info
 		
-            Cairo Integration Guide
-			Cairo API
+            Cairo Guide
+			Cairo API for Mobile Native
+			Cairo API for Wearable Native
 		
 	
 	
 
 
-Cairo Integration: Linking Cairo and Evas
-	
+Cairo: Linking Cairo and Evas
+
 
-This tutorial demonstrates how you can implement applications linking Cairo to Evas.
+This tutorial demonstrates how you can use 2 different backends of Cairo and link to Evas.
  
 Warm-up
 Become familiar with the Cairo API basics by learning about:
 
-Creating a Rectangle with a Black Border
-Create a PNG file containing a rectangle with a black border.
+Drawing a Polygon Using a Cairo Image
+Draw a polygon and rectangle using the Cairo image backend with the Evas_Object image.
 
-Displaying a Temperature Graph
-Link Cairo to Evas and display a temperature graph on the screen.
+Displaying Animated Geometrical Figures Using Cairo Evas_GL
+Draw various figures using the Cairo evas-gl backend with the Evas_GL surface.
 
 
 
-
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-	
-	
-			
-				Creating a Rectangle with a Black Border
-				hide
-			
-			
-To be built with gcc -o cairo-ex1 cairo-ex1.c pkg-config cairo --cflags --libs. Launching the example creates a .png file containing a rectangle with a black border.
-
-   Figure: An Example of Cairo 
-  
-  
-The following example shows how to run a simple application with Cairo and to create a file on the disk.
-To include the Cairo headers, use the following code.
-#include <cairo.h>
-#include <app.h>
-
-
- The main function contains all the code. 
-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,};
+Drawing a Polygon Using a Cairo Image
 
-   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;
+This use case shows how to link Cairo to Evas and how to draw a polygon and rectangle on the screen using the Cairo API. First create a basic application that provides a basic UI application skeleton and already makes available the window object that can contain the Cairo drawing.
 
-   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, &ad);
-   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]);
+
+Build the environment.
 
-   ret = ui_app_main(argc, argv, &event_callback, &ad);
+Include the <cairo.h> and <math.h> headers in the sample application:
 
-   return ret;
-}
-
++#include <cairo.h>
+#include <math.h>
+
 
-To create a Cairo surface with a fixed size and to define the pixels format to ARGB32, use the following code. The color format is the same as the ARGB8888 of EFL.
-surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32, 240, 80);
-
+Create the Evas_Object image and link to Cairo.
 
- To create a Cairo context with surface as a parameter, use the following code. This Cairo object is used for all painting operations.
-cairo = cairo_create (surface);
-
- Cairo has many APIs for painting: APIs for example for changing the size of the pen, choosing the colors, or creating different forms such as circles, rectangles, paths and curves. The following example shows how to create a black rectangle.
-cairo_rectangle(cairo, 10, 10, 220, 60);
-cairo_stroke(cairo);
-
-To render the surface on an image on a disk, use the following code.
-cairo_surface_write_to_png (surface, "cairo-ex1.png");
-
-To free all resources, use the following code.
-cairo_destroy (cairo);
-cairo_surface_destroy (surface);
-
+Define the appdata structure that contains the pointers to the objects to be manipulated:
 
-			
-

- hide -

The graph example shows how to link Cairo to evas and how to display a temperature graph on the screen.

To include the headers, use the following code.

#include <Elementary.h>
-#include <cairo.h>
-#include <app.h>
-

To create an application data structure that contains all the pointers to objects to be manipulated, use the following code.

typedef struct appdata 
++typedef struct appdata 
 {
-   // All graphical objects here are pointers to the value of the type Evas_Object
-   Evas_Object *win;
-   Evas_Object *conformant;
-   Evas_Object *image;
-   cairo_t *cairo;
+   Evas_Object *win;	
+   Evas_Object *img;
+
    cairo_surface_t *surface;
-   unsigned char *pixels;
+   cairo_t *cairo;
 } appdata_s;
-
- The main functions add only one callback to the Appcore. The callback is called when the application is created.
-static bool
-app_create(void *data)
+

Create the Evas_Object window and image. + +

To display the Cairo drawing on the screen, create the Evas_object window and Evas_object image:

+ +

+ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+evas_object_show(ad->win);
+ad->img = evas_object_image_filled_add(evas_object_evas_get(ad->win));
+evas_object_show(ad->img);
+

Create Cairo. +
To create the Cairo surface, you need the window size to set the Cairo surface. You can get the window size using the evas_object_geometry_get() function, after the evas_object_show() function is called:
+ +
```
+evas_object_geometry_get(ad->win, NULL, NULL, &ad->width, &ad->height);
+ad->surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, ad->width, ad->height);
+ad->cairo = cairo_create(ad->surface);
+
```

Draw a polygon and rectangle with Cairo. +

To draw the vector image itself:

+ +

To draw Cairo with some specific vector positions, use the window size that you got before. You can compare the window width and height and get the smaller length to set the square side. + +

+void cairo_drawing(void *data)
 {
    appdata_s *ad = data;
-   create_gui(ad);
+   int d = 0;
+   if (ad->width < ad->height)
+      d = ad->width;
+   else
+      d = ad->height;
+

To set the background as white color, set the color as white and paint the Cairo: +

+   // Clear background as white
+   cairo_set_source_rgba(ad->cairo, 1, 1, 1, 1);
+   cairo_paint(ad->cairo);
+

Draw the polygon and rectangle: + +

+   cairo_translate(ad->cairo, 0.1 * d, 0.1 * d);
+   cairo_set_line_width(ad->cairo,2);
+   cairo_set_source_rgba(ad->cairo, 0.0, 0.0, 1.0, 1.0);
+
+   cairo_move_to(ad->cairo, 0.2 * d , 0.2 * d);
+   cairo_line_to(ad->cairo, 0.4 * d, 0.3 * d);
+   cairo_rel_line_to(ad->cairo, 0.2 * d, -0.1 * d);
+   cairo_arc(ad->cairo, 0.4 * d, 0.4 * d, 0.2* d * sqrt(2), -0.25 * M_PI, 0.25 * M_PI);
+   cairo_rel_curve_to(ad->cairo,-0.2* d, -0.1 * d, -0.2* d, 0.1 * d, -0.4 * d, 0);
+   cairo_close_path(ad->cairo);
+   cairo_fill(ad->cairo);
+
+   cairo_rectangle(ad->cairo, 0, 0, 0.8 * d, 0.8 * d);
+   cairo_stroke(ad->cairo);
+

You need to use the cairo_surface_flush() function to ensure that any pending drawing is performed for the surface: + - return true; +
```
+   cairo_surface_flush(ad->surface);
+
```

Update the Evas_object image on the screen: + +

+   // Display Cairo drawing on screen
+   unsigned char * imageData = cairo_image_surface_get_data(cairo_get_target(ad->cairo));
+   evas_object_image_data_set(ad->img, imageData);
+   evas_object_image_data_update_add(ad->img, 0, 0, ad->width, ad->height);
 }
+

The delete callback is triggered when the Window is destroyed from the main loop. + -int -main(int argc, char *argv[]) +

+static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
 {
-   appdata_s *ad = {0,};
-   int ret = 0;
+   appdata_s *ad = data;
+   cairo_surface_destroy(ad->surface);
+   cairo_destroy(ad->cairo);
+   ui_app_exit();
+}
+

- ui_app_lifecycle_callback_s event_callback = {0,}; - app_event_handler_h handlers[5] = {NULL,}; +

Figure: Polygon and rectangle

Polygon and rectangle

- 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, &ad); - 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); +

- return ret; -} - -

To create a window and a conformant container, use the create_gui function.

static void
-create_gui(appdata_s *ad)
+The following use case shows how you can draw vector graphics using the Cairo evas-gl backend. The Cairo evas-gl backend is similar to Cairo gl backend, since it can provide an implementation of possibly hardware-accelerated Cairo rendering by targeting the OpenGL® ES API.
+First create a basic application that provides a basic UI application skeleton and already makes available the window object that can contain the Cairo drawing.
+
+To display and animate vector graphics with Cairo and the Evas_GL surface:
+
+
+
+Build the environment:
+
+Include the following header files to use the Cairo evas-gl backend on the Evas_GL surface:
++#include <cairo.h>
+#include <Evas_GL.h>
+#include <cairo-evas-gl.h>
+#include <math.h>
+
+Define the appdata structure that contains the pointers to objects to be manipulated:
+
++typedef struct appdata 
 {
-   int i;
-   int max_temp;
-   int min_temp;
-   int x, y;
-   double det, a, b;
-   int row_stride;
+   Evas_Object *win;	
+   Evas_Object *img;
 
-   // Create the window
-   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
-   elm_win_conformant_set(ad->win, EINA_TRUE);
+   cairo_surface_t *surface;
+   cairo_t *cairo;
+   cairo_device_t *cairo_device;
+	
+   Evas_GL *evas_gl;
+   Evas_GL_Config *evas_gl_config;
+   Evas_GL_Surface *evas_gl_surface;
+   Evas_GL_Context *evas_gl_context;
+} appdata_s;
+
+
+Initialize Cairo and Evas_GL for Cairo evas-gl drawing.
 
+Initialize the variables related to the Evas_GL within the appdata structure, and create the Evas_GL object using the Evas_object image created before.
+
+
+By default, Cairo evas-gl backend uses an Evas_GL context and API set. Before creating the Evas_object window for Cairo evas-gl drawing, the GL Rendering Engine is set because Evas_GL runs with Evas_GL Render Engine:
+
++elm_config_accel_preference_set("opengl");
+
+
+The cairo_drawing callback function can be registered by the following Evas_object image function:
+
++evas_object_image_pixels_get_callback_set(ad->img, cairo_drawing, NULL);
+
+For using hardware-accelerated Cairo rendering, set CAIRO_GL_COMPOSITOR to MSAA compositor:
+
++setenv("CAIRO_GL_COMPOSITOR", "msaa", 1);
+
+
+To prevent unnecessary context switching in the Cairo evas-gl backend:
++cairo_gl_device_set_thread_aware(ad->cairo_device, 0);
+
+
++static void init_cairo_evasgl_drawing(appdata_s *ad)
+{
+   // Create window
+   elm_config_accel_preference_set("opengl");
+   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+   elm_win_autodel_set(ad->win, EINA_TRUE);
    if (elm_win_wm_rotation_supported_get(ad->win))
    {
-      int rots[4] = { 0, 90, 180, 270 };
+      int rots[4] = {0, 90, 180, 270};
       elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
    }
    evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
-
-   ad->conformant = elm_conformant_add(ad->win);
-   evas_object_size_hint_weight_set(ad->conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
-   elm_win_resize_object_add(ad->win, ad->conformant);
-   evas_object_resize(ad->win, 480, 300);
+   eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+   evas_object_event_callback_add(ad->win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);
    evas_object_show(ad->win);
-   evas_object_show(ad->conformant);
-
 
-The following example shows how to create an evas_object image. We set it to enable alpha. The color format matches with the one we use in Cairo and we set it to ARGB8888; in other words, Red, Green, Blue and Alpha are coded on 8bits each. Set the size of the image, and set the fill settings to the same as the image size.
-   // Create an evas_object_image which contains the Cairo content 
-   ad->image = evas_object_image_add(evas_object_evas_get(ad->win));
-   evas_object_image_alpha_set(ad->image, EINA_TRUE);
-   evas_object_image_colorspace_set(ad->image, EVAS_COLORSPACE_ARGB8888);
-   evas_object_image_size_set(ad->image, WIDTH, HEIGHT);
-   evas_object_image_fill_set(ad->image, 0, 0, WIDTH, HEIGHT);
-   evas_object_show(ad->image);
-
-To create the Cairo surface, the pixels must be allocated, as they are the link between Cairo and evas. For that we need to know the whole size of the image by setting the row stride value.
-   row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);
-   // Create the pixels 
-   ad->pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
-   // Create the cairo surface 
-   ad->surface = cairo_image_surface_create_for_data(ad->pixels, CAIRO_FORMAT_ARGB32,
-                                                               WIDTH, HEIGHT, row_stride);
-
-   // Create the cairo context 
-   ad->cairo = cairo_create (ad->surface);
-
-Set evas to use the pixels created as pixels of the image with the following code.
-   // Set the pixels created as image's pixels 
-   evas_object_image_data_set(ad->image, ad->pixels);
-
- In the following example, paint the axis of the graph with a 2px black pen. Set Cairo to move the pen at the position 10,10 and create a line between this point and the position 10, HEIGHT. This creates a vertical black line. Continue the line from the current point and to the position WIDTH, HEIGHT. This is the horizontal black line.
-   cairo_set_source_rgb(ad->cairo, 0.0, 0.0, 0.0);
-   cairo_set_line_width(ad->cairo, 2);
-   cairo_move_to(ad->cairo, 10, 10);
-   cairo_line_to(ad->cairo, 10, HEIGHT);
-   cairo_stroke(ad->cairo);
-
- The data to be graphed is an array of 12 values in Â°C (Celsius degrees). Each value represents the mean temperature value of a month. The graph is linear on the X axis, because the index in the array represents the month. For the Y axis, transform the float value into the pixel position. To create a full scale graph, the minimum values are displayed at the lower position, and the maximum values at the upper position. To show the minimum and maximum values, iterate the data.
-   max_temp = INT_MIN;
-   min_temp = INT_MAX;
-   for (i = 0; i < NB_TEMPS; i++)
-   {
-      max_temp = MAX(temperatures[i], max_temp);
-      min_temp = MIN(temperatures[i], min_temp);
-   }
-
-To resolve the two linear equations with two variables, use the following code.
-   det = - (min_temp * 1 - max_temp * 1);
-   a = (1 * 0 - 1 * HEIGHT) / det;
-   b = (HEIGHT * max_temp - 0 * min_temp) / det;
+   // Add image object; a filled one by default
+   evas_object_geometry_get(ad->win, NULL, NULL, &ad->width, &ad->height);
+   ad->img = evas_object_image_filled_add(evas_object_evas_get(ad->win));
+   evas_object_show(ad->img);
+
+   // Create evasgl and init
+   Evas_Native_Surface ns;
+   ad->evas_gl = evas_gl_new(evas_object_evas_get(ad->img));
+   ad->evas_gl_config = evas_gl_config_new();
+   ad->evas_gl_config->color_format = EVAS_GL_RGBA_8888;
+
+   // Create a surface and context
+   ad->evas_gl_surface = evas_gl_surface_create(ad->evas_gl, ad->evas_gl_config, ad->width, ad->height);
+   ad->evas_gl_context = evas_gl_context_create(ad->evas_gl, NULL);
+      
+   evas_gl_native_surface_get(ad->evas_gl, ad->evas_gl_surface, &ns);
+   evas_object_image_native_surface_set(ad->img, &ns);
+
+   // Register Cairo drawing callback
+   evas_object_image_pixels_get_callback_set(ad->img, (Evas_Object_Image_Pixels_Get_Cb)cairo_drawing, ad);
+
+   // Create cairo and cairo device with evasgl
+   // Use the MSAA compositor if available
+   setenv("CAIRO_GL_COMPOSITOR", "msaa", 1);
+   ad->cairo_device = (cairo_device_t *)cairo_evas_gl_device_create (ad->evas_gl, ad->evas_gl_context);
+   cairo_gl_device_set_thread_aware(ad->cairo_device, 0);
+   ad->surface = (cairo_surface_t *)cairo_gl_surface_create_for_evas_gl(ad->cairo_device, ad->evas_gl_surface, ad->evas_gl_config, ad->width, ad->height);
+   ad->cairo = cairo_create(ad->surface);
+
+   // Register animation callback to update the output according to refresh rate
+   ecore_animator_frametime_set(0.016);
+   ecore_animator_add(_animate_cb, (void *)ad->img);
+}
 
-To create a red grid, use the coefficient calculated previously. Five horizontal lines are painted, in every 10Â°C degrees, from -10Â°C to +40Â°C. Paint the 0Â°C with a 4px thick pen and the other lines with a 1px. For the vertical lines, the space between the lines is the width of the graph divided by 12 months.
-   // Select the red color to paint the grid 
-   cairo_set_source_rgba(ad->cairo, 1.0, 0.0, 0.0, 0.5);
-   // Paint horizontal lines in red, with a thicker line for 0Â°C 
-   for (i = -10; i <= 40; i += 5)
+
+
+Draw geometrical figures in the cairo_drawing() callback function. 
+The following code snippet shows how to draw some geometrical figures such as a triangle, rectangle, and circle with various styles and random positions by using the Cairo APIs.
++void cairo_drawing(void *data)
+{
+   appdata_s *ad = data;
+
+   int i;
+   double r, g, b, a;
+
+   int Renderloop = 50;
+
+   // Clear background as white
+   cairo_set_source_rgba(ad->cairo, 1, 1, 1, 1);
+   cairo_paint(ad->cairo);
+
+   cairo_set_operator(ad->cairo, CAIRO_OPERATOR_OVER);
+
+   for (i = 0; i < Renderloop; i++) 
    {
-      // For the 0Â°C line, set a thicker pen
-      if (i == 0)
-         cairo_set_line_width(ad->cairo, 4);
-      else
-         cairo_set_line_width(ad->cairo, 1);
-      // Calculate the y position 
-      y = (int)(a * i + b);
-      cairo_move_to(ad->cairo, 10, y);
-      cairo_line_to(ad->cairo, WIDTH, y);
+      // Random color
+      r = drand48();
+      g = drand48();
+      b = drand48();
+      a = drand48();
+      cairo_set_source_rgba(ad->cairo, r, g, b, a);
+
+      // Random position
+      float x = drand48() * ad->width;
+      float y = drand48() * ad->height;
+      float side = drand48() * 300;
+
+      // Random style
+      int shape = drand48() * 3;
+      float width = drand48() * 50 + 1;
+      int line_cap = drand48() * 3;
+
+      cairo_line_cap_t line_cap_style = CAIRO_LINE_CAP_BUTT;
+      if (line_cap == 1)
+         line_cap_style = CAIRO_LINE_CAP_ROUND;
+      else if (line_cap == 2)
+         line_cap_style = CAIRO_LINE_CAP_SQUARE;
+
+      int line_join = drand48() * 3;
+      cairo_line_join_t line_join_style = CAIRO_LINE_JOIN_MITER;
+      if (line_join == 1)
+         line_join_style = CAIRO_LINE_JOIN_ROUND;
+      else if (line_join == 2)
+         line_join_style = CAIRO_LINE_JOIN_BEVEL;
+
+      double dash[] = {0.0, 0.0};
+      dash[0] = drand48() * 50;
+      dash[1] = drand48() * 50;
+
+      cairo_set_dash(ad->cairo, dash, 2, 0);
+      cairo_set_line_width(ad->cairo, width);
+      cairo_set_line_join(ad->cairo, line_join_style);
+      cairo_set_line_cap(ad->cairo, line_cap_style);
+
+      if (shape == 0) 
+      {
+        // Draw square
+        cairo_rectangle(ad->cairo, x, y, side, side);
+        cairo_fill(ad->cairo);
+      }
+      else if (shape == 1) 
+      {
+        // Draw circle
+        cairo_arc(ad->cairo, x, y, side/2, 0.0, 2.0 * M_PI);
+        cairo_stroke(ad->cairo);
+      }
+      else 
+      {
+        // Draw triangle
+        cairo_move_to(ad->cairo, x, y);
+        cairo_line_to(ad->cairo, x + side, y);
+        cairo_line_to(ad->cairo, x, y + side);
+      cairo_close_path(ad->cairo);
       cairo_stroke(ad->cairo);
+      }
    }
-   // Paint the 11 verticals lines (the first one is already painted as the black y axis)
-   for (i = 1; i < 12; i++)
+
+   cairo_surface_flush(ad->surface);
+}
+
+  
+Resize the callback.
+In the following code snippet, when resizing occurs, Evas GL surface is recreated and reconnected to the Evas_object image.
++static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+   appdata_s *ad = data;
+
+   if (ad->evas_gl_surface)  
    {
-      x = (int)(i * (WIDTH / NB_TEMPS) + 10);
-      cairo_move_to(ad->cairo, x, HEIGHT);
-      cairo_line_to(ad->cairo, x, 10);
+      cairo_surface_destroy(ad->surface);
+      cairo_destroy(ad->cairo);
+      cairo_device_destroy(ad->cairo_device);
+      evas_gl_surface_destroy(ad->evas_gl, ad->evas_gl_surface);
+      ad->evas_gl_surface = NULL;
    }
-   cairo_stroke(ad->cairo);
-
-Paint the graph line with a green color. As for the horizontal lines, use the same coefficient to find the correspondence between the temperature in Â°C and the value in pixels on the graph. Once the conversion is done, graph the line with the cairo_line_to API.
-   // Set a green value for temperature graph 
-   cairo_set_source_rgba(ad->cairo, 0.5, 0.8, 0.3, 0.8);
-   cairo_set_line_width(ad->cairo, 10);
-   // Iterate the array to get the temperature values of each month 
-   for (i = 0; i < NB_TEMPS; i++)
+
+   evas_object_geometry_get(obj, NULL, NULL, &ad->width, &ad->height);
+   evas_object_image_size_set(ad->img, &ad->width, &ad->height);
+   evas_object_resize(ad->img, &ad->width, &ad->height);
+   evas_object_show(ad->img);
+
+
+   if (!ad->evas_gl_surface) 
    {
-      // x coordinate is easily calculated, because it is a multiple of the graph_size divided by the number of points 
-      x = (int)(i * (WIDTH / NB_TEMPS) + 10);
-      // use the themp_to_pix function to set the y coordinate corresponding to the temp value 
-      y = (int)(a * temperatures[i] + b);
+      Evas_Native_Surface ns;
+
+      ad->evas_gl_surface = evas_gl_surface_create(ad->evasgl, ad->evas_gl_config, &ad->width, &ad->height);
+      evas_gl_native_surface_get(ad->evasgl, ad->evas_gl_surface, &ns);
+      evas_object_image_native_surface_set(ad->img, &ns);
+      evas_object_image_pixels_dirty_set(ad->img, EINA_TRUE);
 
-      cairo_line_to (ad->cairo, x, y);
+      ad->cairo_device = (cairo_device_t *)cairo_evas_gl_device_create(ad->evas_gl, ad->evas_gl_context);
+      cairo_gl_device_set_thread_aware(ad->cairo_device, 0);
+      ad->surface = (cairo_surface_t *)cairo_gl_surface_create_for_evas_gl(ad->cairo_device, ad->evas_gl_surface, ad->evas_gl_config, ad->width, ad->height);
+      ad->cairo = cairo_create (ad->surface);
    }
-   cairo_stroke(ad->cairo);
+}
 
-Update the evas object image on the screen by calling
-   evas_object_image_data_update_add(ad->image, 0, 0, WIDTH, HEIGHT);
-}
+
 
-The picture below shows the application.
+To use the animator callback for a default update refresh rate, you can add an animator.
+To update the Evas_object image which is connected to Evas_GL, use the evas_object_image_pixels_dirty_set() function. This updates the Evas_object image whenever Evas renders.
 
-   Figure: cairo-graph 
-  
++static Eina_Bool _animate_cb(void *data)
+{
+   Evas_Object *obj = (Evas_Object *)data;
+   evas_object_image_pixels_dirty_set(obj, EINA_TRUE);
 
-

- - - - - -

+ return EINA_TRUE; +} + + + +

The delete callback is triggered when the Window is destroyed from the main loop. +

+static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   appdata_s *ad = data;
+   cairo_surface_destroy(ad->surface);
+   cairo_destroy(ad->cairo);
+   cairo_device_destroy(ad->cairo_device);
+   evas_gl_surface_destroy(ad->evas_gl, ad->evas_gl_surface);
+   evas_gl_context_destroy(ad->evas_gl, ad->evas_gl_context);
+   evas_gl_config_free(ad->evas_gl_config);
+   evas_gl_free(ad->evas_gl);
+   ui_app_exit();
+}
+

+ + +

Figure: Random geometrical figures

Random geometrical figures

diff --git a/org.tizen.tutorials/html/native/graphics/widget_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/graphic_comp_tutorial_n.htm similarity index 75% rename from org.tizen.tutorials/html/native/graphics/widget_tutorial_n.htm rename to org.tizen.tutorials/html/native/graphics/graphic_comp_tutorial_n.htm index 4f061d0..e94580c 100644 --- a/org.tizen.tutorials/html/native/graphics/widget_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/graphics/graphic_comp_tutorial_n.htm @@ -11,35 +11,36 @@ - Graphic Widget: Drawing Simple Images Using Evas Objects + Graphic UI Component: Drawing Simple Images Using Evas Objects -

This tutorial demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL widget library.

+ +

This tutorial demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL UI component library.

Become familiar with the Evas API basics by learning about:

@@ -53,24 +54,11 @@ -

Show All
Hide All

- -

-
-
Drawing a Rectangle or Line
- hide -
-
-
The rectangle and line demo is implemented in the rectline.c file. It uses a widget layout class, such as elm_layout and widgets, such as elm_image and evas_object_rect, and evas_object_line for the content inside view.
+
Drawing a Rectangle or Line
+ +
The rectangle and line demo is implemented in the rectline.c file. It uses a UI component layout class, such as elm_layout and UI components, such as elm_image and evas_object_rect, and evas_object_line for the content inside view.

The EFL has the following types of non-container objects:
-
-
-
-
Implementing Gradation
- hide -
-
-
The gradation demo is implemented in the gradation.c file. It uses a widget layout class, such as elm_layout and widgets, such as elm_image and evas_object_rect, and evas_object_line for the content inside view.
+
+ +
Implementing Gradation
+ +
The gradation demo is implemented in the gradation.c file. It uses a UI component layout class, such as elm_layout and UI components, such as elm_image and evas_object_rect, and evas_object_line for the content inside view.

The sample application creates rows of small rectangles that eventually fill the screen, starts a new row when the earlier row gets to the end of the screen, and changes the color of the squares as the number of the rows increases.
```
 static Evas_Object*
@@ -198,17 +180,11 @@ create_main_view(appdata_s *ad)
 The following figure illustrates the result.
 
 Figure: Gradation 
-   
-
-			
```
-
-
-
Resizing Images
- hide -
-
-
The image resizing demo is implemented in the imageresize.c file. It creates image objects with random sizes and coordinates. It uses a widget layout class, such as elm_layout and widgets, such as elm_image and evas_object_rect, and evas_object_line for the content inside view.
+
+ +
Resizing Images
+ +
The image resizing demo is implemented in the imageresize.c file. It creates image objects with random sizes and coordinates. It uses a UI component layout class, such as elm_layout and UI components, such as elm_image and evas_object_rect, and evas_object_line for the content inside view.
```
 static Evas_Object*
 create_main_view(appdata_s *ad)
@@ -243,15 +219,7 @@ create_main_view(appdata_s *ad)
 The following figure illustrates the result.
 
 Figure: Image resizing 
-   
-
-			
```
-

Image resizing

diff --git a/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm b/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm index 42b55d3..1aae492 100644 --- a/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm @@ -16,28 +16,29 @@ -

The graphics tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The graphics tutorials demonstrate how to use the following features in creating Tizen native applications:

OpenGL ES: Using OpenGL ES Graphics
Demonstrates how you can use OpenGL ES graphics, OpenGL ES and EvasGL extensions, and implement multi-threaded applications.
TBM Surface: Providing a Rendering Surface for the Tizen Framework
Demonstrates how you can create and manage the Tizen Buffer Manager (TBM) surface.
Cairo Integration: Linking Cairo and Evas
Demonstrates how you can implement applications linking Cairo to Evas.
Graphic Widget: Drawing Simple Images Using Evas Objects
Demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL widget library.
Cairo: Linking Cairo and Evas
Demonstrates how you can use Cairo to draw on the image surface and Evas objects to get the image data.
Graphic UI Component: Drawing Simple Images Using Evas Objects
Demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL UI component library.

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 3fb796e..54195de 100644 --- a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm @@ -16,49 +16,50 @@ -

This tutorial demonstrates how you can handle OpenGL ES graphics with the GLView widget and EvasGL.

+ +

This tutorial demonstrates how you can handle OpenGL ES graphics with the GLView component and EvasGL.

Become familiar with the OpenGL ES API basics by learning about:

GLView widget +

GLView component

Creating the Basic Application
Create a basic application with a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by the GLView library.

Render a cube.

Animating the Cube
Create an animation.
Implementing Widget Interaction -
Create widgets that interact with the rendering.
Implementing UI Component Interaction +
Create UI components that interact with the rendering.
Implementing Effects
Create fancy effects for the screen.
Viewing the Entire Cube Source @@ -89,27 +90,13 @@
Use client-side rotation when the application is using Direct Rendering.

Show All
Hide All

- -

-
-
Creating the Basic Application
- hide -
-
-
This tutorial demonstrates how to create a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by GLView library. Several concepts are explained, such as the cube geometry, the initialization phase of the model, the adjustment of this very model frame by frame, and the way to design the OpenGL ES rendering loop.
+
Creating the Basic Application
+ +
This tutorial demonstrates how you can create a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by GLView library. Several concepts are explained, such as the cube geometry, the initialization phase of the model, the adjustment of this very model frame by frame, and the way to design the OpenGL ES rendering loop.

First create a basic application as explained in the Basic application tutorial. This provides a basic UI application skeleton which already makes available the window object that contains the GLView canvas.

Building the Environment

Define the application data structure that holds all the objects pertinent for the GLView application:
-
-
-
-
Creating the Cube
- hide -
-
+
Creating the Cube
+
Creating and the coloring the cube can be separated into two distinct tasks: define the vertices and then add the colors to the faces.
-
Figure: Cube
-
+
Figure: Cube
+

Declare an array that stores the vertices of the cube in order to make it look like the drawing above.
@@ -271,8 +251,8 @@ elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND); }; -
Figure: Cube matrix
-
+
Figure: Cube matrix
+

Each triangle is defined with three point coordinates, three vertices for each triangle, two triangles per face and six faces, so there are 36 vertices is total.

The next step is to specify a color for each face of the cube. Each color is represented in the RGBA format for the corresponding vertex, where each component is ranged from 0 to 1 where 1 is the maximum value. For example, in 32-byte color space, the RGB color of (16, 147, 237) is translated as (0.0625, 0.57421875, 0.92578125). The A of RGBA stands for the alpha channel, which represents the transparency of the color. All colors defined in this tutorial are opaque to make it simpler, so each alpha value is set to 1.0. In this example, different variants of blue are used for the faces of the cube.
@@ -324,18 +304,12 @@ elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND); }; -
-
-
-
Drawing the Cube with GLView
- hide -
-
+
Drawing the Cube with GLView
+
Mathematical Functions for Matrices

After the model is initialized, create functionality to manipulate the scene. OpenGL ES 2.0 provided by GLView requires more preliminary work that the previous version of the library, but gives more power and flexibility, although our example does not take much benefit.

First, declare additional global variables for tasks specific to OpenGL ES 2.0. A program object is needed, an identifier for the vertices buffer and another for the colors. Three variables are also required to ensure the connection with the shader language:
-
-
-
-
Rendering the Cube
- hide -
-
+
Rendering the Cube
+
We set the viewport at 0,0 corresponding to the bottom left edge of the window, and the height and width of the GL surface. Clear the depth and the color buffers to the values that were selected during initialization. Then call the glUseProgram() function in order to trigger the shader program.
```
glViewport(0, 0, w, h);
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
@@ -621,17 +589,11 @@ glFlush();
 
 You now are the proud owner of a nice cube!
 
-   Figure: Static cube 
-  
+  Figure: Static cube 
+  
+
+Animating the Cube
 
-			
```
-

- hide -

Ecore_Animator is used to create an animation.

static Eina_Bool
 animate_cb(void *data)
@@ -699,7 +661,7 @@ mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
    appdata_s *ad = data;
    float dx = 0, dy = 0;
 
-   if(ad->mouse_down) 
+   if (ad->mouse_down) 
    {
       dx = ev->cur.canvas.x - ev->prev.canvas.x;
       dy = ev->cur.canvas.y - ev->prev.canvas.y;
@@ -714,15 +676,10 @@ mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
 evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
 evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);

-
-
Implementing Widget Interaction
- hide -
-
-
Consider using widget to control some aspects of the rendering. For example, use some sliders to control the shape of the cube. Declare 3 sliders to play with the scaling coordinates of the cube.
+ +
Implementing UI Component Interaction
+ +
Consider using UI component to control some aspects of the rendering. For example, use some sliders to control the shape of the cube. Declare 3 sliders to play with the scaling coordinates of the cube.
```
typedef struct appdata 
 {
    Evas_Object *slx;
@@ -783,14 +740,14 @@ customScale(ad->model, scalex, scaley, scalez);
 customMutlMatrix(ad->mvp, ad->view, ad->model);
 
```
-
Consider also using a colorpicker to change the background. To achieve this, add a colorselector widget:
+
Consider also using a colorpicker to change the background. To achieve this, add a colorselector component:
```
typedef struct appdata 
 {
    Evas_Object *cs;
 }
 
```
-
Build the widget with a default palette and add it to the GUI:
+
Build the UI component with a default palette and add it to the GUI:
```
ad->cs = elm_colorselector_add(ad->inner_box);
 elm_colorselector_mode_set(ad->cs, ELM_COLORSELECTOR_BOTH);
 elm_colorselector_palette_name_set(ad->cs, "default");
@@ -799,21 +756,15 @@ evas_object_show(ad->cs);
 
```
When rendering the cube, retrieve the currently selected color to define the color buffer. The colors from the colorselector vary from 0 to 255, which needs to be converted to the color format of OpenGL ES.
-
Build the widget with a default palette and add it to the GUI:
+
Build the UI component with a default palette and add it to the GUI:
```
int r, g, b, a;
 elm_colorselector_color_get(ad->cs, &r, &g, &b, &a);
 glClearColor(r/255.0, g/255.0, b/255.0, a/255.0);
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 
```
-
-
-
-
Implementing Effects
- hide -
-
+
Implementing Effects
+
Create a button that resets the scene by putting the background color to black and makes the cube bounce back to its original scale. First add the button to the application data object:
```
typedef struct appdata 
@@ -869,19 +820,10 @@ btn_reset_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
 }
 
```
-
-

- hide -

The following code snippet contains the full code of the cube example. The details are explained in the other use cases.

/*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd All Rights Reserved
- *
- */
+// Copyright (c) 2014 Samsung Electronics Co., Ltd All Rights Reserved
 
 #include <app.h>
 #include <Elementary.h>
@@ -897,7 +839,7 @@ ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
 
 typedef struct appdata 
 {
-   // Elm_Widgets
+   // Elm_UI components
    Evas_Object *win;
    Evas_Object *conform;
    Evas_Object *glview;
@@ -1023,7 +965,7 @@ static const float colors[] =
    0.52734375f, 0.76171875f, 0.92578125f, 1.0f
 };
 
-/* Vertex Shader Source */
+// Vertex Shader Source
 static const char vertex_shader[] =
    "precision mediump float;"
    "uniform mat4 u_mvpMat;"
@@ -1036,7 +978,7 @@ static const char vertex_shader[] =
    "   v_color = a_color;"
    "}";
 
-/* Fragment Shader Source */
+// Fragment Shader Source
 static const char fragment_shader[] =
    "varying lowp vec4 v_color;"
    "void main()"
@@ -1379,7 +1321,7 @@ static void win_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_inf
 static void win_back_cb(void *data, Evas_Object *obj, void *event_info) 
 {
    appdata_s *ad = data;
-   /* Let window go to hidden state. */
+   // Let window go to hidden state
    elm_win_lower(ad->win);
 }
 
@@ -1391,7 +1333,7 @@ win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
 
 static void create_base_gui(appdata_s *ad) 
 {
-   /* Window */
+   // Window
    elm_config_accel_preference_set("opengl");
    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
    elm_win_autodel_set(ad->win, EINA_TRUE);
@@ -1421,7 +1363,7 @@ static void create_base_gui(appdata_s *ad)
 
    elm_object_content_set(ad->conform, ad->main_box);
 
-   /* Show window after base gui is set up */
+   // Show the window after the base GUI is set up
    evas_object_show(ad->win);
 }
 
@@ -1429,51 +1371,48 @@ static void create_gl_canvas(appdata_s *ad)
 {
    Ecore_Animator *ani;
 
-   /* Create and initialize GLView */
+   // Create and initialize GLView
    ad->glview = elm_glview_add(ad->main_box);
    ELEMENTARY_GLVIEW_GLOBAL_USE(ad->glview);
    evas_object_size_hint_align_set(ad->glview, EVAS_HINT_FILL, EVAS_HINT_FILL);
    evas_object_size_hint_weight_set(ad->glview, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
 
-   /* Request a surface with alpha and a depth buffer */
+   // Request a surface with alpha and a depth buffer
    elm_glview_mode_set(ad->glview, ELM_GLVIEW_DEPTH);
 
-   /* The resize policy tells GLView what to do with the surface when it
-    * resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE will tell it to
-    * destroy the current surface and recreate it to the new size.
-   */
+   // The resize policy tells GLView what to do with the surface when it
+   // resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE will tell it to
+   // destroy the current surface and recreate it to the new size
    elm_glview_resize_policy_set(ad->glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
 
-   /* The render policy sets how GLView should render GL code.
-    * ELM_GLVIEW_RENDER_POLICY_ON_DEMAND will have the GL callback
-    * called only when the object is visible.
-    * ELM_GLVIEW_RENDER_POLICY_ALWAYS would cause the callback to be
-    * called even if the object were hidden.
-   */
+   // The render policy sets how GLView should render GL code.
+   // ELM_GLVIEW_RENDER_POLICY_ON_DEMAND will have the GL callback
+   // called only when the object is visible.
+   // ELM_GLVIEW_RENDER_POLICY_ALWAYS would cause the callback to be
+   // called even if the object were hidden.
    elm_glview_render_policy_set(ad->glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
 
-   /* The initialize callback function gets registered here */
+   // The initialize callback function gets registered here
    elm_glview_init_func_set(ad->glview, init_gl);
 
-   /* The delete callback function gets registered here */
+   // The delete callback function gets registered here
    elm_glview_del_func_set(ad->glview, del_gl);
 
-   /* The resize callback function gets registered here */
+   // The resize callback function gets registered here
    elm_glview_resize_func_set(ad->glview, resize_gl);
 
-   /* The render callback function gets registered here */
+   // The render callback function gets registered here
    elm_glview_render_func_set(ad->glview, draw_gl);
 
-   /* Add the GLView to the box and show it */
+   // Add the GLView to the box and show it
    elm_box_pack_end(ad->main_box, ad->glview);
    evas_object_show(ad->glview);
 
-   /* This adds an animator so that the app will regularly
-    * trigger updates of the GLView using elm_glview_changed_set().
-    *
-    * NOTE: If you delete GL, this animator will keep running trying to access
-    * GL so this animator needs to be deleted with ecore_animator_del().
-   */
+   // This adds an animator so that the app will regularly
+   // trigger updates of the GLView using elm_glview_changed_set()
+   //
+   // NOTE: If you delete GL, this animator will keep running trying to access
+   // GL so this animator needs to be deleted with ecore_animator_del()
    ani = ecore_animator_add(animate_cb, ad->glview);
    evas_object_data_set(ad->glview, "ani", ani);
    evas_object_data_set(ad->glview, "ad", ad);
@@ -1482,7 +1421,7 @@ static void create_gl_canvas(appdata_s *ad)
    evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
    evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
 
-   /* Set rotation variables */
+   // Set rotation variables
    ad->xangle = 45.0f;
    ad->yangle = 45.0f;
    ad->zangle = 0.0f;
@@ -1555,10 +1494,10 @@ static void create_toolbox(appdata_s *ad)
 
 static bool app_create(void *data) 
 {
-   /* Hook to take necessary actions before main event loop starts
-    *Initialize UI resources and application's data
-    *If this function returns true, the main loop of application starts
-    *If this function returns false, the application is terminated */
+   // Hook to take necessary actions before main event loop starts
+   // Initialize UI resources and application's data
+   // If this function returns true, the main loop of application starts
+   // If this function returns false, the application is terminated
    appdata_s *ad = data;
 
    create_base_gui(ad);
@@ -1570,22 +1509,22 @@ static bool app_create(void *data)
 
 static void app_control(app_control_h app_control, void *data) 
 {
-   /* Handle the launch request. */
+   // Handle the launch request
 }
 
 static void app_pause(void *data) 
 {
-   /* Take necessary actions when application becomes invisible. */
+   // Take necessary actions when application becomes invisible
 }
 
 static void app_resume(void *data) 
 {
-   /* Take necessary actions when application becomes visible. */
+   // Take necessary actions when application becomes visible
 }
 
 static void app_terminate(void *data) 
 {
-   /* Release all resources. */
+   // Release all resources
 }
 
 int main(int argc, char *argv[]) 
@@ -1609,23 +1548,16 @@ int main(int argc, char *argv[])
    return ret;
 }
 	  
-

- hide -

To use OpenGL ES in multi-threaded applications, set up the rendering view and initialize the application:

Manage the Elementary GLView: -

Create a single GLView widget covering the whole window using the app_create() function: +

Create a single GLView component covering the whole window using the app_create() function:

 typedef struct 
 {
@@ -1633,17 +1565,17 @@ typedef struct
 
    Eina_Lock lck;
 
-   /* RT to main loop */
+   // RT to main loop
    Ecore_Pipe *pipe;
 
-   /* Main loop to RT: direct pipe file descriptors */
+   // Main loop to RT: direct pipe file descriptors
    int rt_rpipefd, rt_wpipefd;
 
-   /* General OpenGL ES data: program to draw a texture fullscreen */
+   // General OpenGL ES data: program to draw a texture fullscreen
    GLuint vtx_shader[1], fgmt_shader[1], program[1], vbo[2];
    Evas_GL_Context *main_ctx;
 
-   /* Render thread data */
+   // Render thread data
    struct 
    {
       Ecore_Thread *thread;
@@ -1658,7 +1590,7 @@ typedef struct
       Eina_Bool ready;
    } th;
 
-   /* Pool of Target_Buffer: empty, ready (locked access) */
+   // Pool of Target_Buffer: empty, ready (locked access)
    Eina_Inlist *buffers_empty;
    Eina_Inlist *buffers_ready;
    Target_Buffer *last_buffer;
@@ -1761,8 +1693,8 @@ init(Evas_Object *obj)
    glShaderSource(ad->fgmt_shader[0], 1, &p, NULL);
    glCompileShader(ad->fgmt_shader[0]);
    ad->program[0] = glCreateProgram();
-   glAttachShader(ad->program[0], ad->vtx_shader[0]);
-   glAttachShader(ad->program[0], ad->fgmt_shader[0]);
+   glAttachShader(ad->program[0], ad->vtx_shader[0]);
+   glAttachShader(ad->program[0], ad->fgmt_shader[0]);

Since most of EFL is not thread-safe, certain operations cannot be executed from another thread and you must use the main loop instead.

Establish a communication channel from the render thread to the main loop:

Create an ecore_pipe channel.

EFL provides a simple tool to send messages to the main thread using pipes. Ecore Pipe is the abstraction layer around pipe objects, and is the easiest way to send a message from any thread back to the main thread.

@@ -1854,7 +1786,7 @@ pipe_handler(void *data, void *buf, unsigned int len EINA_UNUSED)
 
 Establish a communication channel from the main thread to the render thread:
 
-
+
 Create a pipe.
 The easiest way to send a simple message in EFL in Tizen is to rely on a POSIX pipe file handle:
 @@ -1913,7 +1845,7 @@ thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
    evas_gl_make_current(evgl, ad->th.sfc, ad->th.ctx);
    while (!ecore_thread_check(ad->th.thread))
    {
-      /* Prepare new frame */
+      // Prepare new frame
       glViewport(0, 0, BUFFER_WIDTH, BUFFER_HEIGHT);
       glBindFramebuffer(GL_FRAMEBUFFER, target->fbo);
 	  
@@ -1936,7 +1868,7 @@ thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
 
 Handle input events:
 With the above setup environment, pass input events from the main thread to any thread.
-
+
 Add the following code to the app_create() function to catch mouse up or down events on the GLView object:
  evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, &ad);
@@ -1982,7 +1914,7 @@ mouse_up_cb(void *data, Evas *e EINA_UNUSED,
  thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
 {
-   /* Prepare new frame */
+   // Prepare new frame
    glViewport(0, 0, BUFFER_WIDTH, BUFFER_HEIGHT);
    glBindFramebuffer(GL_FRAMEBUFFER, target->fbo);
    evas_gl_make_current(evgl, ad->th.sfc, ad->th.ctx);
@@ -2130,8 +2062,8 @@ static void
 thread_draw(App_Data *ad, Evas_GL_API *gl)
 {
    // Draw function  
-   GL()glClearColor(ad->th.c1, ad->th.c2, ad->th.c3, ad->th.c4);
-   GL()glClear(GL_COLOR_BUFFER_BIT);
+   glClearColor(ad->th.c1, ad->th.c2, ad->th.c3, ad->th.c4);
+   glClear(GL_COLOR_BUFFER_BIT);
 }
 
 
@@ -2194,7 +2126,7 @@ draw_rectangle(App_Data *ad, int w, int h, int tex)
 The above code works in some cases but depending on the GPU and driver, there can be synchronization issues between the 2 threads, as one is drawing and the other is reading from the same object. Remember that most GL commands are asynchronous.
 
 You can synchronize data between threads:
-
+
 Using fence sync objects
 Use the fence_sync extension:
 @@ -2261,16 +2193,8 @@ if (evasglCreateImageForContext)
 
 			
 			
-			
-			
-

-
-
Using OpenGL ES Extensions
- hide -
-
+ +
Using OpenGL ES Extensions

EvasGL, offering an abstraction layer above OpenGL ES, provides an easy mechanism to check for support and use OpenGL ES extensions:
@@ -2307,16 +2231,8 @@ if (gl->glGetProgramBinaryOES)

- - +

- hide -

EvasGL is not only an abstraction layer on top of OpenGL ES, but also on top of EGL and GLX. As such, EvasGL tries to imitate EGL in a platform-independent manner, and exposes the underlying platform extensions when it can.

Image and sync support are the most commonly used EvasGL extensions. Both can be used for multi-thread rendering, but EvasGL images can also be used to share images between contexts.

@@ -2429,39 +2345,41 @@ if (gl->evasglCreateSync) // fence_sync must be supported - -

- - -

- hide -

To enhance rendering performance, the Direct Rendering option is supported.

-Evas_Object *gl;
-gl = elm_glview_add(win);
- 
-elm_glview_mode_set(gl, ELM_GLVIEW_DEPTH | ELM_GLVIEW_DIRECT);

+elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high"); +Evas_Object *win = elm_win_util_standard_add("sample", "sample"); + +Evas_Object *glview = elm_glview_add(win); +elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH_24 | ELM_GLVIEW_STENCIL_8 | ELM_GLVIEW_MULTISAMPLE_HIGH); +

In GLView, the ELM_GLVIEW_DIRECT option is one of GLView mode's enums and the option can be enabled using the elm_glview_mode_set() function.

To use the Direct Rendering mode, set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the elm_config_accel_preference_set() function and to a GLView object using the elm_glview_mode_set() function. If the GLView object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.

-Evas_GL_Config *cfg;
+elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high");
+Evas_Object *win = elm_win_util_standard_add("sample", "sample");
+
+Evas_GL_Config *cfg = evas_gl_config_new();
 cfg = evas_gl_config_new();
  
-cfg->options_bits = EVAS_GL_OPTIONS_DIRECT;

+cfg->color_format = EVAS_GL_RGB_888; +cfg->depth_bits = EVAS_GL_DEPTH_BIT_24; +cfg->stencil_bits = EVAS_GL_STENCIL_BIT_8; +cfg->options_bits = EVAS_GL_OPTIONS_DIRECT; +cfg->multisample_bits = EVAS_GL_MULTISAMPLE_HIGH; + -

In EvasGL, the EVAS_GL_OPTIONS_DIRECT is one of EvasGL's config options and the option can be enabled by setting the Evas_GL_Config option.

In EvasGL, the EVAS_GL_OPTIONS_DIRECT is one of EvasGL's config options and the option can be enabled by setting the Evas_GL_Config option. To use the Direct Rendering mode, set the same option values (depth, stencil, and MSAA) to a rendering engine and an Evas_GL_Config object. You can set the option values to a rendering engine using the elm_config_accel_preference_set() function. If the Evas_GL_Config object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.

@@ -2490,22 +2408,16 @@ cfg->options_bits = EVAS_GL_OPTIONS_DIRECT; -

Caution

In case the GL functions are called outside the render callback function, call evas_gl_make_current() before the GL function calls. This solution only works if the target surface is not an Evas_GL_Surface with Direct Rendering enabled. +

In the render callback function, call only GL functions. +

In case the GL functions are called outside the render callback function, you must call the evas_gl_make_current() function before the GL function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an Evas_GL_Surface with Direct Rendering enabled.

If the target buffer is an Evas_GL_Surface with Direct Rendering enabled, all GL functions must be called from the render callback function only. All other operations can break the rendering order and the unexpected rendering will occur.

- -

- hide -

The Client Side Rotation is a special value that indicates to EFL that the application will handle the view rotation when the device is rotated. This is needed only when the application requests Direct Rendering.

@@ -2542,17 +2454,12 @@ static void _draw_gl(Evas_Object *obj) if (rotation % 180) { - // adjust gl size + // Adjust gl size } }

To get the current rotation of the view, in degrees, call the evas_gl_rotation_get() in order to properly handle the current rotation of the view. It will always return 0 unless the option EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION has been set. Indeed, in case of Direct Rendering to the back buffer, the client application is responsible for properly rotating its view. This can generally be done by applying a rotation to a view matrix.

- - -

+ diff --git a/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm index 12c88d1..d982d88 100644 --- a/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm @@ -16,26 +16,27 @@ -

This tutorial demonstrates how you can create, destroy, map, unmap, and access a surface that is a kind of graphic buffer.

@@ -46,26 +47,14 @@

Create and manage the TBM surface.

Show All
Hide All

- -

-
-
Managing the TBM Surface
- hide -
-
+ +
Managing the TBM Surface
+
To create the TBM surface:
1. To use the functions and data types of the TBM Surface API, include the <tbm_surface.h> header file in your application:
  +
2. To use the functions and data types of the TBM Surface API (in mobile and wearable applications, include the <tbm_surface.h> header file in your application:
```
 #include <tbm_surface.h>
 
```
-
-

- diff --git a/org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm b/org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm index cc841c9..e1384cc 100644 --- a/org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm @@ -59,9 +59,9 @@

Getting the Geofence Event State

Get the success or failure state of each event.

Getting Geofence Alerts -

Define the geofence and track state changes.

Tracking the User for Geofence Alerts -

Track the user location and update the geofence state.

Retrieving Geofence Information

Acquire information on geofences.

@@ -73,7 +73,7 @@

 #include <geofence_manager.h>

Create a geofence manager handle using the geofence_manager_create() function: +

Create a geofence manager handle using the geofence_manager_create() function:

 geofence_manager_h manager;
 geofence_manager_create(&manager);
@@ -120,7 +120,7 @@ int geofence_id = -1;
 geofence_manager_add_fence(manager, fence_h, &geofence_id);

Start the geofence service using the geofence_manager_start() function. +

Start the geofence service using the geofence_manager_start() function.

This call is asynchronous and only initiates the process of starting the service. Once the service is started, the registered callbacks are invoked when their corresponding events take place. To know when the service becomes enabled, use the geofence_manager_set_geofence_state_changed_cb() callback.

 geofence_manager_start(manager);
@@ -256,7 +256,7 @@ geofence_get_longitude(fence_h, &longitude);
 geofence_get_radius(fence_h, &radius);
 geofence_get_address(fence_h, &address);

Retrieve the Wi-Fi or Bluetooth geofence information:

 char *bssid;
 char *ssid;
diff --git a/org.tizen.tutorials/html/native/location/location_tutorial_n.htm b/org.tizen.tutorials/html/native/location/location_tutorial_n.htm
index 9d4779a..3006795 100644
--- a/org.tizen.tutorials/html/native/location/location_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/location/location_tutorial_n.htm
@@ -30,7 +30,7 @@
 		        
         Related Info
         
-            Location Guide
+            Location Guide
 			Location API for Mobile Native
 			Location API for Wearable Native
         
@@ -165,7 +165,8 @@ location_manager_destroy(manager);

When the update is received, you can, for example, update the variables that store the current position:

 static double user_latitude, user_longitude;
-static void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data)
+static void position_updated(double latitude, double longitude, double altitude, 
+                             time_t timestamp, void *user_data)
 {
    user_latitude = latitude;
    user_longitude = longitude;
@@ -253,7 +254,8 @@ gps_status_set_satellite_updated_cb(manager, capi_gps_status_satellite_updated_c
 int cur_azimuth, cur_elevation, cur_prn, cur_snr;
 
 static bool 
-capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation, unsigned int prn, int snr, bool is_in_use, void *user_data)
+capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation, unsigned int prn, 
+                                  int snr, bool is_in_use, void *user_data)
 {
    cur_azimuth = azimuth;
    cur_elevation = elevation;
@@ -266,7 +268,8 @@ capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation,
 static int numofactive, numofinview;
 
 static void 
-capi_gps_status_satellite_updated_cb(int num_of_active, int num_of_inview, time_t timestamp, void *user_data)
+capi_gps_status_satellite_updated_cb(int num_of_active, int num_of_inview, 
+                                     time_t timestamp, void *user_data)
 {
    numofinview = num_of_active;
    if (num_of_inview > 0) 
@@ -312,8 +315,10 @@ location_manager_set_position_updated_cb(manager, velocity_updated, 2, NULL);
 Define the position and velocity callback functions:
 
 -void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data) {}
-void velocity_updated(double speed, double direction, double climb, time_t timestamp, void *user_data) {}
+void position_updated(double latitude, double longitude, double altitude, 
+                      time_t timestamp, void *user_data) {}
+void velocity_updated(double speed, double direction, double climb, 
+                      time_t timestamp, void *user_data) {}
 
 
 Within the function, you can collect obtained data to get the points you have visited, to calculate traveled distance more precisely, or to calculate the average speed or climb.

@@ -351,7 +356,8 @@ location_manager_get_accuracy(manager, &level, &horizontal, &vertica

Use the location_manager_get_location() function to get all of the above 10 values at once:

-location_manager_get_location(manager, &altitude, &latitude, &longitude, &climb, &direction, &speed, &level, &horizontal, &vertical, &timestamp);
+location_manager_get_location(manager, &altitude, &latitude, &longitude, &climb, 
+                              &direction, &speed, &level, &horizontal, &vertical, &timestamp);

If the location service is currently unavailable, get the last values recorded by the location manager when the GPS signal was available. To get the information, use the following functions:

diff --git a/org.tizen.tutorials/html/native/location/location_tutorials_n.htm b/org.tizen.tutorials/html/native/location/location_tutorials_n.htm index 9be37ca..df9ceaf 100644 --- a/org.tizen.tutorials/html/native/location/location_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/location/location_tutorials_n.htm @@ -40,10 +40,9 @@

Geofence: Creating and Using Geofences
Demonstrates how you can create and use geofences.

Maps Service: Geocoding, Searching place, and Routing -
Demonstrates how you can create and use maps service.
Maps Service: Using the Map Service +
Demonstrates how you can use the map service to query geocodes and routes, and search for places.

@@ -70,4 +69,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.tutorials/html/native/location/maps_tutorial_n.htm b/org.tizen.tutorials/html/native/location/maps_tutorial_n.htm index 88230e4..88c8227 100644 --- a/org.tizen.tutorials/html/native/location/maps_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/location/maps_tutorial_n.htm @@ -10,14 +10,14 @@ -Maps: Using Maps API in Tizen Applications +Maps Service: Using the Map Service -

@@ -25,15 +25,15 @@

Content

Initializing the Maps Services
Using Geocode and Reverse Geocode Services
Using Place Search Services
Using Routing Service
Canceling the Service Request
Recognizing Address information
Recognizing Place information
Recognizing Route information
Tuning API requests with preferences
Initializing the Map Service
Using Geocode and Reverse Geocode Services
Using the Place Search Service
Using the Routing Service
Canceling the Service Request
Recognizing the Address Information
Recognizing the Place Information
Recognizing the Route Information
Customizing the Service Requests

Related Info

@@ -45,1215 +45,940 @@

The tutorial demonstrates how you can use Maps API in Tizen Applications.

Two Maps Providers are supported: -

HERE Maps based on HERE REST API
MapQuest based on Open MapQuest API

A user have to get access key of Maps Providers from developer sites

Note that Maps Service must be used under "Term of Use" of Maps Service Providers.

- -

Become familiar with Location Maps API basics by learning about:

Initializing the Maps Service -
Select Maps Provider, check available capabilities, fulfill the - prerequisites, creates the instance of Maps Service and destroys it - when no longer needed.
Using Geocode and Reverse Geocode Services -
Getting the Geocode of a specified place and Reverse Geocode, - corresponding to the specified geographical coordinates.
Using Place Search Service -
Searching for places near a specified geographical position or inside - specified geographical area.
Using Routing Service -
Querying the route from point A to point B, optionally, passing through - a number of specified way points.
Canceling the Service request

- -

Once we have learned the basics of the Location Maps API, we can now move on - to other useful tasks, including:

Recognizing Address information -
Parsing the information, obtained from Geocode Service.
Recognizing Place information -
Parsing the information, obtained from Place Search Service.
Recognizing Route information -
Parsing the information, obtained from Routing Service.
Tuning API requests with preferences -
Preparing and sending via API request a set of extra preferences, allowing the - Maps Provider to generate more accurate result.

- - -

Show All
Hide All

- -

- Hide -

Using Maps API in maps-aware application requires:

Selecting one of available Maps Providers,
-
Creating the Maps Service, relying on the selected Maps Provider,
-
Setting Maps Provider access key and other preferences,
-
Using Maps Services requests (Geocode, Place Search, Routing),
-
Destroying Maps Service.
-

This Section explains steps 1, 2, 3 and 5. Step 4 is explained in further Sections.

-
-

Below demonstrated how to start using the Maps Service and API.

To use the features of Location Maps API, include the - <maps_service.h> - header file in your application:
-
```
#include <maps_service.h>
```
-

Maps Service instance is relying on a particular Maps Provider. In order to get the list of available - Maps Providers use - maps_service_foreach_provider():

+
+
+Maps Service: Using the Map Service
+
+
+This tutorial demonstrates how you can use the map service to query geocodes and routes, and search for places.
+
+ 
+ 
+     
+      
+     
+     
+      
+     
+    
+  Note
This feature is supported in mobile applications only.
+
+
+Warm-up
+Become familiar with the Maps Service API basics by learning about:
+
+	Initializing the Map Service
+	Select a map provider, check available capabilities, fulfill the prerequisites, create the Maps Service instance, and destroy it when no longer needed.
+
+	Using Geocode and Reverse Geocode Services
+	Get the geocode of a specified place, and the reverse geocode corresponding to specified geographical coordinates.
+
+	Using the Place Search Service
+	Search for places near a specified geographical position or inside a specified geographical area.
+
+	Using the Routing Service
+	Query the route from point A to point B, optionally passing through a number of specified waypoints.
+
+	Canceling the Service Request
+	Cancel the map service (geocode, routing, or place search) request.
+
+
+Follow-up
+Once we have learned the basics of the Maps Service API, we can now move on to more advanced tasks, including:
+
+	Recognizing the Address Information
+	Parse the information obtained from the reverse geocode service.
+
+	Recognizing the Place Information
+	Parse the information obtained from the place search service.
+
+	Recognizing the Route Information
+	Parse the information obtained from the routing service.
+
+	Customizing the Service Requests
+	Prepare and send a set of extra preferences through a map service request and allow the map provider to generate a more accurate result.
+
+
+
+
+Initializing the Map Service
+
+To start using the map service:
+
+To use the functions and data types of the Maps Service API, include the  <maps_service.h>  header file in your application:
++#include <maps_service.h>
+
+
+
+The Maps Service instance relies on a particular map provider. To get a list of available map providers, use the maps_service_foreach_provider() function:
+ static bool _maps_service_provider_info_cb(char* maps_provider, void* user_data)
 {
-	/* Handle the Maps Provider name, passed as maps_provider */
-	return bool;
+   // Handle the map provider name, passed as maps_provider
+
+   return bool;
 }
 
 void get_available_providers()
 {
-	void *user_data = NULL;
-	const int error = maps_service_foreach_provider(
-		_maps_service_provider_info_cb, user_data);
-
-	if(error == MAPS_ERROR_NONE) {
-		/* Chose one of providers from the available_providers vector */
-	} else {
-		/* Handle error */
-	}
-}
-								
-
-								Create an instance of Maps Service using the
-								 maps_service_create() function before you use Maps API.
-								+   void *user_data = NULL;
+   const int error = maps_service_foreach_provider(_maps_service_provider_info_cb, user_data);
+
+   if (error == MAPS_ERROR_NONE) 
+   {
+      // Select a provider from the available_providers vector
+   } 
+   else 
+   {
+      // Error handling
+   }
+}
+
+
+
+Before you use the Maps Service API, create a Maps Service instance using the maps_service_create() function:
+ maps_service_h maps = NULL;
-int error = maps_service_create("Maps Provider", &maps);
-								
-								
-
-								Set the security key, appropriate to selected Maps Provider using
-								 maps_service_set_provider_key().
-								-error = maps_service_set_provider_key(maps, "XXXYYYZZZ");
-								
-								
-
-								Check which services are supported by selected Maps Provider using
-								 maps_service_provider_is_service_supported().
-								+int error = maps_service_create("Maps Provider", &maps);
+
+
+
+Set the security key appropriate to the selected map provider using the maps_service_set_provider_key() function:
++error = maps_service_set_provider_key(maps, "XXXYYYZZZ");
+
+
+
+Check which services are supported by the selected map provider using the maps_service_provider_is_service_supported() function:
+ bool supported = false;
 
-/* Check if Routing is available */
-error = maps_service_provider_is_service_supported(maps,
-	MAPS_SERVICE_SEARCH_ROUTE, &supported);
-const bool is_routing_supported =
-	(error == MAPS_ERROR_NONE) ? supported : false;
-
-/* Check if Routing via specified waypoints is available */
-error = maps_service_provider_is_service_supported(maps,
-	MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS, &supported);
-const bool is_routing_waypoints_supported =
-	(error == MAPS_ERROR_NONE) ? supported : false;
-								
-								To check other services availability follow the same approach using keys from
-								 maps_service_e:
-								
-									MAPS_SERVICE_GEOCODE
-									MAPS_SERVICE_GEOCODE_INSIDE_AREA
-									MAPS_SERVICE_GEOCODE_BY_STRUCTURED_ADDRESS
-									MAPS_SERVICE_REVERSE_GEOCODE
-									MAPS_SERVICE_SEARCH_PLACE
-									MAPS_SERVICE_SEARCH_PLACE_BY_AREA
-									MAPS_SERVICE_SEARCH_PLACE_BY_ADDRESS
-									MAPS_SERVICE_CANCEL_REQUEST
-								
-								
-
-								Optionally, check which data features are available for desired services using
-								 maps_service_provider_is_data_supported().
-								-/* Check if route path data is supported */
-error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_PATH,
-						&supported);
-const bool is_route_path_supported =
-	(error == MAPS_ERROR_NONE) ? supported : false;
-if(is_route_path_supported) {
-	/* Allow route path usage */
+// Check whether routing is available 
+error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE, &supported);
+const bool is_routing_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+
+// Check whether routing through specified waypoints is available
+error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS, &supported);
+const bool is_routing_waypoints_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+
+To check for the availability of other services, follow the same approach using the keys from the maps_service_e enumerator.
+
+
+Optionally, check which data features are available for the desired services using the maps_service_provider_is_data_supported() function:
++// Check whether route path data is supported
+error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_PATH, &supported);
+const bool is_route_path_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+if (is_route_path_supported) 
+{
+   // Use route path
 }
 
-/* Check if maneuver path data is supported */
-error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_PATH,
-						&supported);
-const bool is_route_segment_path_supported =
-	(error == MAPS_ERROR_NONE) ? supported : false;
-if(is_route_segment_path_supported) {
-	/* Allow segment path usage */
+// Check whether segment path data is supported
+error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_PATH, &supported);
+const bool is_route_segment_path_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+if (is_route_segment_path_supported) 
+{
+   // Use segment path
 }
 
-/* Check if maneuver sements data is supported */
-error = maps_service_provider_is_data_supported(maps,
-				MAPS_ROUTE_SEGMENTS_MANEUVERS, &supported);
-const bool is_route_segment_maneuvers_supported =
-	(error == MAPS_ERROR_NONE) ? supported : false;
-if(is_route_segment_maneuvers_supported) {
-	/* Allow segment maneuvers usage */
+// Check whether segment maneuver data is supported
+error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_MANEUVERS, &supported);
+const bool is_route_segment_maneuvers_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+if (is_route_segment_maneuvers_supported) 
+{
+   // Use segment maneuvers
 }
-								
-								To check other data features availability follow the same approach using keys from
-								 maps_service_data_e:
-								
-									MAPS_PLACE_ADDRESS
-									MAPS_PLACE_RATING
-									MAPS_PLACE_CATEGORIES
-									MAPS_PLACE_ATTRIBUTES
-									MAPS_PLACE_CONTACTS
-									MAPS_PLACE_EDITORIALS
-									MAPS_PLACE_REVIEWS
-									MAPS_PLACE_IMAGE
-									MAPS_PLACE_SUPPLIER
-									MAPS_PLACE_RELATED
-								
-								
-
-								Set general preferences, such as language and distance units using
-								 maps_service_set_preference().
-								-/* Create an instance of a preference set */
+
+To check the availability of other data features, follow the same approach using the keys from the maps_service_data_e enumerator.
+
+
+Set general preferences, such as language and distance units, using the maps_service_set_preference() function:
++// Create a preference set instance
 maps_preference_h preference = NULL;
-int error = maps_preference_create(&preference);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle error */
+int error = maps_preference_create(&preference);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Set the distance units preference */
+// Set the distance unit preference
 error = maps_preference_set_distance_unit(preference, MAPS_DISTANCE_UNIT_M);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Set the language preference */
-error = maps_preference_set_language(preference, "en-US");
-if(error != MAPS_ERROR_NONE) {
-	/* Handle error */
+// Set the language preference
+error = maps_preference_set_language(preference, "en-US");
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Apply the set of preferences for Maps Service */
+// Apply the set of preferences for the map service
 error = maps_service_set_preference(maps, preference);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Destroy the instance of the preference set */
+// Destroy the preference set instance
 error = maps_preference_destroy(preference);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle error */
-}
-								
-								Optionally you can set the maximum amount of search results and default country code
-								using maps_preference_set_max_results() 
-								and maps_preference_set_country_code() respectively.
-								In order to set Maps Provider specific preferences use
-								 maps_preference_set_property() 
-								with key-value pairs, defined in the appropriate Maps Provider documentation.
-								To get preferences, currently applied in the Maps Provider use following functions:
-								
-									maps_preference_get_distance_unit()
-									maps_preference_get_language()
-									maps_preference_get_max_results()
-									maps_preference_get_country_code()
-									maps_preference_get() and
-										 maps_preference_foreach_property()
-								
-								The former pair of functions retrieve the Maps Provider specific preferences, not defined in the Maps API.
-								
-							
-
-						
-

- Hide -

To retrieve a geocode of a specified place, or the place information, corresponding to a given - geographical coordinates, use one of approaches, listed in this Section.

Note that each API request may be tuned as it is demonstrated in the section Tuning API requests with preferences.

Note that to perform these operations, your application needs the http://tizen.org/privilege/internet privilege.

-
-

Usage of Geocode API is demonstrated below.

Request the geocode by free formed address using - maps_service_geocode().
-
```
-/* Searching for geocode of the
- * Samsung'c campus "Digital City" in Suwon */
-error = maps_service_geocode(maps,
-	"Suwon, Digital City",
-	preference,
-	__maps_service_geocode_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
+}
+
```
+
Optionally, you can set the maximum amount of search results and a default country code using the maps_preference_set_max_results() and maps_preference_set_country_code() functions respectively.
+
To set specific preferences for the map provider, use the maps_preference_set_property() function with key-value pairs, defined in the appropriate map provider documentation.
+
To get the preferences currently applied in the map provider, use the following functions:
+
- maps_preference_get_distance_unit()
- maps_preference_get_language()
- maps_preference_get_max_results()
- maps_preference_get_country_code()
- maps_preference_get() and + maps_preference_foreach_property() +
  These 2 functions retrieve the map provider-specific preferences not defined in the Maps Service API.
+

+ + +

+ +

To retrieve a geocode of a specified place, or the place information corresponding to given geographic coordinates, use one of the following approaches. The service requests can be customized.

+ +

To retrieve a geocode:

Make sure that your application has the http://tizen.org/privilege/internet privilege. +

Request the geocode: +

Use the maps_service_geocode() function for a request based on a free-formed address: +

+// Search for geocode of the Samsung's campus "Digital City" in Suwon
+error = maps_service_geocode(maps, "Suwon, Digital City", preference, 
+                             __maps_service_geocode_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-

Request the geocode inside a specified area using - maps_service_geocode_inside_area().

+Use the maps_service_geocode_inside_area() function for a request inside a specified area:
+ maps_area_h bounds = NULL;
-/* Use maps_area_create_rectangle() or maps_area_create_circle()
- * to create a geographical bounds of Geocoding */
-
-/* Searching for geocode of the
- * Samsung's campus Digital City
- * within a specified geographical area */
-error = maps_service_geocode_inside_area(maps,
-	"Digital City",
-	bounds,
-	preference,
-	__maps_service_geocode_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+// Use maps_area_create_rectangle() or maps_area_create_circle() to create geographic bounds for geocoding
+
+// Search for geocode of the Digital City within a specified geographic area
+error = maps_service_geocode_inside_area(maps, "Digital City", bounds, preference,
+                                         __maps_service_geocode_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-								
-								
+

Request the geocode for a place, specified as a structured address using - maps_service_geocode_by_structured_address().

+Use the maps_service_geocode_by_structured_address() function for a request for a place, specified as a structured address:
+ maps_address_h address = NULL;
-/* Use maps_address_create() to create an instance of an address
- * Than use maps_address_set_xxx to initialize the address
- * with desired values */
-
-/* Searching for a geocode of a place, specified with a structured address */
-error = maps_service_geocode_by_structured_address(maps,
-	address,
-	preference,
-	__maps_service_geocode_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
-}
-								
+// Use maps_address_create() to create an instance of an address
+// Then use maps_address_set_xxx to initialize the address with the desired values
 
+// Search for a geocode of a place, specified with a structured address 
+error = maps_service_geocode_by_structured_address(maps, address, preference, __maps_service_geocode_cb, 
+                                                   user_data, &request_id);
 
-								
The callback
-								 __maps_service_geocode_cb should be implemented as following:
-								-static bool __maps_service_geocode_cb(maps_error_e result, int request_id,
-	int index, int total, maps_coordinates_h coordinates,
-	void* user_data)
+if (error != MAPS_ERROR_NONE) 
 {
+   // Error handling
+}
+
+

Implement the __maps_service_geocode_cb() callback to receive the service response: +

+static bool __maps_service_geocode_cb(maps_error_e result, int request_id, int index, int total, 
+                                      maps_coordinates_h coordinates, void* user_data)
+{
+   // Handle the obtained coordinate data
 
-	/* Release results */
-	maps_coordinates_destroy(coordinates);
-	return true;
-}
-

- -
-

Usage of Reverse Geocode API is demonstrated below.

To retrieve a reverse geocode of a specified geographical coordinates, use - maps_service_reverse_geocode().

-/* Obtaining the reverse geocode with a specified coordinates */
-error = maps_service_reverse_geocode(maps,
-	37.257865,
-	127.053659,
-	preference,
-	__maps_service_reverse_geocode_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+   // Release the results
+   maps_coordinates_destroy(coordinates);
+
+   return true;
 }
-

The callback - __maps_service_reverse_geocode_cb should be implemented as following:

-static void __maps_service_reverse_geocode_cb(maps_error_e result,
-	int request_id, int index, int total, maps_address_h address,
-	void* user_data)
+

+ + +

To retrieve a reverse geocode:

To retrieve a reverse geocode of specified geographic coordinates, use the maps_service_reverse_geocode() function: +

+// Obtain the reverse geocode with specified coordinates
+error = maps_service_reverse_geocode(maps, 37.257865, 127.053659, preference,
+                                     __maps_service_reverse_geocode_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE) 
 {
+   // Error handling
+}
+

Implement the __maps_service_reverse_geocode_cb() callback to receive the service response: +

+static void __maps_service_reverse_geocode_cb(maps_error_e result, int request_id, int index, int total, 
+                                              maps_address_h address, void* user_data)
+{
+   // Handle the obtained address
 
-	/* Release results */
-	maps_address_destroy(address);
+   // Release the results
+   maps_address_destroy(address);
 }
-

- Hide -

To search for a place accordingly to a diversity of searching parameters, use one of approaches, listed in - this Section.

Note that each API request may be tuned as it is demonstrated in the Section Tuning API requests with preferences.

Note that to perform these operations, your application needs the http://tizen.org/privilege/internet privilege.

Search the place within a specified distance around the center coordinates using - maps_service_search_place().
-
```
+
```
+

+ +

+ +

To search for a place with a diversity of searching parameters, use one of the following approaches. The service requests can be customized.

+ +

To search for a place:

Make sure that your application has the http://tizen.org/privilege/internet privilege. +

Search for a place: +

Use the maps_service_search_place() function for a search within a specified distance around the center coordinates: +

 maps_coordinates_h position = NULL;
-/* Create coordinates with maps_coordinates_create() */
+// Create the coordinates with maps_coordinates_create()
 
 int distance = 500;
-error = maps_service_search_place(maps,
-	position,
-	distance,
-	filter,
-	preference,
-	__maps_service_search_place_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_service_search_place(maps, position, distance, filter, preference,
+                                  __maps_service_search_place_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-

Search the place within a specified geographical boundary using - maps_service_search_place_by_area().

+Use the maps_service_search_place_by_area() function for a search for a place within a specified geographic boundary:
+ maps_area_h boundary = NULL;
-/* Create boundary with one of:
- * - maps_area_create_rectangle()
- * - maps_area_create_circle() */
-
-error = maps_service_search_place_by_area(maps,
-	boundary,
-	filter,
-	preference,
-	__maps_service_search_place_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+// Create the boundary with maps_area_create_rectangle() or maps_area_create_circle() 
+
+error = maps_service_search_place_by_area(maps, boundary, filter, preference, 
+                                          __maps_service_search_place_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-								
-								
+

Search the place by address within a specified geographical boundary using - maps_service_search_place_by_address().

+Use the maps_service_search_place_by_address() function for a search for a place based on an address within a specified geographic boundary:
+ maps_area_h boundary = NULL;
-/* Create boundary with one of:
- * - maps_area_create_rectangle()
- * - maps_area_create_circle() */
-
-error = maps_service_search_place_by_address(maps,
-	"Digital City",
-	boundary,
-	filter,
-	preference,
-	__maps_service_search_place_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
-}
-								
-								
+// Create the boundary with maps_area_create_rectangle() or maps_area_create_circle()
 
+error = maps_service_search_place_by_address(maps, "Digital City", boundary, filter, preference,
+                                             __maps_service_search_place_cb, user_data, &request_id);
 
-								The callback
-								 __maps_service_search_place_cb() should be implemented as following:
-								-static bool __maps_service_search_place_cb(maps_error_e error, int request_id,
-	int index, int total, maps_place_h place, void* user_data)
+if (error != MAPS_ERROR_NONE) 
 {
+   // Error handling
+}
+
+

Implement the __maps_service_search_place_cb() callback to receive the service response: +

+static bool __maps_service_search_place_cb(maps_error_e error, int request_id, int index, int total, 
+                                           maps_place_h place, void* user_data)
+{
+   // Handle the obtained place data
+
+   // Release the results
+   maps_place_destroy(place);
 
-	/* Release results */
-	maps_place_destroy(place);
-	return true;
+   return true;
 }
-

- Hide -

To query a route from point A to point B use one of approaches, listed in this Section.

Note that each API request may be tuned as it is demonstrated in the Section Tuning API requests with preferences.

Note that to perform these operations, your application needs the http://tizen.org/privilege/internet privilege.

Simply query the route from one geographical coordinates to another using - maps_service_search_route().
-
```
+
```
+

+ + +

+ +

To query a route from point A to point B, use one of the following approaches. The service requests can be customized.

+ +

To query a route:

Make sure that your application has the http://tizen.org/privilege/internet privilege. +

Query the route: +

Use the maps_service_search_route() function for a route from one set of geographic coordinates to another: +

 maps_coordinates_h origin = NULL, destination = NULL;
-/* Create coordinates with maps_coordinates_create() */
-
-error = maps_service_search_route(maps,
-	origin,
-	destination,
-	preference,
-	__maps_service_search_route_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+// Create the coordinates with maps_coordinates_create()
+
+error = maps_service_search_route(maps, origin, destination, preference, 
+                                  __maps_service_search_route_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-

Query the route passing through a specified set of way points using - maps_service_search_route_waypoints().

-/* Specify amount of way points */
+Use the maps_service_search_route_waypoints() function for a route passing through a specified set of waypoints:
++// Specify the number of waypoints
 const int waypoint_num = 5;
 
-/* Create array with coordinates of way points */
+// Create an array with the waypoint coordinates 
 maps_coordinates_h* waypoint_list = NULL;
 
-error = maps_service_search_route_waypoints(maps,
-	waypoint_list,
-	waypoint_num,
-	preference,
-	__maps_service_search_route_cb,
-	user_data,
-	&request_id);
+error = maps_service_search_route_waypoints(maps, waypoint_list, waypoint_num, preference,
+                                            __maps_service_search_route_cb, user_data, &request_id);
 
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-								
-								
+

The callback - __maps_service_search_route_cb() should be implemented as following:

-static bool __maps_service_search_route_cb(maps_error_e error, int request_id,
-	int index, int total, maps_route_h route, void* user_data)
+Implement the __maps_service_search_route_cb() callback to receive the service response:
++static bool __maps_service_search_route_cb(maps_error_e error, int request_id, int index, int total, 
+                                           maps_route_h route, void* user_data)
 {
+   // Handle the obtained route data
 
-	/* Handle obtained route data */
+   // Release the results 
+   maps_route_destroy(route);
 
-	/* Release results */
-	maps_route_destroy(route);
-	return true;
+   return true;
 }
-								
-								
-

-
-
Canceling the Service Request
- Hide -
-
-
To cancel a Geocode, Place Search or Routing request use maps_service_cancel_request().
-
```
-/* Cancel the request with a specified id */
+
```
+

+ +

+ +

To cancel a geocode, place search, or routing request, use the maps_service_cancel_request() function:

+// Cancel the request with a specified ID
 error = maps_service_cancel_request(maps, request_id);
 
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-

- -

-
-
Recognizing Address information
- Hide -
-
-
The Reverse Geocode request is run with maps_service_reverse_geocode() (see - section Using Geocode and Reverse Geocode Services).
-
The result is retrieved from the Maps Service via maps_service_reverse_geocode_cb - callback as a structured address data of the specified place.
-
Parse the address information using following functions:
-
```
-/* Obtain building number */
+
```
+ +
Recognizing the Address Information
+ +
The result of the reverse geocode request (maps_service_reverse_geocode()) is retrieved from the map service using the maps_service_reverse_geocode_cb() callback. The result is structured address data of the specified place.
+
Parse the address information using the following functions:
+
```
+// Obtain the building number 
 char *building_number = NULL;
-error = maps_address_get_building_number(address, &building_number);
+error = maps_address_get_building_number(address, &building_number);
 
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Use building_number */
+// Use the building_number
 
 free(building_number);
 
-/* Obtain street name */
+// Obtain the street name
 char *street = NULL;
-error = maps_address_get_street(address, &street);
+error = maps_address_get_street(address, &street);
 
-if(error != MAPS_ERROR_NONE) {
-/* Handle Error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Use street */
+// Use the street name
 
 free(street);
-							
```
-
Similarly get other address features using:
-
- maps_address_get_district()
  -
- maps_address_get_city()
  -
- maps_address_get_state()
  -
- maps_address_get_country()
  -
- maps_address_get_country_code()
  -
- maps_address_get_county()
  -
- maps_address_get_postal_code()
  -
- maps_address_get_freetext()
  -
-
-

- Hide -

The place search request is run with maps_service_search_place() , - maps_service_search_place_by_area() or - maps_service_search_place_by_address() - (see section Using Place Search Services).

The result is retrieved from the Maps Service via multiple iterations of - maps_service_search_place_cb callback with an instance - of place data passed into.

The place data can be managed with a handle of type maps_place_h.

Different Maps Providers are capable to provide different sets of place data features and below is demonstrates - how to check ahead if a specified feature is available with your Maps Provider.

Some Maps Providers may extend place data features with extra properties that are not specified in the Maps API. - Such properties are organized as a key-value storage where keys are the names of the properties. - The method of iterating through extra properties of place data is demonstrated in the end of this section.

-
-

To get particular features of the place information, such as place name, location and rating, use following functions. -

To obtaining the place name use - maps_place_get_name().

-/* Obtain place name */
+

Similarly, you can get other address features using the following functions:

maps_address_get_district()
maps_address_get_city()
maps_address_get_state()
maps_address_get_country()
maps_address_get_country_code()
maps_address_get_county()
maps_address_get_postal_code()
maps_address_get_freetext()

+ + +

+ +

The result of the place search request (maps_service_search_place(), maps_service_search_place_by_area(), or maps_service_search_place_by_address()) is retrieved from the map service using multiple iterations of the maps_service_search_place_cb() callback. The result is an instance of place data.

+ + + + + + + + + + +

Note

Different map providers are capable of providing different sets of place data features. Some map providers can extend the place data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties. + +

If your map provider does not support a specific feature, the get function for the feature returns an error. To prevent problems, you can check which data features are available in your map provider using the maps_service_provider_is_data_supported() function.

+ +

To parse place data:

+ +

To get the place information features, such as place name, location, and rating, use the following functions with a maps_place_h place handle:

+ +

To obtain the place name, use the maps_place_get_name() function: +

+// Obtain the place name
 char *name = NULL;
-error = maps_place_get_name(place, &name);
-if(error != MAPS_ERROR_NONE) {
-/* Handle Error */
+error = maps_place_get_name(place, &name);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
 
-/* Use place name */
+// Use the place name
 
 free(name);
-

To obtaining the place location use - maps_place_get_location().

-/* Obtain place location */
+To obtain the place location, use the maps_place_get_location() function:
++// Obtain the place location
 maps_coordinates_h location = NULL;
-error = maps_place_get_location(place, &location);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_place_get_location(place, &location);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Use route location */
+// Use the place location
 
 maps_coordinates_destroy(location);
-								
-								
+

To obtaining the place rating use - maps_place_get_rating().

-/* Obtain place rating */
+To obtain the place rating, use the maps_place_get_rating() function:
++// Obtain the place rating
 maps_place_rating_h rating = NULL;
-error = maps_place_get_rating(place, &rating);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_place_get_rating(place, &rating);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Use route rating */
+// Use the place rating
 
 maps_place_rating_destroy(rating);
-								
-								
-
-

To obtain other place features follow the same approach using functions:

maps_place_get_id()
-
maps_place_get_address()
-
maps_place_get_distance()
-
maps_place_get_uri()
-
maps_place_get_supplier_link()
-
maps_place_get_related_link()
-

- -
-

To get lists of features of the place information, such as categories, reviews and attributes, use following iterating functions.

To obtaining the list of place categories use - maps_place_foreach_category().

-/* Obtain a list of place categories */
-error = maps_place_foreach_category(place, __maps_place_categories_cb,
-	user_data);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
-}
-

The callback - __maps_place_categories_cb() should be implemented as following:

-static bool __maps_place_categories_cb(int index, int total,
-	maps_place_category_h category, void* user_data)
+

+ +

To obtain other place features, follow the same approach using the following functions:

maps_place_get_id()
maps_place_get_address()
maps_place_get_distance()
maps_place_get_uri()
maps_place_get_supplier_link()
maps_place_get_related_link()

+ +

To get lists of place information features, such as categories, reviews, and attributes, use the following iterating functions:

To obtain a list of place categories, use the maps_place_foreach_category() function: +

+// Obtain a list of place categories 
+error = maps_place_foreach_category(place, __maps_place_categories_cb, user_data);
+if (error != MAPS_ERROR_NONE) 
 {
-
-	/* Handle obtained place category data */
-
-	/* Release results */
-	maps_place_category_destroy(category);
-	return true;
-}
-

To obtain other place feature lists follow the same approach using functions:

maps_place_foreach_attribute
-
maps_place_foreach_contact
-
maps_place_foreach_editorial
-
maps_place_foreach_image
-
maps_place_foreach_review
-

- -
-

Some place data features may not be supported by your Maps Provider.

For example, the Maps Providers may not support place rating data. In this case the function - maps_place_get_rating() will return error - code MAPS_ERROR_NOT_SUPPORTED and the value of - output parameter rating will be meaningless.

As mentioned in the section Initializing the Maps Services, you can check ahead which - data features are available in your Maps Provider - using maps_service_provider_is_data_supported().

-/* Check if route path data is supported */
-bool is_place_rating_supported = false;
-error = maps_service_provider_is_data_supported(maps,
-	MAPS_PLACE_RATING, &is_place_rating_supported);
-
-if(error == MAPS_ERROR_NONE) {
-	if(is_place_rating_supported) {
-
-		/* Obtain place rating */
-	        maps_place_rating_h rating = NULL;
-		error = maps_place_get_rating(place, &rating);
-		if(error != MAPS_ERROR_NONE) {
-			/* Handle Error */
-		}
-
-		/* Use route name */
-
-		maps_place_rating_destroy(rating);
-	}
-} else {
-	/* Handle Error */
+   // Error handling
 }
-

- -
-

Some Maps Providers may extend place data features defined in Maps API with specific extra properties.

To iterate through retrieved extra properties use - maps_place_foreach_property().

-/* Obtain Maps Provider specific place data properties */
-error = maps_place_foreach_property(place, __maps_place_properties_cb,
-	user_data);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
-}
-

The callback - __maps_place_properties_cb() should be implemented as following:

-static bool __maps_place_properties_cb(int index, int total,
-	char* key, void* value, void* user_data)
-{
+

Implement the __maps_place_categories_cb() callback: +

+static bool __maps_place_categories_cb(int index, int total, maps_place_category_h category, void* user_data)
+{
+   // Handle the obtained place category data
+
+   // Release the results
+   maps_place_category_destroy(category);
+
+   return true;
+}
+

To obtain other place feature lists, follow the same approach using the following functions:

maps_place_foreach_attribute()
maps_place_foreach_contact()
maps_place_foreach_editorial()
maps_place_foreach_image()
maps_place_foreach_review()

+ +

To get the extra properties that some map providers provide to extend the place data features defined in the Maps Service API:

To iterate through the retrieved extra properties, use the maps_place_foreach_property() function: +

+// Obtain the map provider-specific place data properties
+error = maps_place_foreach_property(place, __maps_place_properties_cb, user_data);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-

- -

- - - -

- Hide -

The route calculation request is run with maps_service_search_route() or - maps_service_search_route_waypoints() (see - section Using Routing Service). - The result is retrieved from the Maps Service via multiple iterations of - maps_service_search_route_cb callback with an instance of route data passed into. - The route data can be managed with a handle of type maps_route_h.

Different Maps Providers are capable to provide different sets of route data features and below is demonstrated - how to check ahead if a specified feature is available with your Maps Provider.

Some Maps Providers may extend route data features with extra properties that are not specified in the Maps API. Such properties are organized as a - key-value storage where keys are the names of the properties. - The method of iterating through extra properties of place data is demonstrated in the end of this section.

-
-

To get particular features of the route information, such as route id, origin, destination and total distance, use following functions. -

To obtaining the route id use - maps_route_get_route_id().
-
```
-/* Obtain route id */
+
```
+

Implement the __maps_place_properties_cb() callback: +

+static bool __maps_place_properties_cb(int index, int total, char* key, void* value, void* user_data)
+{
+   // Handle the obtained property:
+   // property_name: key
+   // property_value: value
+
+   // Release the property name and value
+   free(key);
+   free(value);
+
+   return true;
+}
+

+ +

+ + +

The result of the route calculation request (maps_service_search_route() or maps_service_search_route_waypoints()) is retrieved from the map service using multiple iterations of the maps_service_search_route_cb() callback. The result is an instance of route data.

+ + + + + + + + + + +

Note

Different map providers are capable of providing different sets of route data features. Some map providers can extend the route data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties. + +

+ + +

To parse route data:

+ +

To get the route information features, such as route ID, origin, destination, and total distance, use the following functions with a maps_route_h place handle:

To obtain the route ID, use the maps_route_get_route_id() function: +

+// Obtain the route ID
 char *id = NULL;
-error = maps_route_get_route_id(route, &id);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_route_get_route_id(route, &id);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
-/* Use route id */
+// Use the route ID
 
 free(id);
-

To obtaining the route origin and destination use - maps_route_get_origin() and - maps_route_get_destination() respectively.
-
```
-/* Obtain route origin and destination */
+
```
+

To obtain the route origin and destination, use the maps_route_get_origin() and maps_route_get_destination() functions: +

+// Obtain the route origin and destination
 maps_coordinates_h origin = NULL, destination = NULL;
-error = maps_route_get_origin(route, &origin);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_route_get_origin(route, &origin);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
-error = maps_route_get_destination(route, &destination);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_route_get_destination(route, &destination);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
 
-/* Use route origin and destination */
+// Use the route origin and destination
 
 maps_coordinates_destroy(origin);
 maps_coordinates_destroy(destination);
-

To obtaining the route total distance use - maps_route_get_total_distance().

-/* Obtain route total distance */
+To obtain the route total distance, use the maps_route_get_total_distance() function:
++// Obtain the total route distance
 double total_distance = .0;
-error = maps_route_get_total_distance(route, &total_distance);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
-}
-/* Use route total distance */
-								
-								
-

To obtain other place features follow the same approach using functions:

maps_route_get_bounding_box()
-
maps_route_get_transport_mode()
-
maps_route_get_total_duration()
-
maps_route_get_distance_unit()
-
maps_place_get_supplier_link()
-
maps_place_get_related_link()
-

-
-

To get lists of features of the route information, such as path or list of segments, use following iterating functions.

To obtaining the list of geographical points, defining the route, use - maps_route_foreach_path().

+error = maps_route_get_total_distance(route, &total_distance);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
+}
+// Use the total route distance
+

To obtain other route features, follow the same approach using the following functions:

maps_route_get_bounding_box()
maps_route_get_transport_mode()
maps_route_get_total_duration()
maps_route_get_distance_unit()
maps_place_get_supplier_link()
maps_place_get_related_link()

To get lists of route information features, such as path or list of segments, use the following iterating functions:

To obtain the list of geographic points defining the route, use the maps_route_foreach_path() function: +

 error = maps_route_foreach_path(route, __maps_route_path_cb, user_data);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-

The callback - __maps_route_path_cb() should be implemented as following:

-static bool __maps_route_path_cb(int index, int total,
-	maps_coordinates_h coordinates, void* user_data)
+

Implement the __maps_route_path_cb() callback: +

+static bool __maps_route_path_cb(int index, int total, maps_coordinates_h coordinates, void* user_data)
 {
+   // Handle the obtained route path coordinates
 
-	/* Handle obtained coordinates of route path */
+   // Release the results
+   maps_coordinates_destroy(coordinates);
 
-	/* Release results */
-	maps_coordinates_destroy(coordinates);
-	return true;
+   return true;
 }
-

To obtaining the list of route segment use - maps_route_foreach_segment().

+To obtain the list of route segments, use the maps_route_foreach_segment() function:
+ error = maps_route_foreach_segment(route, __maps_route_segment_cb, user_data);
-if(error != MAPS_ERROR_NONE)
+if (error != MAPS_ERROR_NONE)
 {
-	/* Handle Error */
+   // Error handling
 }
-								
-								
+

The callback - __maps_route_segment_cb() should be implemented as following:

+Implement the __maps_route_segment_cb() callback:
+ static bool __maps_route_segment_cb(int index, int total,
-	maps_route_segment_h segment, void* user_data)
+maps_route_segment_h segment, void* user_data)
 {
+   // Handle the obtained route segment
 
-	/* Handle obtained segment of route */
+   // Release the results
+   maps_route_segment_destroy(segment);
 
-	/* Release results */
-	maps_route_segment_destroy(segment);
-	return true;
-}
-								
-								
-

-
-

Different Maps Providers may provide the route data in different ways.

For example, one Maps Provider may represent the route as a list of geographical coordinates while another may define it as a list of segments. - Attempt to get unsupported features will causse error code MAPS_ERROR_NOT_SUPPORTED. - To check which features of route data is valuable use maps_service_provider_is_data_supported() as mentioned in - section Initializing the Maps Services. -

To obtain route path use following: - maps_route_foreach_path().

-/* Check if route path data is supported */
-bool is_route_path_supported = false;
-error = maps_service_provider_is_data_supported(maps,
-	MAPS_ROUTE_PATH, &is_route_path_supported);
-
-if(error == MAPS_ERROR_NONE) {
-	if(is_route_path_supported) {
-
-		/* Obtain route path */
-		error = maps_route_foreach_path(route, __maps_route_path_cb,
-								user_data);
-		if(error != MAPS_ERROR_NONE) {
-			/* Handle Error */
-		}
-	}
-} else {
-	/* Handle Error */
-}
-

To obtain route segments use following: - maps_route_foreach_path().

-/* Check if route segment data is supported */
-
-bool is_route_segment_path_supported = false;
-error = maps_service_provider_is_data_supported(maps,
-	MAPS_ROUTE_SEGMENTS_PATH, &is_route_segment_path_supported);
-
-bool is_route_segment_maneuvers_supported = false;
-error = maps_service_provider_is_data_supported(maps,
-	MAPS_ROUTE_SEGMENTS_MANEUVERS, &is_route_segment_maneuvers_supported);
-
-if(error == MAPS_ERROR_NONE) {
-	if(is_route_segment_path_supported
-		|| is_route_segment_maneuvers_supported) {
-
-		/* Obtain route segments */
-		error = maps_route_foreach_segment(route,
-				__maps_route_segment_cb, user_data);
-		if(error != MAPS_ERROR_NONE) {
-			/* Handle Error */
-		}
-	}
-} else {
-	/* Handle Error */
+   return true;
 }
-

-
-

Some Maps Providers may extend route data features defined in Maps API with specific extra properties.

To iterate through retrieved extra properties use - maps_route_foreach_property().

-/* Obtain Maps Provider specific route data properties */
-error = maps_route_foreach_property(route, __maps_route_properties_cb,
-	user_data);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
-}
-

The callback - __maps_route_properties_cb() should be implemented as following:

-static bool __maps_route_properties_cb(int index, int total,
-	char* key, void* value, void* user_data)
-{
+

To get the extra properties that some map providers provide to extend the route data features defined in the Maps Service API:
- /* Release property name and value */ - free(key); - free(value); - return true; +
1. To iterate through the retrieved extra properties, use the maps_route_foreach_property() function: +
```
+// Obtain the map provider-specific route data properties
+error = maps_route_foreach_property(route, __maps_route_properties_cb, user_data);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
-								
```
  -
-

- - - -

- Hide -

All Maps API requests may be tuned with additional set of preferences.

Preparing and sending the preference parameter via API request - allows the Maps Provider to generate more accurate results.

- -

To prepare preferences for Place Search Service use - maps_preference_set_property() with following keys:
-
- MAPS_PLACE_FILTER_TYPE
  -
- MAPS_PLACE_FILTER_SORT_BY
  -
-
The example from the section Using Place Search Services may be edited as following:
-
```
-/* Create extra preferences for Place Search Service */
-error = maps_preference_create(&preference);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+
```
+

Implement the __maps_route_properties_cb() callback: +

+static bool __maps_route_properties_cb(int index, int total, char* key, void* value, void* user_data)
+{
+   // Handle the obtained property:
+   // property_name: key
+   // property_value: value
+
+   // Release the property name and value
+   free(key);
+   free(value);
+
+   return true;
+}
+

+ +

+ +

All Maps Service API requests can be customized with additional preferences. Preparing and sending the preference parameter with the service request allows the map provider to generate more accurate results.

To customize the service request:

To prepare preferences for the place search service, use the maps_preference_set_property() function with the following keys: +

MAPS_PLACE_FILTER_TYPE
MAPS_PLACE_FILTER_SORT_BY

The example from Using the Place Search Service can be modified as follows to include the customized preferences:

+// Create extra preferences for the place search service
+error = maps_preference_create(&preference);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
-error = maps_preference_set_property(preference, MAPS_PLACE_FILTER_TYPE, "restaurant");
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_preference_set_property(preference, MAPS_PLACE_FILTER_TYPE, "restaurant");
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling
 }
 
 maps_coordinates_h position = NULL;
-/* Create coordinates with maps_coordinates_create() */
+// Create the coordinates with maps_coordinates_create()
 
 int distance = 500;
-error = maps_service_search_place(maps,
-	position,
-	distance,
-	filter,
-	preference,
-	__maps_service_search_place_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_service_search_place(maps, position, distance, filter, preference,  
+                                  __maps_service_search_place_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
 
 maps_preference_destroy(preference);
-

To prepare preferences for Routing Service use following functions: -
- maps_preference_set_route_optimization()
  -
- maps_preference_set_route_transport_mode()
  -
- maps_preference_set_route_feature_weight()
  -
- maps_preference_set_route_feature()
  -
-
Also use maps_preference_set_property() with following keys:
-
- MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID
  -
- MAPS_ROUTE_STRUCTED_ADDR_TO_AVOID
  -
- MAPS_ROUTE_CIRCLE_AREA_TO_AVOID
  -
- MAPS_ROUTE_RECT_AREA_TO_AVOID
  -
- MAPS_ROUTE_GEOMETRY_BOUNDING_BOX
  -
- MAPS_ROUTE_GEOMETRY_RETRIEVAL
  -
- MAPS_ROUTE_INSTRUCTION_GEOMETRY
  -
- MAPS_ROUTE_INSTRUCTION_BOUNDING_BOX
  -
- MAPS_ROUTE_INSTRUCTION_RETRIEVAL
  -
- MAPS_ROUTE_REALTIME_TRAFFIC
  -
- -
The example from the section Using Routing Service may be edited as following:
-
```
-/* Create extra preferences for Place Search Service */
-error = maps_preference_create(&preference);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+
```
+

To prepare preferences for the routing service, use the following functions: +

maps_preference_set_route_optimization()
maps_preference_set_route_transport_mode()
maps_preference_set_route_feature_weight()
maps_preference_set_route_feature()

You can also use the maps_preference_set_property() function with the following keys:

MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID
MAPS_ROUTE_STRUCTED_ADDR_TO_AVOID
MAPS_ROUTE_CIRCLE_AREA_TO_AVOID
MAPS_ROUTE_RECT_AREA_TO_AVOID
MAPS_ROUTE_GEOMETRY_BOUNDING_BOX
MAPS_ROUTE_GEOMETRY_RETRIEVAL
MAPS_ROUTE_INSTRUCTION_GEOMETRY
MAPS_ROUTE_INSTRUCTION_BOUNDING_BOX
MAPS_ROUTE_INSTRUCTION_RETRIEVAL
MAPS_ROUTE_REALTIME_TRAFFIC

+ +

The example from Using the Routing Service can be modified as follows to include the customized preferences:

+// Create extra preferences for the routing service
+error = maps_preference_create(&preference);
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
-error = maps_preference_set_property(preference, MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID, "Suwon, Digital City");
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+error = maps_preference_set_property(preference, MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID, "Suwon, Digital City");
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
 error = maps_preference_set_route_optimization(preference, MAPS_ROUTE_TYPE_SHORTEST);
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
 
 maps_coordinates_h origin = NULL, destination = NULL;
-/* Create coordinates with maps_coordinates_create() */
-
-error = maps_service_search_route(maps,
-	origin,
-	destination,
-	preference,
-	__maps_service_search_route_cb,
-	user_data,
-	&request_id);
-
-if(error != MAPS_ERROR_NONE) {
-	/* Handle Error */
+// Create the coordinates with maps_coordinates_create()
+
+error = maps_service_search_route(maps, origin, destination, preference, 
+                                  __maps_service_search_route_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE) 
+{
+   // Error handling 
 }
 
 maps_preference_destroy(preference);
-

In case of specific preferences, required by your Maps Provider, use - maps_preference_set_property() with key-value pairs, - defined in the appropriate Maps Provider documentation. -

- - -

- - - - -

+ + + +

If your map provider requires any specific preferences, use the maps_preference_set_property() function with key-value pairs defined in the appropriate map provider documentation.

+ + + + + +

- + diff --git a/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm index 64be9b3..c75f386 100644 --- a/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm @@ -16,53 +16,53 @@ -

This tutorial demonstrates how you can send email messages with attachments.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Email API basics by learning about:

Initializing the Email Service +
Initializing the Email Service
Initialize the email service for use.
Creating and Sending Email +
Creating and Sending Email
Create and send a message after adding attachments and recipients.

Show All
Hide All

- -

-Hide -

+ +

To initialize the email service:

To use the functions and data types of the Email API, include the <email.h> header file in your application:

@@ -73,21 +73,16 @@
 
 To build your application with the Email API, package dependencies and the build option must be configured: 
 
-Add the below line to the spec file.
+Add the below line to the spec file.
 
 BuildRequires:capi-messaging-email
 
 Add capi-messaging-email to pkg_check_modules in the CMakeList.txt file.
 
 The email service does not need any initialization or connection opening before the API usage. Email creation and sending functions can be used without any additional preparation.
-

-
-
Creating and Sending Email
-Hide -
-
+ +
Creating and Sending Email
+
To create and send email messages:
1. Create an email message. @@ -177,11 +172,6 @@ if (error_code != EMAILS_ERROR_NONE) { dlog_print(DLOG_INFO, LOG_TAG, "Failed to delete email message\n"); }
-
-

diff --git a/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm b/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm index bed3fa4..194305d 100644 --- a/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm @@ -16,16 +16,17 @@ -

+ @@ -33,14 +34,17 @@

The messaging tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The messaging tutorials demonstrate how to use the following features in creating Tizen native applications:

Messages: Creating and Sending SMS and MMS Messages
Demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.
Email: Managing Emails
Demonstrates how you can send emails with attachments.
Push: Using the Push Service
Demonstrates how you can receive notifications through the Internet even when the application is not running.
Messages: Creating and Sending SMS and MMS Messages
Demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.
Push: Using the Push Service
Demonstrates how you can receive notifications through the Internet even when the application is not running.

The following tutorials apply in mobile applications only:

Email: Managing Emails
Demonstrates how you can send emails with attachments.

diff --git a/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm index 2e71161..9a5c0bf 100644 --- a/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm @@ -16,73 +16,64 @@ -

This tutorial demonstrates how you can use the Tizen Push Service to allow applications in a mobile device to receive notifications through the Internet even when the applications are not running.

Become familiar with the Push API basics by learning about:

Initializing the Push Service +
Initializing the Push Service
Initialize the push service for use.
Connecting to the Push Service +
Connecting to the Push Service
Establish a socket connection to the push service.
Registering with the Push Server +
Registering with the Push Server
Register and unregister with the push server.
Notification management
- Sending Push Notifications +
- Sending Push Notifications
  Send push notifications from the application server to an application.
- Handling Push Notifications +
- Handling Push Notifications
  Receive notifications at different states.
Managing Security +
Managing Security
Ensure the security of notifications containing sensitive information.

Show All
Hide All

- -

-
-
Initializing the Push Service
-Hide -
-
+ +
Initializing the Push Service
+
The following figure illustrates the architecture of the Tizen push service.
-
+
Figure: Tizen push service architecture
+

The following steps illustrate a typical scenario for using the push messaging service on a Tizen device:
1. When an application is installed and launched, it sends a registration request to Tizen push server through the push service.
-
-

-Hide -

+ +

To request or receive push notifications, establish a socket connection to the push service. All the information regarding this connection must be controlled by a connection handle which can be defined as a global variable:

@@ -249,10 +235,10 @@ push_conn = NULL;
 Handle state transitions.
 After the connection to the service is made, your application is notified whenever the connection state changes. This notification is conducted through the _state_cb() callback, which is defined in the push_service_connect() function. The following figure illustrates the possible states.
 
-
+
 
 Once launched, your application is in the INITIAL state. When the application establishes a connection to the service using the push_service_connect() function, the state becomes either UNREGISTERED or REGISTERED:
-If your application is currently registered to the push server, the service forces your application to transit from the INITIAL state to the REGISTERED state. In this case, your application can request deregistration to the push server through the push service using the push_service_deregister() function. If this request is approved by the push server, the state transits to UNREGISTERED.
+If your application is currently registered to the push server, the service forces your application to transit from the INITIAL state to the REGISTERED state. In this case, your application can request deregistration to the push server through the push service using the push_service_deregister() function. If this request is approved by the push server, the state transits to UNREGISTERED.
 If your application is not currently registered to the push server, the state transits from the INITIAL state to the UNREGISTERED state. In this case, your application can request registration to the push server through the push service using the push_service_register() function. If this request is approved by the push server, the state transits to REGISTERED.
 When an error occurs, the state transits to ERROR.
 
@@ -288,14 +274,9 @@ static void _state_cb(push_service_state_e state, const char *err, void *user_da
 In the above example, the _on_state_registered(), _on_state_unregistered(), and _on_state_error() functions contain the actions for the REGISTERED, UNREGISTERED, and ERROR states, respectively. Your application does not need to handle the INITIAL state because it is maintained internally, and this callback function is never invoked in this state. The second argument, err, is the error message from the push service when the state becomes ERROR. Consequently, only the _on_state_error() function takes this argument while others ignore it.
 
 
-

-
-
Registering with the Push Server
-Hide -
-
+ +
Registering with the Push Server
+
To receive push notifications, your application must send a registration request to the Tizen push server. When the server receives this request, it assigns a registration ID that is unique to your application on the particular device. When sending a notification from your application server, this registration ID is used as a destination address of your application. If your application no longer needs to receive push notifications, it needs to send a deregistration request to the server.
1. Your application transits to the REGISTERED state in one of the following cases:
  -
-
-

-Hide -

Once your application successfully sends its registration ID to your application server, you are ready to send push notifications from your application server to the application on that particular device. In this tutorial, a simple instruction for sending a push notification to 1 device is provided. For advanced features, refer to the detailed guide from the push server team.

To send push notifications:

Determine the RQM server.
The request manager (RQM) servers collect your push notifications before sending them to your applications. The RQM server must be chosen based on the first 2 digits of the registration ID.
@@ -558,7 +533,7 @@ push_service_deregister(push_conn, _dereg_result_cb, NULL);

Send notifications.

With the message field that you just created, you can construct a notification using a JSON query and send it to the RQM server using the POST method. The following list contains the details:

URI: URI of the RQM server chosen based on the first 2 digits of the registration ID
Method: POST
Data: JSON

reliableOption

NoReliable: Do not send any acknowledgment back to a third party server and do not store the notification in the push server if the push client did not receive the notification.
Transport: Send an acknowledgment back to the third party server when the push client receives the notification.
Application: Send an acknowledgment back to the third party server when a third party application checks the notification.

Example request -

+ {
-   "encoding" : "base64" // Optional
+   "encoding" : "base64" <!--Optional-->
    "regID" : "ab123456",
    "requestID" : "0000001",
-   "sender" : "oscal", // Optional
-   "type" : 0 // Optional
-   "message" : "badgeOption=INCREASE&badgeNumber=1&action=ALERT&alertMessage=Hi", // Optional
-   "appData" : "{id:asdf&passwd:1234}", // Optional, (Opaque)
-   "delayDate" : 60, // Optional
-   "reliableOption" : "Transport", // Optional 
-   "sessionInfo" : "002002", // Optional
-   "timeStamp" : 1234567890, // Optional
+   "sender" : "oscal", <!--Optional-->
+   "type" : 0 <!--Optional-->
+   "message" : "badgeOption=INCREASE&badgeNumber=1&action=ALERT&alertMessage=Hi", <!--Optional-->
+   "appData" : "{id:asdf&passwd:1234}", <!--Optional, (Opaque)-->
+   "delayDate" : 60, <!--Optional-->
+   "reliableOption" : "Transport", <!--Optional-->
+   "sessionInfo" : "002002", <!--Optional-->
+   "timeStamp" : 1234567890, <!--Optional-->
 }

-
-
Handling Push Notifications
-Hide -
-
+ +
Handling Push Notifications
+
When a notification arrives at the device, it is delivered to the destination application in a manner that depends on whether the application is running.

To handle incoming push notifications:
-
-
-
-
Managing Security
-Hide -
-
+ +
Managing Security
+
When you send a notification with sensitive information, be aware of the chance that the notification is hijacked by someone else. It is your responsibility to keep such sensitive information safe from malicious access. The following instructions are strongly recommended:
-
-

diff --git a/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm b/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm index 2e89c33..7ea74d4 100644 --- a/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm @@ -16,59 +16,48 @@ -

This tutorial demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.

Become familiar with the Messages API basics by learning about:

Initializing the Messages Service +
Initializing the Messages Service
Initialize the Messages service for use.
Fetching Messages from a Specified Message Box +
Fetching Messages from a Specified Message Box
Fetch all SMS or MMS messages from a given message box (such as Inbox or the sent items).
Sending SMS or MMS Messages +
Sending SMS or MMS Messages
Create and send a message, and add attachments to MMS messages.

Show All
Hide All

- -

-
-
Initializing the Messages Service
-Hide -
-
+
Initializing the Messages Service
+
To initialize the Messages service:
-
1. To use the functions and data types of the Messages API, include the <messages.h> header file in your application:
  +
  1. To use the functions and data types of the Messages API (in mobile and wearable applications), include the <messages.h> header file in your application:
```
 #include <messages.h>
 
```
  -
-
-
-
Fetching Messages from a Specified Message Box
-Hide -
-
+ +
Fetching Messages from a Specified Message Box
+
To fetch messages from a message box, use the messages_foreach_message() function with the appropriate parameters. One of these parameters is the callback function called for each message matching the search criteria.
1. Define the message searching callback function. -
  1. +
    1. The callback function signature has to match the following typedef:
      
      typedef bool(* messages_search_cb)(messages_message_h msg, int index, int result_count, int total_count, void *user_data)
    2. Within the callback, to print the message content (or to show it to the user in any other way), extract its text, address, and type as below:
      @@ -144,7 +128,7 @@ free(address);
  2. Call the search function.
    With a connection opened and callback prepared, the messages_foreach_message() function can be called to retrieve all existing messages stored in different mailboxes. The function arguments allow to select only a subset of all available messages based on:
    -
    - Message box type (inbox, outbox, sent items, drafts, or all of them)
  -
-
-
-
Sending SMS or MMS Messages
-Hide -
-
+ +
Sending SMS or MMS Messages
+
The Messaging API provides functions to send SMS (Short Message Service) messages and MMS (Multimedia Message Service) messages with attachments (image or video files):
1. Create a message.
  Before sending a message, open a connection to the messaging service.
  @@ -203,7 +182,7 @@ if (error_code != MESSAGES_ERROR_NONE) }
2. Set a subject and add an attachment (note that sending MMS is not supported on the Emulator). -
  - You can set a message subject and add attachments to MMS messages. Set the subject:
    +
    - You can set a message subject and add attachments to MMS messages. Set the subject:
      
      error_code = messages_mms_set_subject(msg_hndl, "MMS test"); if (error_code != MESSAGES_ERROR_NONE) { @@ -217,7 +196,7 @@ if (error_code != MESSAGES_ERROR_NONE) }
  - Send the message. -
    1. SMS and MMS sending is an asynchronous operation, and a callback function is needed to receive the sending operation status. This function has to match the following typedef:
      +
      SMS and MMS sending is an asynchronous operation, and a callback function is needed to receive the sending operation status. This function has to match the following typedef:
      
      typedef void(* messages_sent_cb)(messages_sending_result_e result, void *user_data)
      
      Using the first parameter in the callback (result), the messaging service informs you about the sending status. It can be used to determine whether the sending succeeded:
      
      static void sent_msg_cb(messages_sending_result_e result, void *user_data) @@ -237,12 +216,6 @@ if (error_code != MESSAGES_ERROR_NONE) { dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to send message"); }
    -
-

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 525ee90..ea87393 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 @@ -277,7 +277,7 @@ void _audio_io_stream_write_cb(audio_out_h handle, size_t nbytes, void *userdata ret = fread(buffer, 1, nbytes, fp_r); ret = audio_out_write(handle, buffer, nbytes); - if(ret > AUDIO_IO_ERROR_NONE) + if (ret > AUDIO_IO_ERROR_NONE) { // Error handling } diff --git a/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm index aad7a3f..6ba0573 100644 --- a/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm @@ -16,68 +16,57 @@ -

This tutorial demonstrates how you can start a camera preview and take a photo. This tutorial also demonstrates how you can configure a camera by setting selected attributes.

Become familiar with the Camera API basics by learning about:

Initializing the Camera +
Initializing the Camera
Initialize the camera for use.
Taking a Photo +
Taking a Photo
Start a camera preview and take a photo.
Setting Camera Attributes +
Setting Camera Attributes
Set the camera preview, zoom, and brightness attributes.
Releasing Resources +
Releasing Resources
Stop the camera, unregister the callback functions, and destroy the camera handle and release all its resources.

Show All
Hide All

- -

-
-
Initializing the Camera
-Hide -
-
+ +
Initializing the Camera

Before you can start a camera preview or take a photo:
-
1. To use the functions and data types of the Camera API, include the <camera.h> header file in your application:
  +
  1. To use the functions and data types of the Camera API (in mobile and wearable applications), include the <camera.h> header file in your application:
```
 #include <camera.h>
 
```
  2. -
    Set the display for showing preview images by using the camera_set_display() function with 1 of the camera display types (CAMERA_DISPLAY_TYPE_EVAS or CAMERA_DISPLAY_TYPE_OVERLAY) defined in the camera_display_type_e enumeration:
    +
    Set the display for showing preview images by using the camera_set_display() function with 1 of the camera display types (CAMERA_DISPLAY_TYPE_EVAS or CAMERA_DISPLAY_TYPE_OVERLAY) defined in the camera_display_type_e enumeration (in mobile and wearable applications):
    @@ -176,7 +165,7 @@ error_code = camera_get_state(cam_data.g_camera, &state);
    
    -
    - Example: Set the display according to the camera_display_type_e +
      Example: Set the display according to the camera_display_type_e
      int error_code = CAMERA_ERROR_NONE; @@ -225,7 +214,7 @@ static void create_base_gui (camdata *cam_data, camera_display_type_e display_ty evas_object_color_set(cam_data->rect, 0, 0, 0, 0); evas_object_render_op_set(cam_data->rect, EVAS_RENDER_COPY); evas_object_size_hint_weight_set(cam_data->rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); - // Show window after base gui is set up + // Show the window after the base GUI is set up evas_object_show(cam_data->win); break; @@ -286,7 +275,7 @@ error_code = camera_set_preview_resolution(cam_data.g_camera, resolution[0], res error_code = camera_set_capture_format(cam_data.g_camera, CAMERA_PIXEL_FORMAT_JPEG);
      -
      The camera_pixel_format_e enumeration defines the available capture formats.
      +
      The camera_pixel_format_e enumeration (in mobile and wearable applications) defines the available capture formats.
      
      @@ -304,7 +293,7 @@ error_code = camera_set_capture_format(cam_data.g_camera, CAMERA_PIXEL_FORMAT_JP error_code = camera_set_preview_cb(cam_data.g_camera, _camera_preview_cb, NULL); -
      The following example code implements the _camera_preview_cb() callback function. The callback function starts auto-focusing using the camera_start_focusing() function, whose parameters are the camera_h camera handle and a Boolean flag defining whether the camera must continuously try to focus. The g_enable_focus flag is set to false to prevent the capturing process from restarting. If the result value of camera_start_focusing() with continuous mode true is CAMERA_ERROR_NOT_SUPPORTED, please set second parameter value as false
      +
      The following example code implements the _camera_preview_cb() callback function. The callback function starts auto-focusing using the camera_start_focusing() function, whose parameters are the camera_h camera handle and a Boolean flag defining whether the camera must continuously try to focus. The g_enable_focus flag is set to false to prevent the capturing process from restarting. If the result value of the camera_start_focusing() function with the continuous mode set to true is CAMERA_ERROR_NOT_SUPPORTED, set the second parameter value as false.
      
      static void _camera_preview_cb(camera_preview_data_s *frame, void *user_data) @@ -314,10 +303,12 @@ static void _camera_preview_cb(camera_preview_data_s *frame, void *user_data) if (g_enable_focus == true) { error_code = camera_start_focusing(cam_data.g_camera, true); + if (error_code == CAMERA_ERROR_NOT_SUPPORTED) { error_code = camera_start_focusing(cam_data.g_camera, false); } + g_enable_focus = false; } }
      @@ -353,14 +344,9 @@ static void _camera_focus_cb(camera_focus_state_e state, void *user_data)
  -
-
-
-
Taking a Photo
-Hide -
-
+ +
Taking a Photo
+
To take a photo:
1. Capture an image: -
  -
-
-
-
Setting Camera Attributes
-Hide -
-
+ +
Setting Camera Attributes
+
You can set the following additional camera attributes:
-
-
-
-
Releasing Resources
-Hide -
-
+ +
Releasing Resources
+
After you have finished working with the camera, stop the camera and clean up the application environment:
-
-

diff --git a/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm index 87f2295..084002c 100644 --- a/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm @@ -16,36 +16,37 @@ -

This tutorial demonstrates how you can convert, resize, rotate, and crop an image, and decode and encode a JPEG image.

@@ -53,49 +54,37 @@

Become familiar with the Image Util API basics by learning about:

Initializing Image Utilities +
Initializing Image Utilities
Initialize the image utilities for use.
Image manipulation
- Converting the Color Space +
- Converting the Color Space
  Convert an image from one color space to another.
- Resizing an Image +
- Resizing an Image
  Resize an image.
- Rotating an Image +
- Rotating an Image
  Rotate an image.
- Cropping an Image +
- Cropping an Image
  Crop an image.
Decoding from a File or Memory +
Decoding from a File or Memory
Decode a JPEG image from a file or memory.
Encoding to a File or Memory +
Encoding to a File or Memory
Encode raw image data to a JPEG file or to memory in JPEG format.

Show All
Hide All

- -

-
-
Initializing the Image Utilities
-Hide -
-
+
Initializing the Image Utilities
+
To initialize image utilities:
1. To use the functions and data types of the Image Util API, include the <image_util.h> header file in your application:
  +
2. To use the functions and data types of the Image Util API (in mobile and wearable applications), include the <image_util.h> header file in your application:
```
 #include <image_util.h>
 
```
-
-
-
-
Converting the Color Space
-Hide -
-
+ +
Converting the Color Space
+
To convert an image from one color space to another:
1. Create a transform handle to support the conversion. @@ -175,7 +159,7 @@ ret = image_util_transform_create(&handle); Note -
  - The function only converts the color space. It does not change the image width or height.
-
-
-
-
Resizing an Image
-Hide -
-
+ +
Resizing an Image
+
To resize an image:
1. Create a transform handle to support resizing.
  @@ -225,7 +204,7 @@ ret = image_util_transform_create(&handle); Note -
  - Since the source format is the same as the target format, you can ignore the format.
-
-
-
-
Rotating an Image
-Hide -
-
+ +
Rotating an Image
+
To rotate an image:
1. Create a transform handle to support rotating.
  @@ -261,7 +235,7 @@ ret = image_util_transform_create(&handle);
```
ret = image_util_transform_set_rotation(handle, rotation);
```
  The possible values for the rotation parameter are:
  -
-
-
-
-
Cropping an Image
-Hide -
-
+ +
Cropping an Image
+
To crop an image:
1. Create a transform handle to support cropping.
  @@ -338,23 +307,18 @@ ret = image_util_transform_create(&handle); Note -
  - Because of a YUV restriction, and because the crop start position can otherwise be set arbitrarily, the cropped image width and height must be even.
-
-
-
-
Decoding from a File or Memory
-Hide -
-
+ +
Decoding from a File or Memory
+
To decode a JPEG image:
-
- To decode from a file, use the image_util_decode_jpeg() function. +
  - To decode from a file, use the image_util_decode_jpeg() function.
    Manually allocate the memory for the image buffer based on a calculated buffer size.
    @@ -365,28 +329,18 @@ ret = image_util_transform_create(&handle);
    Manually allocate the memory for the image buffer based on a calculated buffer size.
```
ret = image_util_decode_jpeg_from_memory(jpeg_buffer, jpeg_size, colorspace, image_buffer, width, height, size);
```
  -
-
-
-
Encoding to a File or Memory
-Hide -
-
+ +
Encoding to a File or Memory
+
To encode a rotated or flipped image:
-
- To encode to a JPEG file, use the image_util_encode_jpeg() function: +
  - To encode to a JPEG file, use the image_util_encode_jpeg() function:
```
ret = image_util_encode_jpeg(img_flip_target, dest_width, dest_height, colorspace, 100, OUTPUT_ROTATED_JPEG);
```
  - To encode to memory in JPEG format, use the image_util_encode_jpeg_to_memory() function: -
```
ret = image_util_encode_jpeg_to_memory(img_flip_target, dest_width, dest_height, colorspace, 100, jpeg_buffer, jpeg_size);
```
  -
-

ret = image_util_encode_jpeg_to_memory(img_flip_target, dest_width, dest_height, colorspace, 100, jpeg_buffer, jpeg_size);

diff --git a/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm index 013367f..65a167d 100644 --- a/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm @@ -16,62 +16,52 @@ -

+ -

This tutorial demonstrates how to encode and decode media files.

This tutorial demonstrates how you can encode and decode media files.

Become familiar with the Media Codec API basics by learning about:

-Initializing Media Codecs +Initializing Media Codecs
Initialize the media codecs for use.
Managing Media Codecs +
Managing Media Codecs
Prepare and start the codec.
Releasing Resources +
Releasing Resources
Reset the codec and destroy the handle.

Show All
Hide All

- -

-
-
Initializing Media Codecs
-Hide -
-
+ +
Initializing Media Codecs
+
Before using the Media codec:
1. To use the functions and data types of the Media Codec API, include the <media_codec.h> header file in your application:
  +
2. To use the functions and data types of the Media Codec API (in mobile and wearable applications), include the <media_codec.h> header file in your application:
```
 #include <media_codec.h>
 
```
3. If the handle is created normally, set the codec and configuration using the mediacodec_set_codec() function. -
  The mediacodec_codec_type_e and mediacodec_support_type_e enumeration define the media codec type and support type.
  +
  The enumerations mediacodec_codec_type_e (in mobile and wearable applications) and mediacodec_support_type_e (in mobile and wearable applications) define the media codec type and support type.
```
ret = mediacodec_set_codec(mediacodec, (mediacodec_codec_type_e)codecid, flag); 
```
4. Set the video decoder using the mediacodec_set_vdec_info() or mediacodec_set_venc_info() function. @@ -91,18 +81,13 @@ ret = mediacodec_create(&mediacodec); ret = mediacodec_set_venc_info(mediacodec, width, height, fps, target_bits);
-
-
-
-
Managing Media Codecs
-Hide -
-
+ +
Managing Media Codecs
+
The Media Codec usage follows a basic pattern:
1. Create and configure the Media Codec handle.
2. Loop until done: -
  - If an input buffer is ready, read a chunk of input and copy it into the buffer.
  - Release the Media Codec handle.
@@ -125,25 +110,15 @@ ret = mediacodec_get_output (mediacodec, &output_buf, 0);

- -

-Hide -

+ +

To reset the codec and destroy the handle using the mediacodec_unprepare() and mediacodec_destroy() functions after you have finished work with the media codec:

ret = mediacodec_unprepare(mediacodec);
 
 ret = mediacodec_destroy(mediacodec);

Afterwards, the media codec state is changed to MEDIACODEC_STATE_NONE.

- -

diff --git a/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm index d13a605..17c0868 100644 --- a/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm @@ -16,56 +16,46 @@ -

+ -

This tutorial demonstrates how to create, set, and get media handles.

This tutorial demonstrates how you can create, set, and get media handles.

Become familiar with the Media Tool API basics by learning about:

Managing the Media Format Handle +
- Managing the Media Format Handle
  Create, set, and get the <media_format_h> handle.
- Managing the Media Packet Handle +
- Managing the Media Packet Handle
  Create, set, and get the <media_packet_h> handle.
-
-
- Show All
- Hide All
-
- -
- -
  -
  Managing the Media Format Handle
  -Hide -
  -
  + +
  Managing the Media Format Handle
  +
  To manage the media format handle:
  -
  1. To use the media format handle of the Media Tool API, include the <media_format.h> header file in your application:
    +
    1. To use the media format handle of the Media Tool API (in mobile and wearable applications), include the <media_format.h> header file in your application:
      
      #include <media_format.h>
    -
  -
- -
  -
  Managing the Media Packet Handle
  -Hide -
  -
  + +
  Managing the Media Packet Handle
  +
  To manage the media packet handle:
  1. To use the media packet handle of the Media Tool API, include the <media_packet.h> header file in your application:
    +
  2. To use the media packet handle of the Media Tool API (in mobile and wearable applications), include the <media_packet.h> header file in your application:
```
 #include <media_packet.h>
 
```
  3. Define a handle for media_packet_h and pass it to a creation function with an existing media_format_h handle.
    To reuse the packet handle, set the return value as MEDIA_PACKET_REUSE of int (*media_packet_finalize_cb) and use media_format_unref(media_format_h fmt) after creating the handle.
    
    The following creation functions are available:
    -
    - Create a handle and allocate a buffer into the heap or TBM surface with the media_packet_create_alloc() function: +
      Create a handle and allocate a buffer into the heap or TBM surface with the media_packet_create_alloc() function:
      { media_format_h fmt; @@ -200,11 +185,6 @@ media_packet_set_format(packet, format2); // If format2 ref_count is bigger than 1, it is not free media_packet_destroy(packet);
  -
  -
-

diff --git a/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm index b3ebbeb..2702b75 100644 --- a/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm @@ -16,27 +16,28 @@ -

This tutorial demonstrates how you can extract metadata from media files.

@@ -45,26 +46,15 @@

Become familiar with the Metadata Extractor API basics by learning about:

Initializing the Metadata Extractor +
Initializing the Metadata Extractor
Initialize the metadata extractor for use.
Getting Metadata, Artwork, and Frame +
Getting Metadata, Artwork, and Frame
Create a metadata extractor handle, bind the handle with the file, and get metadata, artwork, lyrics, and frames.

Show All
Hide All

- -

-Hide -

+ +

+ @@ -78,7 +68,7 @@

To initialize the metadata extractor:

To use the functions and data types of the Metadata Extractor API, include the <metadata_extractor.h> header file in your application:
+
To use the functions and data types of the Metadata Extractor API (in mobile and wearable applications), include the <metadata_extractor.h> header file in your application:
```
 #include <metadata_extractor.h>
 
```
To work with the Metadata Extractor API, create a handle to the metadata extractor. A global variable is used in this tutorial:
@@ -153,14 +143,9 @@ void _make_test_path()

The metadata extractor APIs can use not only common content in the storage (internal or external), but also the private content in your application data.

- - -

-Hide -

+ +

To get metadata from the file:

Create the metadata extractor handle. @@ -183,7 +168,7 @@ ret = metadata_extractor_set_path(g_metadata_h, music_test_path);
Get metadata from the file. -
Use the metadata_extractor_get_metadata() function, which takes 3 parameters. The first one is the handle to the metadata extractor. The second parameter is the wanted data type. The possible values for this parameter are those defined in the metadata_extractor_attr_e enumeration. In this tutorial all the possible data from the file is extracted, so a function with all possible attribute types is needed. The value read from the file is stored in the final parameter, which is a pointer to the char variable and is fulfilled by the function.
+
Use the metadata_extractor_get_metadata() function, which takes 3 parameters. The first one is the handle to the metadata extractor. The second parameter is the wanted data type. The possible values for this parameter are those defined in the metadata_extractor_attr_e enumeration (in mobile and wearable applications). In this tutorial all the possible data from the file is extracted, so a function with all possible attribute types is needed. The value read from the file is stored in the final parameter, which is a pointer to the char variable and is fulfilled by the function.
```
 char *value = NULL;
@@ -230,7 +215,7 @@ if (artwork_mime != NULL)
 
 Get synchronized lyrics from the file (in case of music content).
 Use the metadata_extractor_get_synclyrics() function. It takes the following parameters:
-
+
 Handle to the metadata extractor
 Index of the time/lyrics set
 Time information of the index
@@ -293,12 +278,7 @@ if (frame != NULL)
  metadata_extractor_destroy(g_metadata_h);
 
-
```

- - - + diff --git a/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm b/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm index f8ff363..19e61c9 100644 --- a/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm @@ -50,6 +50,7 @@

Tone Player: Playing Tones

Demonstrates how you can play tones.

WAV Player: Playing Waveform Audio Files

Demonstrates how you can play WAV files.

Sound Manager: Managing Sound Parameters

Demonstrates how you can set the sound session type and control volume.

Screen Mirroring Sink: Mirroring Screen and Sound

Demonstrates how you can mirror the device screen and sound to another device wirelessly.

The following tutorials apply in mobile applications only:

diff --git a/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm index cadfd11..c059c65 100644 --- a/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm @@ -16,46 +16,47 @@ -

This tutorial demonstrates how you can play audio and video files and play multiple audio files simultaneously.

@@ -65,25 +66,25 @@

Player

Initialing the Player +
Initialing the Player
Initialize the player for use.
Playing an Audio File +
Playing an Audio File
Play an audio file.
Playing a Video File +
Playing a Video File
Play a video file.
Stopping the Player and Releasing Resources +
Stopping the Player and Releasing Resources
Stop the player and release the resources allocated to the player.

Multi-player

Initializing the Players +
Initializing the Players
Initialize the players for use.
Playing Multiple Files Simultaneously +
Playing Multiple Files Simultaneously
Create multiple players for playing multiple files simultaneously.

@@ -96,36 +97,24 @@

Advanced player
- Setting Display Parameters +
- Setting Display Parameters
  Set different display parameters.
- Getting Stream Information +
- Getting Stream Information
  Get information about the stream.
- Inserting Subtitles +
- Inserting Subtitles
  Insert subtitles to video files.

Show All
Hide All

- -

-
-
Initializing the Player
-Hide -
-
+
Initializing the Player
+
To initialize the player:
1. To use the functions and data types of the Player API, include the <player.h>, <Elementary.h>, and <glib.h> header files in your application:
  +
2. To use the functions and data types of the Player API (in mobile and wearable applications), include the <player.h>, <Elementary.h>, and <glib.h> header files in your application:
```
#include <player.h>
 #include <Elementary.h>
 #include <glib.h>
@@ -257,15 +246,11 @@ to PLAYER_STATE_READY<
 
```
-
-
-
-
Playing an Audio File
-Hide -
-
-
To play an audio file:
-
-
-
Playing a Video File
-Hide -
-
+ +
Playing a Video File
+
To play a video file:

- +

Note

In -case of an overlay surface, when the device orientation changes, the -displayed video does not rotate automatically. If you want to change -the video orientation according to the device orientation, use the player_set_display_rotation() function within the app_device_orientation_cb() -callback function used by the application. In case of an Evas surface, -the Evas object for the video is rotated by the window manager used by -the application, not by the player_set_display_rotation() function.

In case of an overlay surface, when the device orientation changes, the displayed video does not rotate automatically. If you want to change the video orientation according to the device orientation, use the player_set_display_rotation() function within the app_device_orientation_cb() callback function used by the application. In case of an Evas surface, the Evas object for the video is rotated by the window manager used by the application, not by the player_set_display_rotation() function.

@@ -359,7 +333,7 @@ the application, not by the

@@ -407,14 +381,9 @@ if (error_code == PLAYER_ERROR_NONE)

- -

-Hide -

+ +

To stop the player when it is no longer needed:

Reset the player using the player_unprepare() function with the player handle as a parameter. Before using this function, make sure that the player is stopped using the player_stop() function.
@@ -431,19 +400,12 @@ dlog_print(DLOG_ERROR, LOG_TAG, "player_unprepare() = %d", error_code) dlog_print(DLOG_ERROR, LOG_TAG, "player_destroy = %d", error_code);

- -

-Hide -

To initialize the players:

To use the functions and data types of the Player API, include the <player.h>, <stdio.h>, and <unistd.h> header files in your application:
+
To use the functions and data types of the Player API (in mobile and wearable applications), include the <player.h>, <stdio.h>, and <unistd.h> header files in your application:
```
 #include <player.h>
 #include <stdio.h>
@@ -462,14 +424,9 @@ static char *path_3 = "tmp/test2.wav";
 static const int PLAYBACK_TIME=6;
```
To ensure that a function has been properly executed, always check its return value. If the return value differs from PLAYER_ERROR_NONE, an error has occurred.

-Hide -

+ +

To play multiple files simultaneously:

Play the files:

@@ -589,22 +546,16 @@ ret = player_destroy(player_3);

- -

-Hide -

+ +

To set the display parameters:

Create the player handle and prepare the player.
Create the player handle and prepare the player.
Set the parameters: -

-Hide -

To get stream information:

Create the player handle, prepare the player, and set the display. +
Create the player handle, prepare the player, and set the display. @@ -682,7 +627,7 @@ dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_mode = %d", error_
Get the stream information -
- Get the video size. +
  - Get the video size.
    Get the width and height of the video display using the player_get_video_size() function:
    @@ -756,16 +701,11 @@ int size; error_code = player_get_album_art(player, &album_art, &size); dlog_print(DLOG_INFO, LOG_TAG, "player_set_display_mode = %d", error_code);

-Hide -

+ +

To insert subtitles to a video file:

Create the player handle and prepare the player.

Create the player handle and prepare the player.

To set the subtitle path, use the player_set_subtitle_path() function:

#define SUBTITLE "subtitles_test_file.srt"
 
@@ -792,11 +732,6 @@ free(path);
  
 
 After setting the subtitle path, you can play the video file as usual, by setting the video display and starting the player.

- -

diff --git a/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm index e975994..cdfd816 100644 --- a/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm @@ -16,63 +16,53 @@ -

+ -

This tutorial demonstrates how to create and tune a radio.

This tutorial demonstrates how you can access and tune a radio.

Become familiar with the Radio API basics by learning about:

Initializing the Radio +
Initializing the Radio
Initialize the radio for use.
Scanning for All Available Radio Frequencies +
Scanning for All Available Radio Frequencies
Scan for radio frequencies.
Tuning the Radio and Beginning Listening +
Tuning the Radio and Beginning Listening
Tune in to a station and begin listening.
Seeking for a Nearby Channel +
Seeking for a Nearby Channel
Look for radio channels nearby.

Show All
Hide All

- -

-
-
Initializing the Radio
-Hide -
-
+ +
Initializing the Radio
+
To initialize the radio for use:
1. To use the functions and data types of the Radio API, include the <radio.h> header file in your application:
  +
2. To use the functions and data types of the Radio API (in mobile and wearable applications), include the <radio.h> header file in your application:
```
 #include <radio.h>
 
```
-
-
-
-
Scanning for All Available Radio Frequencies
-Hide -
-
+ +
Scanning for All Available Radio Frequencies
+
To scan for available radio frequencies:
1. Define and set the callback for the "scan completed" notification:
  @@ -175,14 +160,9 @@ on_scan_updated(int frequency, void* userdata)
```
radio_scan_start(mRadio.radio, on_scan_updated, &mRadio);
```
  The scanning time depends on your environment (the strength of the radio signal). Cancel the current scan using the radio_scan_stop() function.
-
-
-
-
Tuning the Radio and Beginning Listening
-Hide -
-
+ +
Tuning the Radio and Beginning Listening
+
To tune in to a frequency:
1. Select the frequency and tune into it.
  @@ -206,14 +186,9 @@ if (ret != RADIO_ERROR_NONE)
  If the radio emits no sound, check the signal strength with the radio_get_signal_strength() function, which returns the current signal strength as a 'dbuV' value.
-
-
-
-
Seeking for a Nearby Channel
-Hide -
-
+ +
Seeking for a Nearby Channel
+
To seek for a nearby channel:
1. Use the radio_seek_up() and radio_seek_down() functions to search for an active nearby channel frequency and tune into that frequency. This is very similar to the scanning operation, but only the nearest active frequency is searched for. Once the maximum frequency is reached in any direction, the search is stopped. @@ -243,11 +218,6 @@ void on_seek_completed(int frequency, void* userdata) }
-
-

diff --git a/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm index d356386..69bcde1 100644 --- a/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm @@ -16,38 +16,40 @@ -

This tutorial demonstrates how you can record audio and video.

@@ -58,42 +60,30 @@

Audio recorder
- Initializing the Audio Recorder +
- Initializing the Audio Recorder
  Initialize the audio recorder for use.
- Recording Audio +
- Recording Audio
  Start, stop, cancel, and pause recording an audio file, and release resources after finishing recording.
Video recorder
- Initializing the Video Recorder +
- Initializing the Video Recorder
  Initialize the devices for use.
- Recording a Video +
- Recording a Video
  Prepare, record, commit, and cancel a video.

Show All
Hide All

-
-
Initializing the Audio Recorder
-Hide -
-
+
Initializing the Audio Recorder

To initialize the audio recorder for use:
1. To use the functions and data types of the Recorder API, include the <recorder.h> header file in your application:
  +
2. To use the functions and data types of the Recorder API (in mobile and wearable applications), include the <recorder.h> header file in your application:
```
 #include <recorder.h>
 
```
3. The callback function returns the following parameters:
  -
-
-
-
-
Recording Audio
-Hide -
-
+ +
Recording Audio
+
To record audio:
1. To prepare the audio recorder for recording, use the recorder_prepare() function:
  @@ -335,7 +320,7 @@ if (_recorder_expect_state(g_recorder, RECORDER_STATE_RECORDING) || _recorder_ex
2. After you have finished recording, release all resources associated with the audio recorder:
  -
  -
-
-
-
Initializing the Video Recorder
-Hide -
-
+ +
Initializing the Video Recorder
+
To initialize the video recorder:
-
1. To use the functions and data types of the Camera and Recorder APIs, include the <camera.h> and <recorder.h> header files in your application: +
  1. To use the functions and data types of the Camera API (in mobile and wearable applications) and Recorder (in mobile and wearable applications) APIs, include the <camera.h> and <recorder.h> header files in your application:
```
 #include <camera.h>
 #include <recorder.h>
@@ -476,7 +456,7 @@ else
 }
 
```
  2. The callback function receives the following parameters:
    -
  -
-
-
-
Recording a Video
-Hide -
-
+ +
Recording a Video
+
To record a video:
-
-

diff --git a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_n.htm b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_n.htm deleted file mode 100755 index a9cccfc..0000000 --- a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_n.htm +++ /dev/null @@ -1,367 +0,0 @@ - - - - - - - - - - - - - - Screen Mirroring: Mirroring screen and sound - - - - - - -

This tutorial demonstrates how you can play screen mirroring as sink.

- -

Become familiar with Screen Mirroring API basics by learning about:

- -

Initializing the screen mirroring sink -
Initialize the screen mirroring sink for use.
-
Preparing the screen mirroring sink -
Set specific information, and prepare the screen mirroring sink.
-
Connecting and Starting the screen mirroring sink -
Connect and Start the screen mirroring sink.
-
Releasing Resources -
Disconnect and unprepare the screen mirroring sink, and destroy the sink handle and release all its resources.
-
Handling exception of the screen mirroring sink -
Handle exception of the screen mirroring sink
-

- -

Show All
Hide All

- -

-Hide -

To initialize the screen mirroring sink.

- -

To use the functions and data types of the Screen Mirroring sink API, include the <scmirroring_type.h> and <scmirroring_sink.h> header file in your application:
-
```
-#include <scmirroring_type.h>
-#include <scmirroring_sink.h>
-
```

Create a screen mirroring sink handle using scmirroring_sink_create() function. The screen mirroring state will be SCMIRRORING_STATE_NULL immediately.

-static scmirroring_sink_h g_scmirroring;
-
-static int init_scmirroring_sink()
-{
-   int ret = SCMIRRORING_ERROR_NONE;
-   ret = scmirroring_sink_create(&g_scmirroring);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_create fail [%d]", ret);
-      return FALSE;
-   }
-   return TRUE;
-}
-

- -

-Hide -

To prepare the screen mirroring sink:

- -

Register a callback function using scmirroring_sink_set_state_changed() function for checking scmirroring sink state.
Set a display object using scmirroring_sink_set_display() function before calling scmirroring_sink_prepare() function.

Prepare the screen mirroring sink using scmirroring_sink_prepare() function. The screen mirroring state will be SCMIRRORING_STATE_PREPARED immediately. - -

-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data);
-
-static int prepare_scmirroring_sink(scmirroring_display_type_e display_type, Evas_Object* display_object)
-{
-   ret = scmirroring_sink_set_state_changed_cb(g_scmirroring, scmirroring_state_callback, NULL);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_state_changed_cb fail [%d]", ret);
-      return FALSE;
-   }
-
-   ret = scmirroring_sink_set_display(g_scmirroring, display_type, display_object);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_display fail [%d]", ret);
-      return FALSE;
-   }
-   ret = scmirroring_sink_prepare(g_scmirroring);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_prepare fail [%d]", ret);
-      return FALSE;
-   }
-   return TRUE;
-}
-
-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
-{
-   dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
-
-   switch(state)
-   {
-      case SCMIRRORING_STATE_NULL:
-         break;
-      case SCMIRRORING_STATE_PREPARED:
-         break;
-      case SCMIRRORING_STATE_CONNECTED:
-         break;
-      case SCMIRRORING_STATE_PLAYING:
-         break;
-      case SCMIRRORING_STATE_PAUSED:
-         break;
-      case SCMIRRORING_STATE_DISCONNECTED:
-         break;
-      case SCMIRRORING_STATE_NONE:
-         break;
-      default:
-         dlog_print(DLOG_ERROR, LOG_TAG, " state[%d] Invalid State", state);
-         break;
-
-   }
-   return;
-}

-Hide -

To connect and start the screen mirroring sink:

- -

Set IP and port number using scmirroring_sink_set_ip_and_port() function before calling scmirroring_sink_connect() function.
Connect the screen mirroring sink to the screen mirroring source using scmirroring_sink_connect() function. The screen mirroring state will be SCMIRRORING_STATE_CONNECTED asynchronously. You should check to change the state using state callback function.
Start the screen mirroring sink using scmirroring_sink_start() function when the screen mirroring state is SCMIRRORING_STATE_CONNECTED. The screen mirroring state will be SCMIRRORING_STATE_PLAYING asynchronously. -

-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data);
-
-static int start_scmirroring_sink(const char* peer_ip, const char* peer_port)
-{
-   int ret;
-   ret = scmirroring_sink_set_ip_and_port(g_scmirroring, peer_ip, peer_port);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_set_ip_and_port fail [%d]", ret);
-      return FALSE;
-   }
-   ret = scmirroring_sink_connect(g_scmirroring);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_connect fail [%d]", ret);
-      return FALSE;
-   }
-
-   return TRUE:
-}
-
-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
-{
-   int ret;
-   dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
-
-   switch(state)
-   {
-      case SCMIRRORING_STATE_NULL:
-         break;
-      case SCMIRRORING_STATE_PREPARED:
-         break;
-      case SCMIRRORING_STATE_CONNECTED:
-         ret = scmirroring_sink_start(g_scmirroring);
-         if(ret != SCMIRRORING_ERROR_NONE)
-         {
-            dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_start fail [%d]", ret);
-            return;
-         }
-         break;
-      case SCMIRRORING_STATE_PLAYING:
-         break;
-      case SCMIRRORING_STATE_PAUSED:
-         break;
-      case SCMIRRORING_STATE_DISCONNECTED:
-         break;
-      case SCMIRRORING_STATE_NONE:
-         break;
-      default:
-         dlog_print(DLOG_ERROR, LOG_TAG, " state[%d] Invalid State", state);
-         break;
-   }
-   return;
-}

-Hide -

After you have finished working with the screen mirroring sink, disconnect the screen mirroring sink and release all resources:

- -

Disconnect the screen mirroring sink using scmirroring_sink_disconnect() function. The screen mirroring state will be SCMIRRORING_STATE_DISCONNECTED immediately.
Unprepare the screen mirroring sink using scmirroring_sink_unprepare() function. The screen mirroring state will be SCMIRRORING_STATE_NULL immediately.
Destroy the screen mirroring sink using scmirroring_sink_destroy() function. The screen mirroring state will be SCMIRRORING_STATE_NONE immediately.

-static int destroy_scmirroring_sink()
-{
-   ret = scmirroring_sink_disconnect(g_scmirroring);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_disconnect fail [%d]", ret);
-      return FALSE;
-   }
-
-   ret = scmirroring_sink_unprepare(g_scmirroring);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_unprepare fail [%d]", ret);
-      return FALSE;
-   }
-
-   ret = scmirroring_sink_destroy(g_scmirroring);
-   if(ret != SCMIRRORING_ERROR_NONE)
-   {
-      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_destroy fail [%d]", ret);
-      return FALSE;
-   }
-   return TRUE;
-}
-

-Hide -

To handle exception of the screen mirroring:

- -

If the state callback function is received SCMIRRORING_STATE_DISCONNECTED state, you should release the screen mirroring sink. The situation is caused by the source device disconnects the session or the screen mirroring sink has internal problem.

-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
-{
-   int ret;
-   dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
-
-   switch(state)
-   {
-      case SCMIRRORING_STATE_NULL:
-         break;
-      case SCMIRRORING_STATE_PREPARED:
-         break;
-      case SCMIRRORING_STATE_CONNECTED:
-         break;
-      case SCMIRRORING_STATE_PLAYING:
-         break;
-      case SCMIRRORING_STATE_PAUSED:
-         break;
-      case SCMIRRORING_STATE_DISCONNECTED:
-         ret = scmirroring_sink_unprepare(g_scmirroring);
-         if(ret != SCMIRRORING_ERROR_NONE)
-         {
-            dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_unprepare fail [%d]", ret);
-            return;
-         }
-         /* Fill what you want to do*/
-         break;
-      case SCMIRRORING_STATE_NONE:
-         break;
-      default:
-         dlog_print(DLOG_ERROR, LOG_TAG, " state[%d] Invalid State", state);
-         break;
-   }
-   return;
-}
-

- - - - -

- -

- - - - - - - diff --git a/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm new file mode 100644 index 0000000..f284135 --- /dev/null +++ b/org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm @@ -0,0 +1,325 @@ + + + + + + + + + + + + + + Screen Mirroring Sink: Mirroring Screen and Sound + + + + + + +

+ +

This tutorial demonstrates how you can mirror the device screen and sound to another device wirelessly as a sink.

+ +

Become familiar with Screen Mirroring Sink API basics by learning about:

+ +

Initializing the Screen Mirroring Sink +
Initialize the screen mirroring sink for use.
+
Preparing the Screen Mirroring Sink +
Set specific information, and prepare the screen mirroring sink.
+
Connecting and Starting the Screen Mirroring Sink +
Connect and start the screen mirroring sink.
+
Releasing Resources +
Disconnect and unprepare the screen mirroring sink, and destroy the sink handle and release all its resources.
+
Handling Screen Mirroring Sink Exceptions +
Handle exceptions in the screen mirroring sink processes.
+

+ +

+ +

To initialize the screen mirroring sink:

+ +

To use the functions and data types of the Screen Mirroring Sink API (in mobile and mobile applications), include the <scmirroring_type.h> and <scmirroring_sink.h> header files in your application:
+
```
+#include <scmirroring_type.h>
+#include <scmirroring_sink.h>
+
```

Create a screen mirroring sink handle using the scmirroring_sink_create() function. The screen mirroring state immediately becomes SCMIRRORING_STATE_NULL.

+static scmirroring_sink_h g_scmirroring;
+
+static int init_scmirroring_sink()
+{
+   int ret = SCMIRRORING_ERROR_NONE;
+   ret = scmirroring_sink_create(&g_scmirroring);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_create fail [%d]", ret);
+
+      return FALSE;
+   }
+
+   return TRUE;
+}
+

+ +

+ +

To prepare the screen mirroring sink:

+ +

Register and define a callback for checking the screen mirroring sink state using the scmirroring_sink_set_state_changed_cb() function. +

+static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
+
+   switch (state)
+   {
+      case SCMIRRORING_STATE_NULL:
+         break;
+      case SCMIRRORING_STATE_PREPARED:
+         break;
+      case SCMIRRORING_STATE_CONNECTED:
+         break;
+      case SCMIRRORING_STATE_PLAYING:
+         break;
+      case SCMIRRORING_STATE_PAUSED:
+         break;
+      case SCMIRRORING_STATE_DISCONNECTED:
+         break;
+      case SCMIRRORING_STATE_NONE:
+         break;
+      default:
+         dlog_print(DLOG_ERROR, LOG_TAG, " state[%d] Invalid State", state);
+         break;
+   }
+
+   return;
+}
+
+static int prepare_scmirroring_sink(scmirroring_display_type_e display_type, Evas_Object* display_object)
+{
+   ret = scmirroring_sink_set_state_changed_cb(g_scmirroring, scmirroring_state_callback, NULL);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_state_changed_cb fail [%d]", ret);
+
+      return FALSE;
+   }
+

Set a display object using the scmirroring_sink_set_display() function before calling the scmirroring_sink_prepare() function. +

+   ret = scmirroring_sink_set_display(g_scmirroring, display_type, display_object);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_display fail [%d]", ret);
+
+      return FALSE;
+   }

Prepare the screen mirroring sink using the scmirroring_sink_prepare() function. The screen mirroring state immediately becomes SCMIRRORING_STATE_PREPARED. + +

+   ret = scmirroring_sink_prepare(g_scmirroring);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_prepare fail [%d]", ret);
+
+      return FALSE;
+   }
+
+   return TRUE;
+}
+

+ +

+ +

To connect and start the screen mirroring sink:

+ +

Set IP and port number using the scmirroring_sink_set_ip_and_port() function before calling the scmirroring_sink_connect() function. +

+static int start_scmirroring_sink(const char* peer_ip, const char* peer_port)
+{
+   int ret;
+   ret = scmirroring_sink_set_ip_and_port(g_scmirroring, peer_ip, peer_port);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_set_ip_and_port fail [%d]", ret);
+
+      return FALSE;
+   }
+

Connect the screen mirroring sink to the screen mirroring source using the scmirroring_sink_connect() function. The screen mirroring state becomes SCMIRRORING_STATE_CONNECTED asynchronously. Monitor the state changes using the state callback. +

+   ret = scmirroring_sink_connect(g_scmirroring);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_connect fail [%d]", ret);
+
+      return FALSE;
+   }
+
+   return TRUE;
+}
+

Start the screen mirroring sink using the scmirroring_sink_start() function when the screen mirroring state is SCMIRRORING_STATE_CONNECTED. The screen mirroring state becomes SCMIRRORING_STATE_PLAYING asynchronously. + + +

+static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
+{
+   int ret;
+   dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
+
+   switch (state)
+   {
+      // Other cases
+      case SCMIRRORING_STATE_CONNECTED:
+         ret = scmirroring_sink_start(g_scmirroring);
+         if (ret != SCMIRRORING_ERROR_NONE)
+         {
+            dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_start fail [%d]", ret);
+
+            return;
+         }
+         break;
+      // Other cases
+   }
+
+   return;
+}

+ +

+ +

After you have finished working with the screen mirroring sink, disconnect the screen mirroring sink and release all resources:

+ +

Disconnect the screen mirroring sink using scmirroring_sink_disconnect() function. The screen mirroring state immediately becomes SCMIRRORING_STATE_DISCONNECTED. +

+static int destroy_scmirroring_sink()
+{
+   ret = scmirroring_sink_disconnect(g_scmirroring);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_disconnect fail [%d]", ret);
+
+      return FALSE;
+   }
+

Unprepare the screen mirroring sink using the scmirroring_sink_unprepare() function. The screen mirroring state immediately becomes SCMIRRORING_STATE_NULL. +

+   ret = scmirroring_sink_unprepare(g_scmirroring);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_unprepare fail [%d]", ret);
+
+      return FALSE;
+   }
+

Destroy the screen mirroring sink using the scmirroring_sink_destroy() function. The screen mirroring state immediately becomes SCMIRRORING_STATE_NONE. +

+   ret = scmirroring_sink_destroy(g_scmirroring);
+   if (ret != SCMIRRORING_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_destroy fail [%d]", ret);
+
+      return FALSE;
+   }
+
+   return TRUE;
+}

+ +

+ +

To handle screen mirroring exceptions:

+ +

If the state callback function returns the SCMIRRORING_STATE_DISCONNECTED state, release the screen mirroring sink. The situation is caused by the source device as it disconnects the session, or the screen mirroring sink has internal problem.

+static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
+{
+   int ret;
+   dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
+
+   switch (state)
+   {
+      // Other cases
+      case SCMIRRORING_STATE_DISCONNECTED:
+         ret = scmirroring_sink_unprepare(g_scmirroring);
+         if (ret != SCMIRRORING_ERROR_NONE)
+         {
+            dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_unprepare fail [%d]", ret);
+
+            return;
+         }
+         // Do something
+         break;
+      // Other cases
+   }
+
+   return;
+}

+ + + + + +

+ +

+ + + + + + + diff --git a/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm index a220380..ac11b34 100644 --- a/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm @@ -16,29 +16,30 @@ -

This tutorial demonstrates how you manage sounds.

@@ -46,40 +47,28 @@

Become familiar with the Sound Manager API basics by learning about:

Setting the Sound Session Type +
Setting the Sound Session Type
Set a sound session type for your application.
Managing Volume Control +
Managing Volume Control
Control the volume of your application.
Querying Sound Devices +
Querying Sound Devices
Query sound device information.

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

Managing Sound Manager Session Parameters +
Managing Sound Manager Session Parameters
Obtain and set basic sound session parameters, such as volume and sound type of the actual sound sessions.

Show All
Hide All

- -

-
-
Setting the Sound Session Type
-Hide -
-
+
Setting the Sound Session Type
+
To set your application sound session type and monitor session changes:
-
1. To use the functions and data types of the Sound Manager API, include the <sound_manager.h> header file in your application:
  +
  1. To use the functions and data types of the Sound Manager API (in mobile and wearable applications), include the <sound_manager.h> header file in your application:
```
 #include <sound_manager.h>
 
```
  2. Set the sound session type.
    Set the application sound session type using the sound_manager_set_session_type() function. The function sets the type of your sound session across the system.
    -
    The sound_session_type_e enumeration defines the available sound session types.
    +
    The sound_session_type_e enumeration (in mobile and wearable applications) defines the available sound session types.
```
int error_code;
  
 error_code = sound_manager_set_session_type(SOUND_SESSION_TYPE_MEDIA);
@@ -107,17 +96,12 @@ error_code = sound_manager_set_session_type(SOUND_SESSION_TYPE_MEDIA);
 To register the callback function, call sound_manager_set_session_interrupted_cb() with a callback and the data which passes the user data:
 error_code = sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
 
```
  -
-
-
-
Managing Volume Control
-Hide -
-
+ +
Managing Volume Control
+
To control your application volume:
-
1. To use the functions and data types of the Sound Manager API, include the <sound_manager.h> header file in your application:
  +
  1. To use the functions and data types of the Sound Manager API (in mobile and wearable applications), include the <sound_manager.h> header file in your application:
```
 #include <sound_manager.h>
 
```
  -
-
-
-
Querying Sound Devices
-Hide -
-
+ +
Querying Sound Devices
+
To query for information:
-
1. To use the functions and data types of the Sound Manager API, include the <sound_manager.h> header file in your application: +
  1. To use the functions and data types of the Sound Manager API (in mobile and wearable applications), include the <sound_manager.h> header file in your application:
```
 #include <sound_manager.h>
 
```
  2. To query the information of the connected sound devices: -
    - To access sound devices and their information: -
      +
      To access sound devices and their information: +
      
      Set the mask.
      Define a combination of masks to narrow down the sound devices whose information you need.
      @@ -233,7 +212,7 @@ if (_ret == SOUND_MANAGER_ERROR_NO_DATA) }
      
      To monitor the device connection changes: -
      To receive a notification whenever the sound device connection state changes, define the sound_device_connected_cb callback function. +
      To receive a notification whenever the sound device connection state changes, define the sound_device_connected_cb callback function.
      static void _sound_device_connected_cb(sound_device_h device, bool is_connected, void* user_data) { @@ -277,7 +256,7 @@ ret = sound_manager_set_device_connected_cb(mask, _sound_device_connected_cb, NU
      Remember that the initial state of the connected sound device is deactivated.
      
      To monitor the device information changes: -
      To receive a notification whenever the sound device information changes, define the sound_device_information_changed_cb callback function. +
      To receive a notification whenever the sound device information changes, define the sound_device_information_changed_cb callback function.
      static void _sound_device_information_changed_cb(sound_device_h device, sound_device_changed_info_e changed_info, @@ -332,19 +311,13 @@ ret = sound_manager_set_device_information_changed_cb(mask,
      
      -
-
-
-
Managing Sound Manager Session Parameters
- Hide -
-
+ +
Managing Sound Manager Session Parameters

To obtain and modify basic sound session parameters:
1. To use the functions and data types of the Sound Manager API, include the <sound_manager.h> header file in your application:
  +
2. To use the functions and data types of the Sound Manager API (in mobile and wearable applications), include the <sound_manager.h> header file in your application:
```
 #include <sound_manager.h>
 
```
  @@ -352,23 +325,23 @@ ret = sound_manager_set_device_information_changed_cb(mask,
3. Store the parameter data.
  The session parameters are stored in the following enumeration structures:
  -
  +
  - sound_session_type_e (in mobile and wearable applications)
  - sound_session_option_for_during_play_e (in mobile and wearable applications)
  - sound_session_option_for_starting_e (in mobile and wearable applications)
  - sound_session_option_for_resumption_e (in mobile and wearable applications)
4. Detect interruptions. -
  1. +
    1. To detect and track session status changes, register a callback function:
      
      sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
    2. Define the callback function content. The sound_session_interrupted_code_e enumeration defines the available interruption sources.
      +
    3. Define the callback function content. The sound_session_interrupted_code_e enumeration (in mobile and wearable applications) defines the available interruption sources.
      
      void _sound_session_interrupted_cb(sound_session_interrupted_code_e code, void * userdata) @@ -398,7 +371,7 @@ void _sound_session_interrupted_cb(sound_session_interrupted_code_e code, void *
  2. Manage the session type. -
    To get a valid sound session, the Tone Player API is used in this tutorial. For more information, see the Tone Player Tutorial.
    +
    To get a valid sound session, the Tone Player API (in mobile and wearable applications) is used in this tutorial. For more information, see the Tone Player Tutorial.
    
    To determine and change the session type, use the following functions:
```
@@ -450,13 +423,7 @@ sound_manager_set_media_session_resumption_option(SOUND_SESSION_OPTION_RESUMPTIO
 sound_manager_unset_session_interrupted_cb();
 
```
  - -
-

+ diff --git a/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm index f6e8134..bbce269 100644 --- a/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm @@ -16,82 +16,62 @@ -

+ -

This tutorial demonstrates how to play audio tones.

This tutorial demonstrates how you can play audio tones.

Become familiar with the Tone Player API basics by learning about:

Initializing the Tone Player +
Initializing the Tone Player
Initialize the tone player for use.
Playing a Tone +
Playing a Tone
Start playing a tone and stop playing it.
Playing a Tone for a Specified Duration +
Playing a Tone for a Specified Duration
Play a tone for a specified duration.

- -

Show All
Hide All

- -

-
-
Initializing the Tone Player
-Hide -
-
+
Initializing the Tone Player

Initialize the tone player:
-
1. To use the functions and data types of the Tone Player API, include the <tone_player.h> and <sound_manager.h> header files in your application: +
  1. To use the functions and data types of the Tone Player API (in mobile and wearable applications), include the <tone_player.h> and <sound_manager.h> header files in your application:
```
 #include <tone_player.h>
 #include <sound_manager.h>
 
```
  2. To start using the tone player, declare a variable which identifies the tone player:
```
int tone_player_id;
```
  -
-
-
-
Playing a Tone
-Hide -
-
+
Playing a Tone

To start and stop playing a tone:
1. To start playback, use the tone_player_start() function. The player ID is assigned if the function succeeds. The function takes the following parameters: -
-
-
-
-
Playing a Tone for a Specified Duration
-Hide -
-
+ +
Playing a Tone for a Specified Duration

To start playing a tone, use the tone_player_start() function with the tone type, sound type, and duration time as parameters. In this example, a congestion tone is played as a call sound for 1 second (1000 milliseconds):
```
tone_player_start(TONE_TYPE_SUP_CONGESTION, SOUND_TYPE_CALL, 1000, &tone_player_id);
```
When the duration is set to a specified time, playing is stopped automatically. You can also use the tone_player_stop() function to stop the playback manually.
-
-

+ diff --git a/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm index e4e3642..f276e7b 100644 --- a/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm @@ -16,65 +16,63 @@ -

This tutorial demonstrates how you can transcode and trim video files.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Video Util API basics by learning about:

Initializing Video Utilities +
Initializing Video Utilities
Initialize the video utilities for use.
Managing Transcoding +
Managing Transcoding
Start, cancel, and finish the transcoding process and monitor its progress.

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

Setting Parameters +
Setting Parameters
Set basic parameters for the video utility.
Monitoring the Transcoding Progress +
Monitoring the Transcoding Progress
Get progress information about the transcoding process.

Show All
Hide All

- -

-
-
Initializing Video Utilities
-Hide -
-
+
Initializing Video Utilities
+
Before using the video util:
-
-
-
-
Managing Transcoding
-Hide -
-
+ +
Managing Transcoding
+
To manage the transcoding process:
1. If the prerequisites are set normally, start the transcoding with the video_util_start_transcoding() function.
  @@ -169,7 +162,7 @@ ret = video_util_start_transcoding(video_h);
2. While transcoding:
  -
  - Call the video_util_get_progress_transcoding() function to get the current progress. +
    - Call the video_util_get_progress_transcoding() function to get the current progress.
    - Call the video_util_cancel_transcoding() function to cancel the transcoding process. @@ -186,20 +179,15 @@ ret = video_util_cancel_transcoding(video_h);
      This function destroys the handle of a completed transcoding. The function contains the cancel function, if it is called during the transcoding process.
      
      If you do not call the destroy function after completing the transcoding, new transcoding is not possible, and a memory crash can occur.
-
-

-Hide -

+ +

To set the basic parameters of the video util:

Initialize the video utilities.

Check the supported file format. -

Check the supported file formats:

 error_code = video_util_foreach_supported_file_format(handle, video_util_file_supported, NULL);
@@ -225,7 +213,7 @@ static bool video_util_file_supported(video_util_file_format_e format, void *use

Check the supported codecs. -

Check the supported audio and video codecs:

 video_util_foreach_supported_video_codec(handle, video_util_video_supported, NULL);
@@ -311,14 +299,9 @@ int error_code = video_util_set_fps(handle, 25);

-
-
Monitoring the Transcoding Progress
-Hide -
-
+ +
Monitoring the Transcoding Progress
+
To get the progress of the video util:
1. Initialize the video utilities.
-
-

+ diff --git a/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm index ac0c85a..d896570 100644 --- a/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm @@ -16,54 +16,44 @@ -

+ -

This tutorial demonstrates how to play Waveform Audio File Format (WAV) files.

This tutorial demonstrates how you can play Waveform Audio File Format (WAV) files.

Become familiar with the WAV Player API basics by learning about:

Starting and Stopping the WAV Player +
Starting and Stopping the WAV Player
Start and stop playing a WAV file.

Show All
Hide All

- -

-
-
Starting and Stopping the WAV Player
-Hide -
-
+ +
Starting and Stopping the WAV Player
+
To start and stop the WAV player:
1. To use the functions and data types of the WAV Player API, include the <wav_player.h> header file in your application:
  +
2. To use the functions and data types of the WAV Player API (in mobile and wearable applications), include the <wav_player.h> header file in your application:
```
 #include <stdio.h>
 #include <wav_player.h>
@@ -106,11 +96,6 @@ void my_stop()
 
```
-
-

diff --git a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm index ab1e39d..701e024 100644 --- a/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/network/bluetooth_tutorial_n.htm @@ -16,89 +16,111 @@ -

This tutorial demonstrates how you can use Bluetooth connections.

Become familiar with the Bluetooth API basics by learning about:

Initializing Bluetooth +
Initializing Bluetooth
Initialize Bluetooth for use.
Enabling and Disabling Bluetooth +
Enabling and Disabling Bluetooth
Enable or disable Bluetooth.
Initializing Bluetooth and Checking the Adapter State +
Initializing Bluetooth and Checking the Adapter State
Initialize Bluetooth and check the Bluetooth adapter state.
Finding Other Devices +
Finding Other Devices
Find other devices using Bluetooth.
Serial Port Profile (SPP)
- Connecting to Other Devices Using SPP -
  Connect to other devices through SPP.
- Exchanging Data Using SPP -
  Exchange data between devices through SPP.
- Disconnecting from the Connected Device Using SPP -
  Disconnect from the connected devices.
- Connecting to Other Devices Using SPP +
  Connect to other devices through SPP.
- Exchanging Data Using SPP +
  Exchange data between devices through SPP.
- Disconnecting from the Connected Device Using SPP +
  Disconnect from the connected devices.
Performing GATT Operations +
Create a client to connect to a remote service, get service details, and read and set service attributes.

Object Push Profile (OPP) -

Exchanging Data Using OPP -
Exchange data between devices through OPP.

Exchanging Data Using OPP +
Exchange data between devices through OPP.

Bluetooth LE +
- Enabling the Bluetooth LE Adapter and Checking its State +
  Ensure that the Bluetooth LE (BLE) adapter is enabled.
- Managing Bluetooth LE Scans +
  Start the scan, handle the scanning results, and stop the scan.
- Adding Advertising Data to the LE Advertisement +
  Add advertising data to an LE advertisement or a scan result.
- Setting the Advertising Connectable Mode +
  Define whether the advertising type is connectable or non-connectable.
- Setting the LE Advertising Mode +
  Control the advertising power and latency.
- Starting Advertising +
  Start advertising with the advertising parameters.
Releasing All Resources + +
Releasing All Resources
Release all resources related to using the Bluetooth connection.

Show All
Hide All

- -

-
-
Initializing Bluetooth
-Hide -
-
+
Initializing Bluetooth

To initialize Bluetooth:
1. -
  To use the functions and data types of the Bluetooth API, include the <bluetooth.h> header file in your application:
  +
  To use the functions and data types of the Bluetooth API (in mobile and wearable applications), include the <bluetooth.h> header file in your application:
```
 #include <bluetooth.h>
 
```
-
-
-
-
Enabling and Disabling Bluetooth
-Hide -
-
+ +
Enabling and Disabling Bluetooth

To enable or disable Bluetooth:

No Bluetooth API is provided to enable or disable Bluetooth. Use the Bluetooth ON/OFF application illustrated in the following figure (off screen on the left and on screen on the right).
-
Figure: Bluetooth ON/OFF application
-
+
Figure: Bluetooth ON/OFF application
+
```
 #include <app_control.h>
@@ -167,14 +183,9 @@ int bt_onoff_operation(void)
 
    return 0;
 }
```
-
-
-
-
Initializing Bluetooth and Checking the Adapter State
-Hide -
-
+ +
Initializing Bluetooth and Checking the Adapter State
+
To communicate with other devices using Bluetooth, learn how to check the Bluetooth adapter state:
1. Check, whether the Bluetooth adapter is enabled on your device: @@ -259,14 +270,8 @@ if (ret != BT_ERROR_NONE)
-
-

-Hide -

To find remote Bluetooth devices either through device discovery or querying bonded devices:

@@ -393,10 +398,10 @@ if (ret != BT_ERROR_NONE)

A remote Bluetooth device will respond to the request if it is enabled and in a discovery mode. Classic Bluetooth and Bluetooth LE usages are the same.

 // Classic Bluetooth
-ret = bt_adapter_start_discover_device(type);
+ret = bt_adapter_start_device_discovery();
 if (ret != BT_ERROR_NONE) 
 {
-   dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_start_discover_device] Failed.");
+   dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_start_device_discovery] Failed.");
 }

@@ -422,8 +427,8 @@ else }

To change the visibility mode, use the Bluetooth visibility setting application (shown below with the initial screen on the left and the visibility setting screen on the right).

- -

Bluetooth visibility setting application

Figure: Bluetooth visibility setting application

Bluetooth visibility setting application

 #include <app_control.h>
@@ -546,7 +551,7 @@ if (bt_server_address != NULL)
 
 Requesting Bonding with a Remote Bluetooth Device
 You already got information about a remote device through device discovery or querying a bonded device. You can request to bond with that device using the bt_device_create_bond() function. If you want to cancel bonding, call bt_device_cancel_bonding().
-To get notified when the bonding has finished, register a bt_device_bond_created_cb() callback function using the bt_device_set_bond_created_cb() function. From this callback, you can get the service list that the remote Bluetooth device provides and the service uuid from that service list.
+To get notified when the bonding has finished, register a bt_device_bond_created_cb() callback function using the bt_device_set_bond_created_cb() function. From this callback, you can get the service list that the remote Bluetooth device provides and the service UUID from that service list.
 The example below shows how to implement a bt_device_bond_created_cb() callback function and bond with a remote Bluetooth device.
 
 void device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data) 
@@ -599,14 +604,7 @@ else
 You can verify the bonding by calling the bt_adapter_foreach_bonded_device() function.
 If you want to remove the device from the bonded list, call the bt_device_destroy_bond() function.
 
-

-
-
Connecting to Other Devices Using SPP
-Hide -
-
+
Connecting to Other Devices Using SPP

To connect to other devices:

Connecting as a Server
@@ -628,7 +626,7 @@ if (ret != BT_ERROR_NONE)
This function is declared as follows:
```
int bt_socket_listen_and_accept_rfcomm(int socket_fd, int max_pending_connections)
```
-
- int socket_fd: socket fd passed from bt_socket_create_rfcomm(), which starts listening
-
-
-
Exchanging Data Using SPP
-Hide -
-
+ +
Exchanging Data Using SPP
+
To share data between devices after establishing a connection:
1. To write data, use the bt_socket_send_data() function.
  
  This function is declared as follows:
  @@ -794,14 +787,9 @@ if (ret != BT_ERROR_NONE) }
-
-
-
-
Disconnecting from the Connected Device Using SPP
-Hide -
-
+ +
Disconnecting from the Connected Device Using SPP
+
To disconnect from a device, call the bt_socket_destroy_rfcomm() or bt_socket_disconnect_rfcomm() function:
1. Disconnect the Bluetooth server: @@ -831,14 +819,337 @@ else { dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_destroy_rfcomm] Succeeded. server_socket_fd = %d.", server_socket_fd); }
-
-

-Hide -

+ +

To perform GATT operations:

+int ret = 0;
+// Register for GATT connection callback
+void __bt_gatt_connection_state_changed_cb(int result, 
+                                           bool connected, 
+                                           const char *remote_address, 
+                                           void *user_data) 
+{
+   if (connected)
+      dlog_print(DLOG_INFO, LOG_TAG, "LE connected");
+   else
+      dlog_print(DLOG_INFO, LOG_TAG, "LE disconnected");
+}
+ret = bt_gatt_set_connection_state_changed_cb(__bt_gatt_connection_state_changed_cb, NULL);
+

Create a client to connect to the remote service device: +

+int ret = 0;
+
+ret = bt_gatt_client_create(remote_addr, &client);
+if (ret == BT_ERROR_NONE)
+   dlog_print(DLOG_INFO, LOG_TAG, "Success");
+break;
+

+ +

Discover the service, characteristics, and descriptors of the remote service: +

Discover the service: +

+int ret = 0;
+
+ret = bt_gatt_client_foreach_services(client,
+                                      __bt_gatt_client_foreach_svc_cb, 
+                                      (void *)test_id);
+if (ret != BT_ERROR_NONE) 
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "fail");
+}
+break;
+

Use the bt_gatt_client_foreach_svc_cb() callback to initiate the service characteristics discovery: +

+bool __bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle, void *data)
+{
+   int test_id = (int)data;
+   int ret;
+   char *uuid = NULL;
+   char *str = NULL;
+
+   bt_gatt_get_uuid(svc_handle, &uuid);
+   bt_gatt_get_uuid_specification_name(uuid, &str);
+
+   dlog_print(DLOG_INFO, LOG_TAG, "[%d / %d] %s (%s)", index, total, str ? str : "Unknown", uuid);
+
+   g_free(str);
+   g_free(uuid);
+
+   if (test_id == BT_UNIT_TEST_FUNCTION_GATT_CLIENT_PRINT_ALL) 
+   {
+      ret = bt_gatt_service_foreach_characteristics(svc_handle,
+                                                    __bt_gatt_client_foreach_chr_cb, 
+                                                    (void *)test_id);
+      if (ret != BT_ERROR_NONE) 
+      {
+         dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_foreach_characteristics is failed : %d", ret);
+      }
+
+      return true;
+   }
+}
+

Use the bt_gatt_client_foreach_chr_cb() callback to discover the characteristic descriptors: +

+bool __bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle, void *data)
+{
+   int ret;
+   char *uuid = NULL;
+   char *str = NULL;
+
+   bt_gatt_get_uuid(chr_handle, &uuid);
+   bt_gatt_get_uuid_specification_name(uuid, &str);
+
+   dlog_print(DLOG_INFO, LOG_TAG, "\t[%d / %d] %s (%s)", index, total, str ? str : "Unknown", uuid);
+   __bt_gatt_client_print_value(chr_handle);
+
+   g_free(str);
+   g_free(uuid);
+
+   ret = bt_gatt_characteristic_foreach_descriptors(chr_handle,
+                                                    __bt_gatt_client_foreach_desc_cb, NULL);
+   if (ret != BT_ERROR_NONE)
+      dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_foreach_descriptors is failed : %d", ret);
+
+   return true;
+}
+

Use the bt_gatt_client_foreach_desc_cb() callback to get the descriptor data: +

+bool __bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handle, void *data)
+{
+   char *uuid = NULL;
+   char *str = NULL;
+
+   bt_gatt_get_uuid(desc_handle, &uuid);
+   bt_gatt_get_uuid_specification_name(uuid, &str);
+
+   dlog_print(DLOG_INFO, LOG_TAG, "\t\t[%d / %d] %s (%s)", index, total, str ? str : "Unknown", uuid);
+   __bt_gatt_client_print_value(desc_handle);
+
+   g_free(str);
+   g_free(uuid);
+
+   return true;
+}
+

Read the value of the given attribute handle: +

+{
+   char *svc_uuid = NULL;
+   char *chr_uuid = NULL;
+   char *desc_uuid = NULL;
+   bt_gatt_h svc = NULL;
+   bt_gatt_h chr = NULL;
+   bt_gatt_h desc = NULL;
+
+   if (g_test_param.param_count < 2) 
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "Input parameters first");
+      break;
+   }
+
+   svc_uuid = g_test_param.params[0];
+   chr_uuid = g_test_param.params[1];
+
+   ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
+   if (ret != BT_ERROR_NONE) 
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+      __bt_free_test_param(&g_test_param);
+      break;
+   }
+
+   ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
+   if (ret != BT_ERROR_NONE) 
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+      __bt_free_test_param(&g_test_param);
+      break;
+   }
+
+   if (g_test_param.param_count > 2) 
+   {
+      desc_uuid = g_test_param.params[2];
+      ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
+      if (ret != BT_ERROR_NONE) 
+      {
+         dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor is failed : %d", ret);
+         __bt_free_test_param(&g_test_param);
+         break;
+      }
+      ret = bt_gatt_client_read_value(desc,
+                                       __bt_gatt_client_read_complete_cb, NULL);
+   } 
+   else 
+   {
+      ret = bt_gatt_client_read_value(chr,
+                                       __bt_gatt_client_read_complete_cb, NULL);
+   }
+
+   if (ret != BT_ERROR_NONE) 
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_read_value is failed : %d", ret);
+   }
+
+   __bt_free_test_param(&g_test_param);
+}
+

After the reading operation is complete, use the bt_gatt_client_read_complete_cb() callback to handle values:

+void __bt_gatt_client_read_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
+{
+   char *uuid = NULL;
+   char *str = NULL;
+
+   bt_gatt_get_uuid(gatt_handle, &uuid);
+   bt_gatt_get_uuid_specification_name(uuid, &str);
+
+   dlog_print(DLOG_INFO, LOG_TAG, "Read %s for %s (%s)", 
+              result == BT_ERROR_NONE ? "Success" : "Fail", str ? str : "Unknown", uuid);
+
+   g_free(str);
+   g_free(uuid);
+
+   if (result != BT_ERROR_NONE)
+
+      return;
+
+   __bt_gatt_client_print_value(gatt_handle);
+
+   return;
+}
+

Set a value for the given attribute handle: + +

+{
+   char *svc_uuid = NULL;
+   char *chr_uuid = NULL;
+   char *desc_uuid = NULL;
+   bt_gatt_h svc = NULL;
+   bt_gatt_h chr = NULL;
+   bt_gatt_h desc = NULL;
+
+   if (g_test_param.param_count < 2) 
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "Input parameters first");
+      break;
+   }
+
+   svc_uuid = g_test_param.params[0];
+   chr_uuid = g_test_param.params[1];
+
+   ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
+   if (ret != BT_ERROR_NONE) 
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+      __bt_free_test_param(&g_test_param);
+   break;
+   }
+
+   ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
+   if (ret != BT_ERROR_NONE) 
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+      __bt_free_test_param(&g_test_param);
+      break;
+   }
+
+   if (g_test_param.param_count > 2) 
+   {
+      desc_uuid = g_test_param.params[2];
+      ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
+      if (ret != BT_ERROR_NONE) 
+      {
+         dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor is failed : %d", ret);
+         __bt_free_test_param(&g_test_param);
+         break;
+      }
+
+      ret = __bt_gatt_client_set_value(g_test_param.params[3],
+                                       g_test_param.params[4], desc);
+      if (ret != BT_ERROR_NONE) 
+      {
+         dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_set_value is failed : %d", ret);
+         __bt_free_test_param(&g_test_param);
+         break;
+      }
+
+      ret = bt_gatt_client_write_value(desc,
+                                       __bt_gatt_client_write_complete_cb, NULL);
+   } 
+   else 
+   {
+      ret = __bt_gatt_client_set_value(g_test_param.params[2], 
+                                       g_test_param.params[3], chr);
+      if (ret != BT_ERROR_NONE) 
+      {
+         dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_set_value is failed : %d", ret);
+         __bt_free_test_param(&g_test_param);
+         break;
+      }
+
+      ret = bt_gatt_client_write_value(chr,
+                                       __bt_gatt_client_write_complete_cb, NULL);
+   }
+
+   if (ret != BT_ERROR_NONE) 
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_write_value is failed : %d", ret);
+   }
+
+   __bt_free_test_param(&g_test_param);
+}
+

After the writing operation is complete, use the bt_gatt_client_write_complete_cb() callback to finish the task:

+void __bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
+{
+   char *uuid = NULL;
+   char *str = NULL;
+
+   bt_gatt_get_uuid(gatt_handle, &uuid);
+   bt_gatt_get_uuid_specification_name(uuid, &str);
+
+   dlog_print(DLOG_INFO, LOG_TAG, "Write %s for %s (%s)", 
+              result == BT_ERROR_NONE ? "Success" : "Fail", str ? str : "Unknown", uuid);
+
+   g_free(str);
+   g_free(uuid);
+
+   return;
+}
+

When you no longer need the client, disconnect from the remote service and destroy the client: +

+int ret = 0;
+
+ret = bt_gatt_client_destroy(client);
+if (ret == BT_ERROR_NONE)
+   dlog_print(DLOG_INFO, LOG_TAG, "Success");
+client = NULL;
+break;
+

+ + +

To exchange data with Object Push Profile (OPP):

@@ -848,14 +1159,14 @@ else

The API has a server role to initialize the status of an OPP server device.

 bt_error_e ret;
-
 char *directory = NULL;
 storage_get_directory(0, STORAGE_DIRECTORY_DOWNLOADS, &directory);
+
 void connection_requested_cb_for_opp_server(const char *remote_address, void *user_data)
 {
    dlog_print(DLOG_INFO, LOG_TAG, "remote_address: %s", remote_address);
 }
-ret = bt_opp_server_initialize_by_connection_request (directory, connection_requested_cb_for_opp_server, NULL);
+ret = bt_opp_server_initialize_by_connection_request(directory, connection_requested_cb_for_opp_server, NULL);
 if (ret != BT_ERROR_NONE) 
 {
    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_initialize_by_connection_request] Failed.");
@@ -994,14 +1305,443 @@ if (ret != BLUETOOTH_ERROR_NONE)
    return -1;
 }

-Hide -

+ + + +

+ +

In order to communicate with the remote device or to perform BLE (Bluetooth LE) operations on the local device, the LE adapter must be enabled. The device user can enable or disable BLE in the device with an ON/OFF button. The procedure applies to both basic rate and enhanced data rate (BR/EDR).

+ +

Figure: Bluetooth ON/OFF button

Bluetooth ON/OFF button

+ +

To check whether the BLE adapter is enabled, retrieve the adapter state:

+ +

+bt_adapter_le_state_e  le_adapter_state;
+// Check whether BLE is enabled
+ret = bt_adapter_get_le_state(&le_adapter_state);
+
+if (ret != BT_ERROR_NONE)
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_get_state] Failed");
+
+   return;
+}
+
+// If the Bluetooth service is disabled
+if (le_adapter_state == BT_ADAPTER_DISABLED) 
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "Bluetooth LE adapter is not enabled. You should enable Bluetooth!!");
+}
+

To monitor the changes in the LE adapter and BLE states, define and register the appropriate callback functions.

+ + +

+ +

To discover nearby LE devices, perform a scan:

To start the BLE scan:

+ +

+int main()
+{
+   int ret = BT_ERROR_NONE;
+   ret = bt_adapter_le_start_scan(__bt_adapter_le_scan_result_cb, NULL);
+
+   if (ret != BT_ERROR_NONE) 
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] Failed.");
+   }
+
+   return;
+}
+

Use a registered callback to retrieve the scan results. The callback contains information of all the LE scanned devices, such as the device names, scanned devices' transmission level, service data list, appearance of the devices, and manufacture data of the devices.

To handle the scan result:

+ +

+int ret;
+
+void __bt_adapter_le_scan_result_cb(int result,
+                                    bt_adapter_le_device_scan_result_info_s *info, 
+                                    void *user_data)
+{
+   bt_adapter_le_packet_type_e pkt_type = BT_ADAPTER_LE_PACKET_ADVERTISING;
+
+   if (info == NULL) 
+   {
+      dlog_print T(DLOG_INFO, LOG_TAG, "No discovery_info!");
+
+      return;
+   }
+
+   if (info->adv_data_len > 31 || info->scan_data_len > 31) 
+   {
+      dlog_print (DLOG_INFO, LOG_TAG, "###################");
+      bt_adapter_le_stop_scan();
+      dlog_print (DLOG_INFO, LOG_TAG, "###################");
+
+      return;
+   }
+
+   for (i = 0; i < 2; i++) 
+   {
+      char **uuids;
+      char *device_name;
+      int tx_power_level;
+      bt_adapter_le_service_data_s *data_list;
+      int appearance;
+      int manufacturer_id;
+      char *manufacturer_data;
+      int manufacturer_data_len;
+      int count;
+
+      pkt_type += i;
+      if (pkt_type == BT_ADAPTER_LE_PACKET_ADVERTISING && info->adv_data == NULL) continue;
+      if (pkt_type == BT_ADAPTER_LE_PACKET_SCAN_RESPONSE && info->scan_data == NULL) break;
+
+      if (bt_adapter_le_get_scan_result_service_uuids(info, pkt_type, &uuids, &count) == BT_ERROR_NONE) 
+      {
+         int i;
+         for (i = 0; i < count; i++) 
+         {
+            DLOG_PRINT(DLOG_INFO, LOG_TAG, "UUID[%d] = %s", i + 1, uuids[i]);
+            g_free(uuids[i]);
+         }
+         g_free(uuids);
+      }
+      if (bt_adapter_le_get_scan_result_device_name(info, pkt_type, &device_name) == BT_ERROR_NONE) 
+      {
+         DLOG_PRINT(DLOG_INFO, LOG_TAG, "Device name = %s", device_name);
+         g_free(device_name);
+      }
+      if (bt_adapter_le_get_scan_result_tx_power_level(info, pkt_type, &tx_power_level) == BT_ERROR_NONE) 
+      {
+         DLOG_PRINT(DLOG_INFO, LOG_TAG, "TX Power level = %d", tx_power_level);
+      }
+      if (bt_adapter_le_get_scan_result_service_solicitation_uuids(info, pkt_type, &uuids, &count) == BT_ERROR_NONE) 
+      {
+         int i;
+         for (i = 0; i < count; i++) 
+         {
+            DLOG_PRINT(DLOG_INFO, LOG_TAG, "Solicitation UUID[%d] = %s", i + 1, uuids[i]);
+            g_free(uuids[i]);
+         }
+         g_free(uuids);
+      }
+      if (bt_adapter_le_get_scan_result_service_data_list(info, pkt_type, &data_list, &count) == BT_ERROR_NONE) 
+      {
+         int i;
+         for (i = 0; i < count; i++)
+         DLOG_PRINT(DLOG_INFO, LOG_TAG, "Service Data[%d] = [0x%2.2X%2.2X:0x%.2X...]", i + 1, 
+                    data_list[i].service_uuid[0], data_list[i].service_uuid[1], data_list[i].service_data[0]);
+         bt_adapter_le_free_service_data_list(data_list, count);
+      }
+      if (bt_adapter_le_get_scan_result_appearance(info, pkt_type, &appearance) == BT_ERROR_NONE) 
+      {
+         DLOG_PRINT(DLOG_INFO, LOG_TAG, "Appearance = %d", appearance);
+      }
+      if (bt_adapter_le_get_scan_result_manufacturer_data(info, pkt_type, &manufacturer_id, 
+                                                          &manufacturer_data, &manufacturer_data_len) == BT_ERROR_NONE) 
+      {
+         DLOG_PRINT(DLOG_INFO, LOG_TAG, "Manufacturer data[ID:%.4X, 0x%.2X%.2X...(len:%d)]", 
+                    manufacturer_id, manufacturer_data[0], manufacturer_data[1], manufacturer_data_len);
+         g_free(manufacturer_data);
+      }
+   }
+}
+

+ +

To stop the BLE scan:

+int main()
+{
+   int ret = BT_ERROR_NONE;
+   ret = bt_adapter_le_stop_scan();
+
+   if (ret != BT_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_stop_scan] Failed.");
+   }
+
+   return;
+}
+

+ + +

+ +

LE advertising data can be added to the LE advertisement or the scan response data. You can add various information, such as the device name, service UUID, service solicitation UUID, advertising appearance, advertising transmission power level, device name, and manufacturer data.

To add the advertising data:

+ +

+static bt_advertiser_h advertiser = NULL;
+static bt_advertiser_h advertiser_list[3] = {NULL, };
+static int advertiser_index = 0;
+
+int le_add_advertising_data()
+{
+   int adv_data_type = 3; // Default all
+   int manufacturer_id = 117;
+   char *manufacture = NULL;
+   char manufacture_0[] = {0x0, 0x0, 0x0, 0x0};
+   char manufacture_1[] = {0x01, 0x01, 0x01, 0x01};
+   char manufacture_2[] = {0x02, 0x02, 0x02, 0x02};
+   char manufacture_3[] = {0x03, 0x03, 0x03, 0x03};
+   char service_data[] = {0x01, 0x02, 0x03};
+   const char *time_svc_uuid_16 = "1805";
+   const char *battery_svc_uuid_16 = "180f";
+   const char *heart_rate_svc_uuid_16 = "180d";
+   const char *immediate_alert_svc_uuid_16 = "1802";
+   const char *ancs_uuid_128 = "7905F431-B5CE-4E99-A40F-4B1E122D00D0";
+   int appearance = 192;  // 192 is a generic watch
+
+   advertiser = advertiser_list[advertiser_index];
+
+   if (advertiser == NULL) 
+   {
+      ret = bt_adapter_le_create_advertiser(&advertiser);
+      dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+      advertiser_list[advertiser_index] = advertiser;
+   } 
+   else 
+   {
+      ret = bt_adapter_le_clear_advertising_data(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING);
+      if (ret != BT_ERROR_NONE)
+         dlog_print(DLOG_INFO, LOG_TAG, "clear advertising data [0x%04x]", ret);
+      ret = bt_adapter_le_clear_advertising_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE);
+      if (ret != BT_ERROR_NONE)
+         dlog_print(DLOG_INFO, LOG_TAG, "clear scan response data [0x%04x]", ret);
+   }
+
+   if (g_test_param.param_count > 0) 
+   {
+      adv_data_type = atoi(g_test_param.params[0]);
+      __bt_free_test_param(&g_test_param);
+   }
+
+   switch (adv_data_type) 
+   {
+      case 0: // Service UUID
+         ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,  
+                                                          time_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
+
+         ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                          battery_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
+
+         manufacture = manufacture_0;
+         break;
+
+      case 1: // Service solicitation
+         ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                                       heart_rate_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "dd service_solicitation_uuid [0x%04x]", ret);
+
+         ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                                       immediate_alert_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+         manufacture = manufacture_1;
+         break;
+
+      case 2: // Appearance & TX power level
+         ret = bt_adapter_le_set_advertising_appearance(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                        appearance);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add appearance data [0x%04x]", ret);
+
+         ret = bt_adapter_le_set_advertising_tx_power_level(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, true);
+         if (ret != BT_ERROR_NONE)
+            dlog_print (DLOG_INFO, LOG_TAG, "add appearance data [0x%04x]", ret);
+
+         manufacture = manufacture_2;		
+         break;
+
+      case 3: // All
+         ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                          time_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
+
+         ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                          battery_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
+
+         ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                                       heart_rate_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+         ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                                       immediate_alert_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+         ret = bt_adapter_le_set_advertising_appearance(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                        appearance);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add appearance data [0x%04x]", ret);
+
+         ret = bt_adapter_le_set_advertising_tx_power_level(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                            true);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add tx_power_level [0x%04x]", ret);
+
+         manufacture = manufacture_3;
+         break;
+
+      case 4: // ANCS
+         ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                                       time_svc_uuid_16);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+         ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, 
+                                                                       ancs_uuid_128);
+         if (ret != BT_ERROR_NONE)
+            dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+         ret = bt_adapter_le_set_advertising_device_name(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE, true);
+         if (ret != BT_ERROR_NONE)
+            dlog_print (DLOG_INFO, LOG_TAG, "set device name [0x%04x]", ret);
+
+      return 0;
+
+      default:
+         dlog_print(DLOG_INFO, LOG_TAG, "No adv data");
+         break;
+   }
+   // Default scan response data 
+   ret = bt_adapter_le_add_advertising_service_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE, 
+                                                    time_svc_uuid_16, service_data, 
+                                                    sizeof(service_data));
+   if (ret != BT_ERROR_NONE)
+      dlog_print(DLOG_INFO, LOG_TAG, "add service_data [0x%04x]", ret);
+
+   ret = bt_adapter_le_set_advertising_device_name(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE, true);
+   if (ret != BT_ERROR_NONE)
+      dlog_print(DLOG_INFO, LOG_TAG, "set device name [0x%04x]", ret);
+
+   ret = bt_adapter_le_add_advertising_manufacturer_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE, 
+                                                         manufacturer_id, ;manufacture, sizeof(manufacture_0));
+   if (ret != BT_ERROR_NONE)
+      dlog_print(DLOG_INFO, LOG_TAG, "add manufacturer data [0x%04x]", ret);
+}
+

+ + +

+ +

When advertising to the remote device, use the bt_adapter_le_set_advertising_connectable() function to define whether the advertising type is connectable or non-connectable:

+ +

+static bt_advertiser_h advertiser = NULL;
+static bt_advertiser_h advertiser_list[3] = {NULL,};
+static int advertiser_index = 0;
+int type = BT_ADAPTER_LE_ADVERTISING_CONNECTABLE;
+
+advertiser = advertiser_list[advertiser_index];
+
+if (advertiser == NULL) 
+{
+   ret = bt_adapter_le_create_advertiser(&advertiser);
+   dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+   advertiser_list[advertiser_index] = advertiser;
+}
+
+if (g_test_param.param_count > 0) 
+{
+   type = atoi(g_test_param.params[0]);
+   __bt_free_test_param(&g_test_param);
+}
+
+ret = bt_adapter_le_set_advertising_connectable(advertiser, type);
+if (ret != BT_ERROR_NONE)
+   dlog_print(DLOG_INFO, LOG_TAG, "add scan response data [0x%04x]", ret);
+

+ +

+ +

The advertising mode controls the advertising power and latency, and can be set to the balanced, low latency, or low energy advertising mode.

+ +

To set the advertising mode:

+ + +

+static bt_advertiser_h advertiser = NULL;
+static bt_advertiser_h advertiser_list[3] = {NULL,};
+static int advertiser_index = 0;
+
+int mode = BT_ADAPTER_LE_ADVERTISING_MODE_BALANCED;
+
+advertiser = advertiser_list[advertiser_index];
+
+if (advertiser == NULL) 
+{
+   ret = bt_adapter_le_create_advertiser(&advertiser);
+   dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+   advertiser_list[advertiser_index] = advertiser;
+}
+
+if (g_test_param.param_count > 0) 
+{
+   mode = atoi(g_test_param.params[0]);
+   __bt_free_test_param(&g_test_param);
+}
+
+ret = bt_adapter_le_set_advertising_mode(advertiser, mode);
+if (ret != BT_ERROR_NONE)
+   dlog_print(DLOG_INFO, LOG_TAG, "add scan response data [0x%04x]", ret);
+

+ +

+ +

To start advertising with the given advertiser and advertising parameters information, use the bt_adapter_le_start_advertising_new() function:

+ +

+bt_adapter_le_advertising_state_changed_cb cb;
+
+if (advertiser_index == 0) cb = __bt_adapter_le_advertising_state_changed_cb;
+else if (advertiser_index == 0) cb = __bt_adapter_le_advertising_state_changed_cb_2;
+else cb = __bt_adapter_le_advertising_state_changed_cb_3;
+
+advertiser = advertiser_list[advertiser_index];
+advertiser_index++;
+advertiser_index %= 3;
+
+if (advertiser == NULL) 
+{
+   ret = bt_adapter_le_create_advertiser(&advertiser);
+   dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+   advertiser_list[advertiser_index] = advertiser;
+}
+
+ret = bt_adapter_le_start_advertising_new(advertiser, cb, NULL);
+if (ret < BT_ERROR_NONE)
+   dlog_print(DLOG_INFO, LOG_TAG, "failed with [0x%04x]", ret);
+

+ + + +

To release all Bluetooth resources, call the bt_deinitialize() function:

 // Unregister callbacks
@@ -1020,13 +1760,6 @@ if (ret != BT_ERROR_NONE)
    dlog_print(DLOG_ERROR, LOG_TAG, "[bt_deinitialize] Failed.");
 }

- @@ -1050,4 +1783,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm index 6eede21..838feb4 100644 --- a/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/network/connection_tutorial_n.htm @@ -16,62 +16,67 @@ -

This tutorial demonstrates how you can get the network connection information, such as default gateway and proxy configuration, IPv4 and IPv6 addresses, cellular connection state, and data transfer statistics.

Become familiar with the Connection API basics by learning about:

Initializing Connections +
Initializing Connections
Initialize the connection module for use.
Getting the Network Connection Details +
Getting the Network Connection Details
Get the current connection type, IP address, and proxy information.
Getting the Connection Information +
Getting the Connection Information
Obtain cellular and Wi-Fi connection information with data transfer statistics, such as the amount of total sent/received data and last sent/received data.
Registering the Property Change Callback +
Registering the Property Change Callback
Register a callback for receiving notifications about connection property changes.
IP sockets +
- Initializing a Socket +
  Initialize a socket for use and check the default connection.
- Retrieving the Address Family +
  Get the IP addresses for the hostname.
- Creating the Socket and Managing the Remote Host Connection +
  Create the socket, and communicate with the remote host.
+

Show All
Hide All

- -

-
-
Initializing Connections
-Hide -
-
+ +
Initializing Connections
-
To use the functions and data types of the Connection API, include the <net_connection.h> header file in your application:
+
To use the functions and data types of the Connection API (in mobile and wearable applications), include the <net_connection.h> header file in your application:
```
 #include <net_connection.h>
 
```
@@ -87,16 +92,11 @@ if (error_code != CONNECTION_ERROR_NONE)
Destroy the created connection handle when you do not need it anymore.
```
connection_destroy(connection);
```
-
-
-
-
Getting the Network Connection Details
-Hide -
-
+ +
Getting the Network Connection Details
+
To get the type of the current connection, IP address, and proxy information, the Connection API supports the following network types:
-
- CONNECTION_TYPE_DISCONNECTED
-
-
-
Getting the Connection Information
-Hide -
-
+ +
Getting the Connection Information
+
To obtain cellular and Wi-Fi connection information with data transfer statistics, such as the amount of total sent or received data and last sent or received data (only Wi-Fi and cellular statistics information is supported):
1. To get the cellular connection state, use the connection_get_cellular_state() function. There are 6 states in which the network connection can be: -
-
-
-
-
Registering the Property Change Callback
-Hide -
-
+ +
Registering the Property Change Callback
+
To register callback functions that are called when information changes:
1. Define callback functions. @@ -340,11 +330,282 @@ if (error_code != CONNECTION_ERROR_NONE) // Error handling }
-
-

+ +

+ + + + + + + + + + +

Note
Before executing an application that uses socket connections, add a smack policy. For example: + chsmack -e connman <Application executable path> +

+ +

To initialize a socket for use:

Declare the necessary variables: +

+int main(int argc, char **argv)
+{
+   int rv = 0;
+   int ip_type = -1;
+   char user_url[100] = {0,};
+   char user_port[10] = {0,};
+   char user_msg[200] = {0,};
+   char *local_ipv4 = NULL;
+   char *local_ipv6 = NULL;
+   char *interface_name = NULL;
+
+   connection_type_e net_state;
+   connection_h connection = NULL;
+   connection_profile_h profile_h = NULL;
+
+   // Input the URL and message to be sent
+

Include the required header files and create a connection handle. +

Check whether the default connection is available: +

+   connection_type_e net_state;
+
+   rv = connection_get_type(connection, &net_state);
+   if (rv != CONNECTION_ERROR_NONE || net_state == CONNECTION_TYPE_DISCONNECTED) 
+   {
+      printf("Not connected %d\n", rv);
+      connection_destroy(connection);
+
+      return -1;
+   }
+

Check the address type of the default connection. +

The address type can be IPv4 or IPv6.

+   int ip_type = -1;
+   char *local_ipv4 = NULL;
+   char *local_ipv6 = NULL;
+   connection_profile_h profile_h = NULL;
+
+   rv = connection_get_current_profile(connection, &profile_h);
+   if (rv != CONNECTION_ERROR_NONE) 
+   {
+      printf("Fail to get profile handle %d\n", rv);
+      connection_destroy(connection);
+
+      return -1;
+   }
+
+   rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV6, &local_ipv6);
+   if (rv == CONNECTION_ERROR_NONE && g_strcmp0(local_ipv6, "::") != 0) 
+   {
+      ip_type = CONNECTION_ADDRESS_FAMILY_IPV6;
+      printf("IPv6 address : %s\n", local_ipv6);
+   }
+
+   // If both IPv4 and IPv6 types are set, the IPv4 type is used as default here
+   rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV4, &local_ipv4);
+   if (rv == CONNECTION_ERROR_NONE && g_strcmp0(local_ipv4, &0.0.0.0&) != 0) 
+   {
+      ip_type = CONNECTION_ADDRESS_FAMILY_IPV4;
+      printf("IPv4 address : %s\n", local_ipv4);
+   }
+
+   if (ip_type != CONNECTION_ADDRESS_FAMILY_IPV6 && ip_type != CONNECTION_ADDRESS_FAMILY_IPV4) 
+   {
+      printf("No IP address!\n");
+      goto done;
+   }
+
+   connection_profile_get_network_interface_name(profile_h, &interface_name);
+   printf("Interface Name:%s\n", interface_name);
+}
+

+ +

+ +

To get the IP addresses for the hostname to connect:

Define the user URL and the message to be sent: +

+int main(int argc, char **argv)
+{
+   // Initialize the socket
+
+   printf("Enter the URL and Port: ");
+   rv = scanf("%s %s", user_url, user_port);
+
+   if (rv <= 0) 
+   {
+      printf("scanf() fail %d\n", rv);
+
+      return -1;
+   }
+
+   printf("Enter the message to send : ");
+   rv = scanf("%s", user_msg);
+
+   if (rv <= 0) 
+   {
+      printf("scanf() fail %d\n", rv);
+
+      return -1;
+   }
+

Retrieve the IP addresses: +

+   struct sockaddr_in6 *addr6;
+   struct addrinfo hints;
+   struct addrinfo *result;
+   char user_url[100] = {0,};
+   char user_port[10] = {0,};
+
+   memset(&hints, 0x00, sizeof(struct addrinfo));
+
+   hints.ai_family = PF_UNSPEC;
+   hints.ai_socktype = SOCK_STREAM;
+   hints.ai_protocol = IPPROTO_TCP;
+
+   if (getaddrinfo(user_url, user_port, &hints, &result) != 0) 
+   {
+      printf("getaddrinfo() error\n");
+      goto done;
+   }
+}
+

+ +

+ +

To create the socket and connect to a remote host:

Find the proper address family and create the socket: +

+int sockfd = -1;
+struct addrinfo *rp;
+
+rp = result;
+
+for (rp = result; rp != NULL; rp = rp->ai_next) 
+{
+   if (rp->ai_family == AF_INET && ip_type == CONNECTION_ADDRESS_FAMILY_IPV4) 
+   {
+      if ((sockfd = socket(AF_INET, SOCK_STREAM, 0)) > 0) 
+      {
+         printf("socket error\n");
+         freeaddrinfo(result);
+         goto done;
+      }
+      printf("IPv4\n");
+
+   } 
+   else if (rp->ai_family == AF_INET6 && ip_type == CONNECTION_ADDRESS_FAMILY_IPV6) 
+   {
+      if ((sockfd = socket(AF_INET6, SOCK_STREAM, 0)) < 0) 
+      {
+         printf("socket error\n");
+         freeaddrinfo(result);
+         goto done;
+      }
+      printf("IPv6\n");
+   }
+}
+

Connect to the remote host: +

Use the IPv4 socket: +

+if (connect(sockfd, rp->ai_addr, rp->ai_addrlen) < 0) 
+{
+   printf("connect() error: %s\n", strerror(errno));
+   freeaddrinfo(result);
+   close(sockfd);
+   goto done;
+}
+

Use the IPv6 socket. +

The interface index is needed for the IPv6 connection.

+char *interface_name = NULL;
+
+connection_profile_get_network_interface_name(profile_h, &interface_name);
+printf("Interface Name:%s\n", interface_name);
+
+addr6 = (struct sockaddr_in6 *)rp->ai_addr;
+addr6->sin6_scope_id = if_nametoindex(interface_name);
+
+if ((sockfd = connect(sockfd, (struct sockaddr *)addr6, rp->ai_addrlen)) < 0) 
+{
+   printf("connect() error: %s\n", strerror(errno));
+   freeaddrinfo(result);
+   close(sockfd);
+   goto done;
+}
+

Manage messages: +

Send a message to the remote host: +

+if ((count = write(sockfd, user_msg, 200)) < 0) 
+{
+   printf("write() error: %s\n", strerror(errno));
+
+   freeaddrinfo(result);
+   close(sockfd);
+
+   goto done;
+}
+printf("Sent count: %d, msg: %s\n", count, user_msg);
+

Read a message from the remote host: +

+char buf[257];
+memset(buf, 0x00, 257);
+
+if ((count = read(sockfd, buf, 256)) < 0) 
+{
+   printf("read() error: %s\n", strerror(errno));
+
+   freeaddrinfo(result);
+   close(sockfd);
+
+   goto done;
+}
+buf[count] = '\0';
+printf("\nRead: %s\n", buf);
+

Close the socket and release the resources: +

+freeaddrinfo(result);
+close(sockfd);
+
+done:
+   connection_profile_destroy(profile_h);
+   connection_destroy(connection);
+
+   g_free(local_ipv6);
+   g_free(local_ipv4);
+   g_free(interface_name);
+
+   return 0;
+

+ diff --git a/org.tizen.tutorials/html/native/network/network_tutorials_n.htm b/org.tizen.tutorials/html/native/network/network_tutorials_n.htm index 2aeedc7..961c4d1 100644 --- a/org.tizen.tutorials/html/native/network/network_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/network/network_tutorials_n.htm @@ -16,16 +16,17 @@ -

+ @@ -34,14 +35,19 @@

The connectivity tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The connectivity tutorials demonstrate how to use the following features in creating Tizen native applications:

Connection: Managing Modem Data Connections
Demonstrates how you can get network connection information, such as default gateway and proxy configuration, IPv4/IPv6 address, cellular connection state, and data transfer statistics.
Bluetooth: Managing Bluetooth Devices
Demonstrates how you can enable Bluetooth, connect to other devices, and exchange data.
NFC: Managing Near Field Radio Communication
Demonstrates how you can activate NFC and get cached NFC messages and send and receive NDEF messages using the NFC P2P mode.
Wi-Fi: Managing Wi-Fi and Monitoring Its State
Demonstrates how you can manage Wi-Fi connections and monitor the Wi-Fi state.
Wi-Fi Direct: Managing Wi-Fi Direct™
Demonstrates how you can manage Wi-Fi Direct™ connections.
Connection: Managing Modem Data Connections
Demonstrates how you can get network connection information, such as default gateway and proxy configuration, IPv4/IPv6 address, cellular connection state, and data transfer statistics.
Bluetooth: Managing Bluetooth Devices
Demonstrates how you can enable Bluetooth, connect to other devices, and exchange data.
NFC: Managing Near Field Radio Communication
Demonstrates how you can activate NFC and get cached NFC messages and send and receive NDEF messages using the NFC P2P mode.
SmartCard: Accessing Secure Elements
Demonstrates how you can access secure elements (SE) through smart card features.
Wi-Fi: Managing Wi-Fi and Monitoring Its State
Demonstrates how you can manage Wi-Fi connections and monitor the Wi-Fi state.

The following tutorials apply in mobile applications only:

Wi-Fi Direct: Managing Wi-Fi Direct™
Demonstrates how you can manage Wi-Fi Direct™ connections.

diff --git a/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm b/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm index fb5b07c..512908e 100644 --- a/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm @@ -16,39 +16,41 @@ -

This tutorial demonstrates how you can manage Near Field Communication (NFC) and send and receive NFC Data Exchange Format (NDEF) messages using the NFC peer-to-peer (P2P) mode.

@@ -57,52 +59,42 @@

NFC
- Initializing NFC +
- Initializing NFC
  Initialize NFC for use.
- Enabling and Disabling NFC +
- Enabling and Disabling NFC
  Enable or disable NFC using the toggle application.
- Working with NFC +
- Working with NFC
  Initialize NFC asynchronously, set the NFC tag filter, and register all necessary NFC callbacks.
- Getting a Cached NFC Message -
  Initialize NFC synchronously and get a cached NFC message
- Getting a Cached NFC Message +
  Initialize NFC synchronously and get a cached NFC message.
- Using the HCE Feature +
  Create a host-based card emulation (HCE) application.
NFC P2P bump
- Initializing NFC P2P +
- Initializing NFC P2P
  Initialize NFC P2P for use.
- Sending and Receiving a Message through NFC P2P +
- Sending and Receiving a Message through NFC P2P
  Exchange NDEF messages using NFC P2P between 2 devices.

Show All
Hide All

- -

-
-
Initializing NFC
-Hide -
-
+
Initializing NFC
+
Near Field Communication (NFC) is an international standard (ISO/IEC 18092) that specifies an interface and a protocol for simple wireless interconnection of closely coupled devices. There are 3 groups of application scenarios for NFC:
-
- Device close to a wireless tag
-
-
-
Enabling and Disabling NFC
-Hide -
-
+
Enabling and Disabling NFC

To enable or disable NFC:

The NFC API does not contain functions for enabling or disabling NFC. Use the NFC toggle application illustrated in the following figure (off screen on the left and on screen on the right).
-
Figure: NFC toggle application
-
+
Figure: NFC toggle application
+
```
 #include <app_control.h>
@@ -176,14 +161,8 @@ int nfc_onoff_operation(void)
    return 0;
 }
```
-
-
-
-
Working with NFC
-Hide -
-
+
Working with NFC
+
To work with NFC manually, you need to:
1. Initialize NFC
2. When the initialization is finished, call the nfc_manager_set_activation_changed_cb() function. The function registers the callback that is invoked every time the activation state of NFC changes. The parameters are:
  -
  - Activation state changed callback
  - You need to register callback functions to receive discovery notifications for tag, NDEF, peer-to-peer, secure element, and secure element transaction events. To register a callback function for receiving tag discovery notifications, use the nfc_manager_set_tag_discovered_cb() function. The first argument is the on_nfc_tag_discovered() callback function described later in the tutorial. The second argument is a user data parameter. In our case, that parameter is not needed and you can pass a NULL value to the function. In the same way, register NDEF, peer-to-peer, secure element, and secure element transaction event notifications using:
    -
    - Use the nfc_manager_set_ndef_discovered_cb() function to register an NDEF event notifications with the on_nfc_ndef_discovered() callback function
-
-
-
Getting a Cached NFC Message
-Hide -
-
+ +
Getting a Cached NFC Message
+
To get a cached NFC message:
1. Initialize NFC.
  To initialize NFC, the nfc_manager_initialize() function can be used, as shown in Initializing NFC.
2. Set the NFC tag filter. -
  Setting the NFC tag filter as shown in Working with NFC Tags). Just as a reminder, setting the tag filter is possible by using the nfc_manager_set_tag_filter() function.
  +
  Setting the NFC tag filter (as shown in Working with NFC Tags). Just as a reminder, setting the tag filter is possible by using the nfc_manager_set_tag_filter() function.
```
nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);
```
3. Enable the NFC system handler.
  Before getting the cached message, enable the system handler:
  @@ -581,19 +555,346 @@ if (NFC_ERROR_NONE != error_code) // Error occurred on_nfc_ndef_discovered(clone_message(message), NULL); }
4. Clean up at the application end.
-
-

-Hide -

+ +

+ +

To create a host-based card emulation (HCE) application:

+ +

Initialize the HCE application: +

To initialize NFC, use the nfc_manager_initialize() function:

int ret = NFC_ERROR_NONE;
+
+ret = nfc_manager_initialize();
+
+if (ret != NFC_ERROR_NONE)
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_initialize failed : %d", ret);
+
+   return false;
+}
+

Use the app control to enable NFC.

Make sure that card emulation is enabled. If not, enable it. +

nfc_se_card_emulation_mode_type_e ce_type;
+
+ret = nfc_se_get_card_emulation_mode(&ce_type);
+
+if (ret == NFC_ERROR_NONE && ce_type != true)
+{
+   ret = nfc_se_enable_card_emulation();
+   if (ret != NFC_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_enable_card_emulation failed : %d", ret); 
+
+      return false;
+   }
+}
+else
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_get_card_emulation_mode failed : %d", ret);
+
+   return false;
+}
+

Specify a "AID" value for the application in the tizen-manifest.xml file.
The http://tizen.org/privilege/nfc.cardemulation privilege is required for the HCE API. Add the privilege to the tizen-manifest.xml file.

Define HCE event handling. +

The application must be able to handle an HCE event from the NFC reader. Define and register a callback that is triggered when data arrives from the NFC reader.

Use the nfc_hce_send_apdu_response() function to send a response to the NFC reader. The actual data moving between the NFC reader and the application can be anything. The APDU protocol only defines as a promise between the application producer and NFC reader.

+ +

static void _hce_event_cb(nfc_se_h handle, nfc_hce_event_type_e event,
+                          unsigned char *apdu, unsigned int apdu_len, void *user_data)
+{
+   switch (event)
+   {
+      case NFC_HCE_EVENT_DEACTIVATED:
+         // Do something when NFC_HCE_EVENT_DEACTIVATED event arrives
+         // When the event arrives, apdu and apdu len is NULL and 0
+         break;
+
+      case NFC_HCE_EVENT_ACTIVATED:
+         // Do something when NFC_HCE_EVENT_ACTIVATED event arrives
+         // When the event arrives, apdu and apdu len is NULL and 0
+         break;
+
+      case NFC_HCE_EVENT_APDU_RECEIVED:
+      {
+         unsigned char resp[] = {0x00, 0x01, 0x02, 0x03};
+
+         // Do something when NFC_HCE_EVENT_APDU_RECEIVED event arrives
+         // You can use the arrival apdu and apdu_len
+         // and send a response to the NFC reader
+
+         nfc_hce_send_apdu_response(handle, NULL, 4);
+      }
+         break;
+
+      default:
+         // Error handling
+         break;
+   }
+}
+
+ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
+
+if (ret != NFC_ERROR_NONE)
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_set_hce_event_cb failed : %d", ret);
+
+   return false;
+}
+

Implement optional HCE features: +

To determine whether the application is an active handler for a specific AID or category, use the nfc_se_is_activated_handler_for_aid() and nfc_se_is_activated_handler_for_category() functions: + +

int ret = NFC_ERROR_NONE;
+const char[] aid = {0x00, 0x01, 0x02, 0x03};
+bool is_activated_handler = false;
+
+ret = nfc_se_is_activated_handler_for_aid(aid, &is_activated_handler);
+
+if (ret != NFC_ERROR_NONE)
+{
+   if (is_activated_handler == true)
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is true");
+      // Do something 
+   }
+   else
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is false");
+      // Do something 
+   }
+}
+else
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_is_activated_handler_for_aid is failed : %d", ret);
+}
+
+ret = nfc_se_is_activated_handler_for_category(NFC_CARD_EMULATION_CATEGORY_PAYMENT,
+                                               &is_activated_handler);
+
+if (ret != NFC_ERROR_NONE)
+{
+   if (is_activated_handler == true)
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is true");
+      // Do something 
+   }
+   else
+   {
+      dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is false");
+      // Do something 
+   }
+}
+else
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_is_activated_handler_for_aid is failed : %d", ret);
+}
+

To register or unregister the AID at application runtime, use the nfc_se_register_aid() and nfc_se_unregister_aid() functions: +

int ret = NFC_ERROR_NONE;
+const char[] aid = {0x0A, 0x0B, 0x0C, 0x0D};
+
+ret = nfc_se_register_aid(NFC_CARD_EMULATION_CATEGORY_OTHER, aid);
+
+if (ret != NFC_ERROR_NONE)
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_register_aid is failed : %d", ret);
+
+   return false;
+}
+
+ret = nfc_se_unregister_aid(NFC_CARD_EMULATION_CATEGORY_OTHER, aid);
+
+if (ret != NFC_ERROR_NONE)
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_unregister_aid is failed : %d", ret);
+
+   return false;
+}
+

To check whether the application has a registered AID (including a registered AID at the install time), use the nfc_se_foreach_registered_aids() function (the callback is called for each AID value separately): +

static void _registered_aid_cb(nfc_se_type_e se_type, const char *aid, bool read_only, void *user_data)
+{
+   dlog_print(DLOG_INFO, LOG_TAG, "registered_aids callback is called");
+   // Do something
+}
+
+ret = nfc_se_foreach_registered_aids(NFC_CARD_EMULATION_CATEGORY_OTHER, _registered_aid_cb, NULL);
+
+if (ret != NFC_ERROR_NONE)
+{
+    dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_foreach_registered_aids failed : %d", ret);
+  
+   return false;
+}
+

When HCE operations are no longer needed, deinitialize the resources: +

int ret = NFC_ERROR_NONE;
+
+nfc_manager_unset_hce_event_cb();
+
+ret = nfc_manager_deinitialize();
+if (ret != NFC_ERROR_NONE)
+{
+   dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_deinitialize failed : %d", ret);
+}
+

+ +

The following example shows the entire sample code:

+ +

+#include <service_app.h>
+#include <nfc.h>
+#include <dlog.h>
+
+static void _hce_event_cb(nfc_se_h handle, nfc_hce_event_type_e event,
+                          unsigned char *apdu, unsigned int apdu_len, void *user_data)
+{
+   switch (event)
+   {
+      case NFC_HCE_EVENT_DEACTIVATED:
+         // Do something when NFC_HCE_EVENT_DEACTIVATED event arrives
+         // When the event arrives, apdu and apdu len is NULL and 0
+         break;
+
+      case NFC_HCE_EVENT_ACTIVATED:
+         // Do something when NFC_HCE_EVENT_ACTIVATED event arrives
+         // When the event arrives, apdu and apdu len is NULL and 0
+         break;
+
+      case NFC_HCE_EVENT_APDU_RECEIVED:
+      {
+         unsigned char resp[] = {0x00, 0x01, 0x02, 0x03};
+
+         // Do something when NFC_HCE_EVENT_APDU_RECEIVED event arrives
+         // You can use the arrival apdu and apdu_len
+         // and send a response to the NFC reader
+
+         nfc_hce_send_apdu_response(handle, NULL, 4);
+      }
+         break;
+
+      default:
+         // Error handling
+         break;
+   }
+}
+
+bool service_app_create(void *data)
+{
+   int ret = NFC_ERROR_NONE;
+   nfc_se_card_emulation_mode_type_e ce_type;
+
+   ret = nfc_manager_initialize();
+
+   if (ret != NFC_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_initialize failed : %d", ret);
+
+      return false;
+   }
+
+   // App control
+
+   ret = nfc_se_get_card_emulation_mode(&ce_type);
+
+   if (ret == NFC_ERROR_NONE && ce_type != true)
+   {
+      nfc_se_enable_card_emulation();
+      if (ret != NFC_ERROR_NONE)
+      {
+         dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_enable_card_emulation failed : %d", ret);
+
+         return false;
+      }
+   }
+   else
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_get_card_emulation_mode failed : %d", ret);
+
+      return false;
+   }
+
+   ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
+
+   if (ret != NFC_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_set_hce_event_cb failed : %d", ret);
+
+      return false;
+   }
+
+   return true;
+}
+
+void service_app_terminate(void *data)
+{
+   int ret = NFC_ERROR_NONE;
+
+   nfc_manager_unset_hce_event_cb();
+
+   ret = nfc_manager_deinitialize();
+   if (ret != NFC_ERROR_NONE)
+   {
+      dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_deinitialize failed : %d", ret);
+   }
+
+   return;
+}
+
+void service_app_control(app_control_h app_control, void *data)
+{
+   // Todo: add your code here
+	
+   return;
+}
+
+void service_app_low_memory_callback(void *data)
+{
+   // Todo: add your code here
+   service_app_exit();
+
+   return;
+}
+
+void service_app_low_battery_callback(void *data)
+{
+   // Todo: add your code here
+   service_app_exit();
+
+   return;
+}
+
+int main(int argc, char* argv[])
+{
+   char ad[50] = {0,};
+   service_app_event_callback_s event_callback;
+
+   event_callback.create = service_app_create;
+   event_callback.terminate = service_app_terminate;
+   event_callback.app_control = service_app_control;
+   event_callback.low_memory = service_app_low_memory_callback;
+   event_callback.low_battery = service_app_low_battery_callback;
+
+   return service_app_main(argc, argv, &event_callback, ad);
+}
+

+ + +

To initialize NFC P2P:

Make sure you have 2 target devices that support the NFC P2P mode. Note that the device screen should be unlocked to use NFC.
To use the functions and data types of the NFC API, include the <nfc.h> header file in your application:
+
To use the functions and data types of the NFC API (in mobile and wearable applications), include the <nfc.h> header file in your application:
```
 #include <nfc.h>
 
```
At the end of the application life-cycle, call the nfc_manager_deinitialize() function. It releases all resources of the NFC manager and disconnects the session between it and your application.
```
nfc_manager_deinitialize();
```

-
-
Sending and Receiving a Message through NFC P2P
-Hide -
-
+ +
Sending and Receiving a Message through NFC P2P
+
To send and receive messages using the NFC P2P mode (a simple NDEF message containing a business card (name, phone number, and e-mail address) of the device owner is prepared and exchanged with the second device):
1. Prepare the NDEF message. @@ -679,12 +975,6 @@ nfc_ndef_record_get_text(ndef_record, &email);
  Then you can use obtained values to create, for example, a new contact.
  
  Note that depending on the record type, some obtained values should be freed and others should not. For example, you should free the obtained text from a text record. See the documentation to know how to get the payload of other types of records.
-
-

@@ -709,4 +999,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm b/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm new file mode 100644 index 0000000..da51729 --- /dev/null +++ b/org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm @@ -0,0 +1,526 @@ + + + + + + + + + + + + + + SmartCard: Accessing Secure Elements + + + + + + +

+ + +

This tutorial demonstrates how you can manage smart card features and access secure elements (SE).

+ +

Become familiar with the SmartCard API basics by learning about:

Using the SE Service +
Initialize the SE service and retrieve available readers.
Managing the Reader +
Retrieve the reader name, check whether the SE is present in the reader, open sessions, and close all sessions.
Managing Sessions +
Retrieve session information, open basic and logical channels, and close channels and the session.
Managing Channels +
Retrieve channel information, select the next applet, transmit APDU commands, and close the channel.
Sending a Transmission +
Retrieve a reader, open a session and a logical channel, and transmit an APDU command over the channel.

+ +

+ +

To use the SE service:

Initialize the smart card service for use:

+int ret;
+ret = smartcard_initialize();
+
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard initialize success");
+else
+   TC_PRT("smartcard initialize failed");
+

The service is no longer needed, deinitialize it:

+int ret;
+ret = smartcard_deinitialize();
+
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard deinitialize success");
+else
+   TC_PRT("smartcard deinitialize failed");
+

Retrieve the available readers with the smartcard_get_readers() function:

+int pLength;
+int *phReaders = NULL;
+
+ret = smartcard_get_readers(&phReaders, &pLength);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   TC_PRT("smartcard_get_readers is success");
+   TC_PRT("reader handle : %d", phReaders[0]);
+   TC_PRT("readers length : %d", pLength);
+}
+else
+{
+   TC_PRT("smartcard_get_readers failed : %d", ret);
+}
+

+ +

+ +

To manage a reader:

+ +

Retrieve the name of the reader with the smartcard_reader_get_name() function:

+int ret;
+char * pReader = NULL;
+
+ret = smartcard_reader_get_name(reader, &pReader);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   TC_PRT("smartcard_reader_get_name success");
+   TC_PRT("reader name : %s", pReader);
+}
+else
+{
+   TC_PRT("smartcard_reader_get_name failed : %d", ret);
+}
+

Before establishing a session, use the smartcard_reader_is_secure_element_present() function to make sure that the SE is present in the reader:

+ +

+int ret;
+bool is_present = false;
+
+ret = smartcard_reader_is_secure_element_present(reader, &is_present);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   TC_PRT("smartcard_reader_is_secure_element_present is success");
+   TC_PRT("reader secure element present : %d", is_present);
+}
+else
+{
+   TC_PRT("smartcard_reader_is_secure_element_present failed : %d", ret);
+}
+

Open a session to connect to the SE in the reader using the smartcard_reader_open_session() function.

When you no longer need the session, use the smartcard_reader_close_sessions() function to close all sessions opened on the specific reader.

+int ret;
+int session;
+ret = smartcard_reader_open_session(reader, &session);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   ret = smartcard_reader_close_sessions(reader);
+   if (ret == SMARTCARD_ERROR_NONE)
+   {
+      TC_PRT("smartcard_reader_close_sessions success");
+   }
+   else
+   {
+      TC_PRT("smartcard_reader_close_sessions failed : %d", ret);
+   }
+}
+else
+{
+   TC_PRT("open session failed : %d", ret);
+}
+

+ + +

+ +

You can manage a session using the session instance that you have created when opening the session with a reader. The session instance is the first parameter in all session-related APIs.

+ +

To manage sessions:

+ +

Retrieve the reader that provides the session: +

int ret;
+int reader;
+
+ret = smartcard_session_get_reader(session, &reader);
+ret = smartcard_reader_get_name(reader, &pReader);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   TC_PRT("smartcard_session_get_reader success");
+   TC_PRT("reader name : %s", pReader);
+}
+else
+{
+   TC_PRT("smartcard_session_get_reader failed");
+}
+

Retrieve the answer to reset (ATR) of the SE: +

+int ret;
+unsigned char *pAtr;
+int pLength;
+
+ret = smartcard_session_get_atr(session, &pAtr, &pLength);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   TC_PRT("smartcard_session_get_atr success : %d", pLength);
+   for (i = 0; i < pLength; i++)
+      TC_PRT("%x ", (int)pAtr[i]);
+}
+else
+{
+   TC_PRT("smartcard_session_get_atr failed");
+}
+

Open a basic or logical channel. +

A basic channel is defined in the ISO/IEC 7816-4 specification (the one that has number 0). To open a logical channel with the SE, you must select the applet represented by the given Application ID (AID).

+int ret;
+unsigned char aid[] = {0x00, 0x01, 0x02, 0x03};
+int channel;
+
+// Open basic channel
+ret = smartcard_session_open_basic_channel(session, aid, 4, 0x00, &channel);
+
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard_session_open_basic_channel is success : %d", channel);
+else
+   TC_PRT("smartcard_session_open_basic_channel failed");
+
+// Open logical channel
+ret = smartcard_session_open_logical_channel(session, aid, 12, 0x04, &channel);
+
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard_session_open_basic_channel is success : %d", (channel);
+else
+   TC_PRT("smartcard_session_open_basic_channel failed : %d", ret);
+

Close all channels opened for a specific session: + +

+int ret;
+ret = smartcard_session_close_channels(session);
+
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard_session_close_channels is success");
+else
+   TC_PRT("smartcard_session_close_channels failed");
+

Close a session and check that it is truly closed: + +

+int ret;
+bool is_closed;
+
+ret = smartcard_session_close(session);
+
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard_session_close is success");
+else
+   TC_PRT("smartcard_session_close failed");
+
+ret = smartcard_session_is_closed(session, &is_closed);
+
+if (ret == SMARTCARD_ERROR_NONE && is_closed == true)
+   TC_PRT("smartcard_session_is_closed is success");
+else
+   TC_PRT("smartcard_session_is_closed failed");
+

+ +

+ +

You can manage a channel using the channel instance that you have created when opening the channel with a session. The channel instance is the first parameter in all channel-related APIs.

+ +

To manage channels:

+ +

Retrieve the session that has opened the specific channel: +

int ret;
+int session_handle;
+
+ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   ret = smartcard_channel_get_session(channel, &session_handle);
+
+   if (ret == SMARTCARD_ERROR_NONE)
+      TC_PRT("smartcard_channel_get_session is success: %d", session_handle);
+   else
+      TC_PRT("smartcard_channel_get_session failed");
+}
+

Check whether a specific channel is a basic or logical channel: +

+int ret;
+bool is_basic;
+
+ret = smartcard_channel_is_basic_channel(channel, &is_basic);
+
+if (ret == SMARTCARD_ERROR_NONE && is_basic == false)
+   TC_PRT("smartcard_channel_is_basic_channel is success");
+else
+   TC_PRT("smartcard_channel_is_basic_channel failed");
+

Select the next applet on the specific channel that matches to the partial Application ID (AID): +

+ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   bool is_next = true;
+   ret = smartcard_channel_select_next(channel, &is_next);
+   if (ret == SMARTCARD_ERROR_NONE && is_next == false)
+      TC_PRT("smartcard_channel_select_next is success");
+   else
+      TC_PRT("smartcard_channel_select_next failed");
+}
+

To get a response for the selection command, use the smartcard_channel_get_select_response() function:

+int i, ret;
+unsigned char* pSelectResponse;
+int pLength;
+
+ret = smartcard_channel_get_select_response(channel, &pSelectResponse, &pLength);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   TC_PRT("smartcard_channel_get_select_response is success");
+   for (i = 0; i < pLength; i++)
+      g_print("%x ", (int)pSelectResponse[i]);
+}
+else
+{
+   TC_PRT("smartcard_channel_get_select_response failed");
+}
+

Check whether a specific channel is closed: + +

+int ret;
+bool is_close;
+
+ret = smartcard_channel_close(channel);
+ret = smartcard_channel_is_closed(channel, &is_close);
+
+if (ret == SMARTCARD_ERROR_NONE && is_close == true)
+   TC_PRT("smartcard_channel_is_closed is success");
+else
+   TC_PRT("smartcard_channel_is_closed failed");
+

Close the channel opened for a specific SE: + +

+int ret;
+
+ret = smartcard_channel_close(channel);
+                        
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard_channel_close is success");
+else
+   TC_PRT("smartcard_channel_close failed : %d", ret);
+

Transmit an APDU command (as per ISO/IEC 7816-4) to the SE: + +

+ret = smartcard_channel_transmit(channel, command, 4, &response, &resp_len);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   TC_PRT("smartcard_channel_transmit is success");
+   TC_PRT("response is ");
+   for (i = 0; i < resp_len; i++)
+      TC_PRT("%x ", (int)response[i]);
+   TC_PRT("\n"); 
+}
+else
+{
+   TC_PRT("smartcard_channel_transmit failed");
+}
+

To get a response for the transmission, use the smartcard_channel_transmit_retrieve_response() function:

+int i;
+unsigned char * ptransmitResponse;
+
+ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+   ret = smartcard_channel_transmit(channel, command, 11, &response, &resp_len);
+   ret = smartcard_channel_transmit_retrieve_response(channel, &ptransmitResponse, &pLength);
+
+   if (ret == SMARTCARD_ERROR_NONE)
+   {
+      TC_PRT("smartcard_channel_transmit_get_response is success");
+      TC_PRT("response is ");
+      for ( i = 0; i < pLength; i++)
+         TC_PRT("%x ", (int)ptransmitResponse[i]);
+      TC_PRT("\n");
+   }
+   else
+   {
+      TC_PRT("smartcard_channel_transmit_get_response failed");
+   }
+}
+

+ +

+ +

This use case covers the entire work flow of sending an APDU transmission from getting a reader to closing the session afterwards.

+ +

To send a transmission:

+ +

Define the required variables and initialize the smart card service for use: +

+int i = 0;
+int pLength;
+int *phReaders = NULL;
+int session;
+int channel;
+unsigned char aid[] = {0xA0, 0x00, 0x00, 0x00, 0x63, 0x50, 0x4B, 0x43, 0x53, 0x2D, 0x31, 0x35};
+unsigned char command[] = {0x00, 0x28, 0x00, 0x00};
+unsigned char *response = NULL;
+int resp_len = 50;
+
+ret = smartcard_initialize();
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard initialize success");
+else
+   TC_PRT("smartcard initialize failed");

Get the available readers: +

+ret = smartcard_get_readers(&phReaders, &pLength);

Open a session: +

+if (ret == SMARTCARD_ERROR_NONE && pLength != 0)
+{
+   ret = smartcard_reader_open_session(phReaders[0], &session);

Open a logical channel: +

+   if (ret == SMARTCARD_ERROR_NONE && session != 0)
+   {
+      ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);

Transmit the command: +

+      if (ret == SMARTCARD_ERROR_NONE)
+      {
+         ret = smartcard_channel_transmit(channel, command, 4, &response, &resp_len);
+         if (ret == SMARTCARD_ERROR_NONE)
+         {
+            TC_PRT("smartcard_channel_transmit is success");
+            TC_PRT("response is ");
+            for (i = 0; i < resp_len; i++)
+               TC_PRT("%x ", (int)response[i]);
+            TC_PRT("\n");
+         }
+         else
+         {
+            TC_PRT("smartcard_channel_transmit failed");
+         }
+      }
+   }

Close the session: +

+   ret = smartcard_session_close(session);
+}
+

Deinitialize the service: +

+ret = smartcard_deinitialize();
+
+if (ret == SMARTCARD_ERROR_NONE)
+   TC_PRT("smartcard deinitialize success");
+else
+   TC_PRT("smartcard deinitialize failed");
+

+ + + + +

+ +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm index d09727b..a11d856 100644 --- a/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm @@ -16,71 +16,71 @@ -

- -

This tutorial demonstrates how to manage Wi-Fi Direct™ connections.

+ +

This tutorial demonstrates how you can manage Wi-Fi Direct™ connections.

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Wi-Fi Direct API basics by learning about:

Initializing Wi-Fi Direct™ +
Initializing Wi-Fi Direct™
Initialize Wi-Fi Direct™ for using all Wi-Fi Direct™ functions.
Activating Wi-Fi Direct™ +
Activating Wi-Fi Direct™
Activate the Wi-Fi Direct™ local device asynchronously.
Peers and groups
- Getting the Wi-Fi Direct™ Peer Device Information +
- Getting the Wi-Fi Direct™ Peer Device Information
  Obtain the Wi-Fi Direct™ peer device information.
- Connecting to a Specific Wi-Fi Direct™ Peer Device +
- Connecting to a Specific Wi-Fi Direct™ Peer Device
  Connect to a specific Wi-Fi Direct™ peer device.
- Managing Wi-Fi Direct™ Groups +
- Managing Wi-Fi Direct™ Groups
  Create a Wi-Fi Direct™ group, and manage group members and information.
Deactivating Wi-Fi Direct™ +
Deactivating Wi-Fi Direct™
Deactivate the Wi-Fi Direct™ local device asynchronously.

Show All
Hide All

- -

-
-
Initializing Wi-Fi Direct™
-Hide -
-
+ +
Initializing Wi-Fi Direct™
+
To be able to use all Wi-Fi Direct™ functions, initialize Wi-Fi Direct™:
-
-
-
-
Activating Wi-Fi Direct™
-Hide -
-
+ +
Activating Wi-Fi Direct™
+
To activate and deactivate a Wi-Fi Direct™ local device and to check the Wi-Fi Direct™ local device state:
@@ -190,14 +185,9 @@ wifi_direct_state_e state = WIFI_DIRECT_STATE_DEACTIVATED; wifi_direct_get_state(&state); printf("Wi-Fi Direct™ state: %d.\n", state);

 wifi_direct_deactivate(NULL);

- -

diff --git a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm index 6d279ac..696155f 100644 --- a/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm @@ -16,58 +16,47 @@ -

This tutorial demonstrates how you can manage Wi-Fi connections and monitor the state of Wi-Fi.

Become familiar with the Wi-Fi API basics by learning about:

Initializing Wi-Fi
Initialize Wi-Fi for use.
Activating a Wi-Fi Device
Activate the Wi-Fi device asynchronously.
Scanning for Access Points
Scan the nearby access points and retrieve information about them.
Connecting to a Specific Access Point
Connect to a specific access point after scanning.
Deactivating the Wi-Fi Device
Deactivate the Wi-Fi device asynchronously.
Initializing Wi-Fi
Initialize Wi-Fi for use.
Activating a Wi-Fi Device
Activate the Wi-Fi device asynchronously.
Scanning for Access Points
Scan the nearby access points and retrieve information about them.
Connecting to a Specific Access Point
Connect to a specific access point after scanning.
Deactivating the Wi-Fi Device
Deactivate the Wi-Fi device asynchronously.

Show All
Hide All

- -

-
-
Initializing Wi-Fi
-Hide -
-
-
To use the functions and data types of the Wi-Fi API, include the <wifi.h> header file in your application:
+
Initializing Wi-Fi
+ +
To use the functions and data types of the Wi-Fi API (in mobile and wearable applications), include the <wifi.h> header file in your application:
```
 #include <wifi.h>
 
```
@@ -86,14 +75,9 @@ if (error_code != WIFI_ERROR_NONE)
```
 wifi_deinitialize();
 
```
-
-
-
-
Activating a Wi-Fi Device
-Hide -
-
+ +
Activating a Wi-Fi Device
+
To activate and deactivate a local Wi-Fi device, and to check that Wi-Fi is activated:
1. Activate a Wi-Fi device using the wifi_activate() function. After the wifi_activate() function is completed, the __wifi_activated_cb() function is invoked. @@ -127,14 +111,8 @@ else }
-
-
-
-
Scanning for Access Points
-Hide -
-
+
Scanning for Access Points
+
To scan nearby access points, and after scanning, to print the result of the scan, such as the AP name and state:
1. Scan nearby access points asynchronously. When the scan is finished, the __scan_request_cb() function is called. @@ -200,14 +178,9 @@ static const char* print_state(wifi_connection_state_e state)
  You can get other information, including frequency, IP address, and security type. For more information, see the Wi-Fi guide.
-
-
-
-
Connecting to a Specific Access Point
-Hide -
-
+ +
Connecting to a Specific Access Point
+
To make a connection using a specific access point:
1. Select an access point. @@ -306,23 +279,13 @@ static void __connected_cb(wifi_error_e result, void* user_data) dlog_print(DLOG_INFO, LOG_TAG, "Wi-Fi Connection Failed!"); }
-
-
-
-
Deactivating the Wi-Fi Device
-Hide -
-
+ +
Deactivating the Wi-Fi Device
+
To power off the Wi-Fi device when Wi-Fi is no longer needed (or the application is exiting), use the wifi_deactivate() function:
```
 wifi_deactivate(NULL, NULL);
 
```
-
-

diff --git a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm index 5f8f9cc..7b8221e 100644 --- a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm @@ -15,38 +15,39 @@ -

This tutorial demonstrates how you can use the key manager to create a secure repository for keys, certificates, and sensitive data.

@@ -85,35 +86,18 @@

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

Show All
Hide All

- -

-
-
Initializing the Key Manager
- Hide -
-
+
Initializing the Key Manager
+
To define the header file and privileges required to use the key manager:
1. To use the Key Manager privileged API, declare the http://tizen.org/privilege/keymanager privilege in the <package name>.xml file of the application package.
2. To use the functions and data types of the Key Manager API, include the <ckmc/ckmc-manager.h> header file in your application:
  +
3. To use the functions and data types of the Key Manager API (in mobile and wearable applications), include the <ckmc/ckmc-manager.h> header file in your application:
```
 #include <ckmc/ckmc-manager.h>
 
```
-
-
-
-
Saving, Getting, or Removing a Key
- Hide -
-
+ +
Saving, Getting, or Removing a Key
+
To store, remove, and retrieve client keys from the key manager:
1. Store a new key. @@ -189,7 +173,7 @@ plist = alias_list; do { ckmc_get_key(plist->alias, key_password, &test_key); - dlog_print(DLOG_INFO, LOG_TAG, "%d th key : key size =%d\n", ++count_list, test_key->key_size); + dlog_print(DLOG_INFO, LOG_TAG, "%d th key : key size =%d\n", ++count_list, test_key->key_size); ckmc_key_free(test_key); plist = plist->next; } @@ -210,14 +194,8 @@ if (CKMC_ERROR_NONE != ret) }
-
-
-
-
Saving, Getting, or Removing a Certificate
- Hide -
-
+
Saving, Getting, or Removing a Certificate
+
To store, remove, or retrieve the client certificate from the key manager:
1. Store a new certificate. @@ -331,14 +309,8 @@ if (CKMC_ERROR_NONE != ret) }
-
-
-
-
Saving, Getting, or Removing Data
- Hide -
-
+
Saving, Getting, or Removing Data
+
To store, remove, or retrieve client data on or from the key manager:
1. Store new data. @@ -424,17 +396,11 @@ if (CKMC_ERROR_NONE != ret) }
-
-

- Hide -

To generate asymmetric key pairs - the RSA, ECDSA, or DSA key pair:

Create the RSA key pair:

 int ret = CKMC_ERROR_NONE;
 
@@ -500,21 +466,15 @@ policy_public_key.password = NULL;
 policy_public_key.extractable = true;
 
 ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
-if(CKMC_ERROR_NONE != ret)
+if (CKMC_ERROR_NONE != ret)
 
 {
    // Error handling
 }

-
-
Creating or Verifying Signatures
- Hide -
-
+
Creating or Verifying Signatures
+
To create or verify signatures:
1. Store a private and public key.
```
@@ -604,7 +564,7 @@ if (CKMC_ERROR_NONE != ret)
 
```
2. Create and verify the signature: -
-
-
-
-
Verifying or Getting a Certificate Chain
- Hide -
-
+
Verifying or Getting a Certificate Chain

To verify and get a certificate chain using raw certificates or a certificate alias for untrusted certificates:
-
- Get a certificate chain with raw certificates.
  +
  - Get a certificate chain with raw certificates.
    
    The key manager verifies a certificate chain and returns it. The trusted root certificate of the chain must exist in the system certificate storage.
```
 int ret = CKMC_ERROR_NONE;
@@ -919,17 +872,12 @@ while(next != NULL);
 
 ckmc_cert_list_all_free(cert_chain_list); // Called when the list is no longer needed
 
```
  -
-
-
-
Loading a Certificate or a PKCS#12 File
- Hide -
-
+ +
Loading a Certificate or a PKCS#12 File
+
To load certificates (from a file with the DER or PEM format) or a private key, a certificate, or CA certificates (from a PKCS#12 file):
-
- Load from a certificate file.
  +
  - Load from a certificate file.
```
 int ret = CKMC_ERROR_NONE;
 
@@ -988,14 +936,8 @@ ckmc_cert_free(cert); // Called when the certificate is no longer needed
 ckmc_cert_list_all_free(ca_cert_list); // Called when the list is no longer needed
 
```
  -
-
-
-
Implementing Access Control
- Hide -
-
+
Implementing Access Control
+
To implement access control rules for each individual client's data, certificates, and keys:
1. Store test data:
  @@ -1065,13 +1007,6 @@ if (CKMC_ERROR_NONE != ret)
-
-

- -

- diff --git a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm index 06c1b08..d4f29a1 100644 --- a/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm @@ -15,26 +15,27 @@ -

This tutorial demonstrates how you can display privilege information, such as the name and description of a given privilege.

@@ -46,29 +47,17 @@

Get privilege information, such as the display name and description of a privilege.

Show All
Hide All

- -

-
-
Getting Privilege Information
- Hide -
-
+
Getting Privilege Information
+
To get privilege display information:
1. To use the functions and data types of the Privilege Info API, include the <privilege_information.h> header file in your application:
  +
2. To use the functions and data types of the Privilege Info API (in mobile and wearable applications), include the <privilege_information.h> header file in your application:
```
 #include <privilege_information.h>
 
```
3. To get various privilege information: -
-

- -

- diff --git a/org.tizen.tutorials/html/native/security/security_tutorials_n.htm b/org.tizen.tutorials/html/native/security/security_tutorials_n.htm index 031b942..d57853a 100644 --- a/org.tizen.tutorials/html/native/security/security_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/security/security_tutorials_n.htm @@ -15,26 +15,27 @@ -

The security tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The security tutorials demonstrate how to use the following features in creating Tizen native applications:

Key Manager: Using Keys and Certificates, and Implementing Access Control
Demonstrates how you can create a secure repository for keys, certificates, and sensitive data.
Privilege Info: Managing Privilege Information
Demonstrates how you can display privilege information, such as the name and description of a given privilege.
Key Manager: Using Keys and Certificates, and Implementing Access Control
Demonstrates how you can create a secure repository for keys, certificates, and sensitive data.
Privilege Info: Managing Privilege Information
Demonstrates how you can display privilege information, such as the name and description of a given privilege.

diff --git a/org.tizen.tutorials/html/native/social/account_tutorial_n.htm b/org.tizen.tutorials/html/native/social/account_tutorial_n.htm index 76b905f..f87872e 100644 --- a/org.tizen.tutorials/html/native/social/account_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/social/account_tutorial_n.htm @@ -14,34 +14,34 @@ -

+ @@ -49,63 +49,62 @@

This tutorial demonstrates how you can create, delete, and update accounts in the account database, and manage account information, such as user name, display name, domain name, and email address.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Account Manager API basics by learning about:

Initializing the Accounts +
Initializing the Accounts
Initialize the account manager for use.
Creating and Managing an Account +
Creating and Managing an Account
Create an account, set its properties, and insert it to the database.
Information retrieval
- Getting Account Information +
- Getting Account Information
  Retrieve information for each existing account and implement a callback function.
- Retrieving Accounts by Package Name +
- Retrieving Accounts by Package Name
  Retrieve accounts based on a specific package.
- Retrieving Account Providers by Capability +
- Retrieving Account Providers by Capability
  Retrieve accounts providers based on a specific capability.
Removing an Account +
Removing an Account
Remove an account from the database.
Destroy the Account Handle +
Destroying the Account Handle
Destroy the account handle.
Adding an Application on the Account Screen +
Adding an Application on the Account Screen
Display your application on the Add account screen of a Tizen device.

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

Performing Database Queries +
Performing Database Queries
Manage accounts and query them based on various attributes.
Managing Account Secrecy +
Managing Account Secrecy
Manage account secrecy levels.
Updating Accounts +
Updating Accounts
Update account details.
Retrieving Account Types +
Retrieving Account Types
Retrieve account types.

Show All
Hide All

- -

-
-
Initializing the Accounts
-Hide -
-
+
Initializing the Accounts
+
To initialize the account manager:
1. To use the functions and data types of the Account Manager API, include the <account.h> header file in your application:
  @@ -126,7 +125,7 @@ int ret = 0;
2. Set up the required privileges for your application:
  -
-
-
-
-
Creating and Managing an Account
-Hide -
-
+ +
Creating and Managing an Account
+
To create an account, set it properties, and add it to the account database:
1. Create an account using the account_create() function and the previously defined account handle:
```
@@ -180,14 +173,9 @@ ret = account_insert_to_db(account, &account_id);
 
```
-
-
-
-
Getting Account Information
-Hide -
-
+ +
Getting Account Information
+
To get account information, such as user name, display name, domain name, and email address:
-
-
-
-
Retrieving Accounts by Package Name
-Hide -
-
+ +
Retrieving Accounts by Package Name
+
To retrieve accounts by a specific account provider:
1. Define the account_cb() callback for getting data of accounts as a parameter of the account_query_account_by_package_name() function. @@ -292,14 +275,9 @@ char* package_name = "package_name"; ret = account_query_account_by_package_name(account_callback, package_name, NULL);
-
-
-
-
Retrieving Account Providers by Capability
-Hide -
-
+ +
Retrieving Account Providers by Capability
+
To retrieve account providers by a specific capability:
1. Define account_type_cb() callback for getting account providers as a parameter of the account_type_query_by_provider_feature() function. The callback takes the account provider handle as the first parameter. @@ -319,14 +297,9 @@ char* capability = "http://tizen.org/account/capability/contact"; ret = account_type_query_by_provider_feature(account_type_callback, capability, NULL);
-
-
-
-
Removing an Account
-Hide -
-
+ +
Removing an Account
+
To remove an account, use the account_delete_from_db_by_id(), account_delete_from_db_by_user_name(), or account_delete_from_db_by_package_name() function. They all remove a given account record.
@@ -343,31 +316,16 @@ ret = account_type_query_by_provider_feature(account_type_callback, capability,
```
 ret = account_delete_from_db_by_id(account_id);
 
```
- - -
-
-
Destroy the Account Handle
-Hide -
-
-
To destroy the Account Handle:
-
1. To destroy the account handle, use the account_destroy() function: +
  Destroying the Account Handle
  + +
  To destroy the account handle, use the account_destroy() function:
  
  ret = account_destroy(account);
  -
-
-
-
-
-
Adding an Application on the Account Screen
-Hide -
-
+ +
Adding an Application on the Account Screen
+
To add your application on the Add account screen of the device:
1. Create the sign-in screen UI.
  When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (ACCOUNT_OPERATION_SIGNIN) defined in the account-types.h header file, so the sign-in screen must be displayed.
  -
  Figure: Sign-in screen
  -
  +
  Figure: Sign-in screen
  +
@@ -422,14 +380,9 @@ ret = account_destroy(account);
-
-
-
-
Performing Database Queries
-Hide -
-
+ +
Performing Database Queries
+
To perform database queries:
@@ -438,7 +391,7 @@ ret = account_destroy(account);
To perform queries, you need existing content in the database. To access existing account, obtain it from the database. It can be done using a few functions, depending on the user requirements.

To create new content to the database:
-
1. The create_Account() function creates a new account from a given account_h handle and account details (name, display name, domain, e-mail). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.
  +
  1. The create_Account() function creates a new account from a given account_h handle and account details (name, display name, domain, e-mail). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.
    
    After creating the account, it is added to the database. When no longer needed, the account handle has to be destroyed using the account_destroy(account) function.
    @@ -480,7 +433,7 @@ account_destroy(account);
  2. Create an account. -
    For more information, see the Account Tutorial.
    +
    For more information, see the Creating and Managing an Account.
```
 static int Create_Account(account_h * account, char * account_name, char * display_name, char *  domain_name, char * email_address)
@@ -499,7 +452,7 @@ static int Create_Account(account_h * account, char * account_name, char * displ
 
```
  3. List accounts. -
    1. +
      
      To verify the database insertion, all accounts are listed.
      
      @@ -609,7 +562,7 @@ static int Show_Account(account_h acc)
      
      Query the account by various attributes: -
      Query by username. +
      Query by username.
      Querying data by username requires providing a valid username callback function. In this example, it is the same function as for for_each, but cast without the third parameter.
      
      @@ -676,14 +629,9 @@ account_destroy(account);
      
      -
-
-
-
Managing Account Secrecy
-Hide -
-
+ +
Managing Account Secrecy
+
To manage account secrecy:
1. Select the secrecy level using the account_secrecy_state_e enumeration. @@ -738,10 +686,9 @@ sprintf(buf," Account 3 secret: %d\n", secret); account_destroy(account); List_Accounts(NULL); - -
  Secrecy is linked only with visibility on the account settings screen. The account is still visible and can be accessed using a query or the for_each function. For further information on how to add your application to the account screen, see the Account Tutorial.
  +
  Secrecy is linked only with visibility on the account settings screen. The account is still visible and can be accessed using a query or the for_each function. For further information on how to add your application to the account screen, see the Adding an Application on the Account Screen.
```
// List_Account() console output
 MyCallback ID: 12
@@ -759,21 +706,16 @@ MyCallback Disp.: Visible
 
```
2. Clean up. -
  Account handles have to be destroyed when not needed anymore.
  +
  Account handles have to be destroyed when no longer needed.
```
 account_destroy(account);
 
```
-
-
-
-
Updating Accounts
-Hide -
-
+ +
Updating Accounts
+
To update and track account data.
1. Update the account. -
  - To update an account by its ID:
    -
-
-
-
Retrieving Account Types
-Hide -
-
+ +
Retrieving Account Types
+
To retrieve account types:
1. Get the type information. -
  If the account type with a specified ID exists, it can be gotten from the database by account_query_by_app_id() API.
  +
  If the account type with a specified ID exists, you can get it from the database with the account_query_by_app_id() function.
  
  It is possible to set, for example:
  -
-
-

@@ -1022,4 +952,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm index 76df87d..5a41d0f 100644 --- a/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm @@ -14,47 +14,47 @@ -

+ @@ -62,77 +62,75 @@

- -

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

- + +

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

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Calendar API basics by learning about:

Initializing the Calendar +
Initializing the Calendar
Initialize the calendar for use.
Calendar management
- Creating an Event +
- Creating an Event
  Create a new event.
- Setting Event Properties +
- Setting Event Properties
  Set event properties, such as subject and description.
- Inserting an Event to the Database +
- Inserting an Event to the Database
  Insert an event to the Calendar database.
- Getting Events +
- Getting Events
  Retrieve a single event or a list of events.
- Updating an Event +
- Updating an Event
  Update event details.
- Deleting an Event +
- Deleting an Event
  Delete an event from the database.
- Setting Exceptions when Inserting Events +
- Setting Exceptions when Inserting Events
  Set exceptions when creating an event with a frequency.
- Adding an Exception Date for an Existing Event +
- Adding an Exception Date for an Existing Event
  Add an exception date for an existing event.
- Monitoring Event Changes +
- Monitoring Event Changes
  Receive notifications when changes occur in events.
Todos
- Creating a Todo +
- Creating a Todo
  Create a new todo.
- Setting Todo Properties +
- Setting Todo Properties
  Set todo properties, such as subject and description.
- Inserting a Todo to the Database +
- Inserting a Todo to the Database
  Insert a todo to the calendar database.
- Getting Todos +
- Getting Todos
  Retrieve a single todo or a list of todos.
- Updating a Todo +
- Updating a Todo
  Update todo details.
- Deleting a Todo +
- Deleting a Todo
  Delete the todo from the database.
- Monitoring Todo Changes +
- Monitoring Todo Changes
  Receive notifications when changes occur in todos.
vCalendars
- Making a vCalendar +
- Making a vCalendar
  Make a vCalendar stream from an event record.
- Parsing a vCalendar +
- Parsing a vCalendar
  Parse a vCalendar from a file and insert to the database.

Show All
Hide All

- -

-
-
Initializing the Calendar
-Hide -
-
+ +
Initializing the Calendar

To initialize the Calendar Service:
1. @@ -156,14 +154,9 @@ if (error_code != CALENDAR_ERROR_NONE) if (error_code != CALENDAR_ERROR_NONE) dlog_print(DLOG_ERROR, LOG_TAG, "calendar disconnect failed: %x\n", error_code);
-
-
-
-
Creating an Event
-Hide -
-
+ +
Creating an Event
+
To define and create a new event handle (record), since the Calendar Service uses the event handler mechanism:

Use the calendar_record_create() function with the defined event handle as a parameter to create an event associated to the event handle and an _calendar_event._uri parameter for the event type.

Verify the status of the error code. If the event is created correctly, the function returns CALENDAR_ERROR_NONE. If an error is reported, you can check the error and take appropriate action or stop other operations on the database.
@@ -171,14 +164,9 @@ if (error_code != CALENDAR_ERROR_NONE) error_code = calendar_record_create(_calendar_event._uri, &event); if (error_code != CALENDAR_ERROR_NONE) dlog_print(DLOG_ERROR, LOG_TAG, "calendar_record_create: %x\n", error_code); -
-
-
-
Setting Event Properties
-Hide -
-
+ +
Setting Event Properties
+
To set the event properties:
1. Set the event subject. @@ -254,7 +242,7 @@ error_code += calendar_record_add_child_record(event, _calendar_event.calendar_a if (error_code != CALENDAR_ERROR_NONE) dlog_print(DLOG_ERROR, LOG_TAG, "calendar add alarm failed \n");
  The following alarm tick units are available:
  -
  - CALENDAR_ALARM_TIME_UNIT_MINUTE
-
-
-
-
Inserting an Event to the Database
-Hide -
-
+
Inserting an Event to the Database
+
To insert an event record:
1. Use the calendar_db_insert_record() function to insert the newly created event into the Calendar database. The first argument is the event handle, the second is the record ID - a unique ID is assigned to the event you are adding and returned as the second argument. If the event is inserted successfully, the function returns CALENDAR_ERROR_NONE. @@ -291,14 +273,8 @@ dlog_print(DLOG_ERROR, LOG_TAG, "id: %d\n", id);
2. After inserting, destroy the used structures:
```
calendar_record_destroy(event, true);
```
-
-
-
-
Getting Events
-Hide -
-
+
Getting Events
+
To retrieve a single event or all events one by one. You can also filter the events by one of the properties:
1. Get a single event record using its ID. @@ -315,7 +291,7 @@ if (error_code != CALENDAR_ERROR_NONE) dlog_print(DLOG_ERROR, LOG_TAG, "db get all records failed: %x\n", error_code);
2. Filter the list. -
  1. +
    1. To get events with filtering, you need a record list and a query:
      
      calendar_list_h list = NULL; calendar_query_h query = NULL; @@ -368,7 +344,7 @@ if (error_code != CALENDAR_ERROR_NONE) calendar_query_destroy(query);
  2. Iterate the list and read the records. -
    1. Get records from the list using calendar_list_get_current_record_p(), and calendar_list_next() or calendar_list_prev(). Inside the loop, get details of each record. +
      Get records from the list using calendar_list_get_current_record_p(), and calendar_list_next() or calendar_list_prev(). Inside the loop, get details of each record.
      Note on the returned values' ownership: some functions have the _p postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
      
      calendar_record_h record; while (calendar_list_get_current_record_p(list, &record) == CALENDAR_ERROR_NONE) @@ -464,14 +440,10 @@ static calendar_gl_event_data_t *_create_gl_event_data(calendar_record_h record)
      To get access to a specified data from the record, firstly it is necessary to get its child responsible for the requested type.
    2. Free the list:
      calendar_list_destroy(list, true);
    -
-
-
-
Updating an Event
-Hide -
-
+ + +
Updating an Event
+
To update an event record:
1. Get the event record handle to update with the ID. @@ -494,32 +466,22 @@ if (error_code != CALENDAR_ERROR_NONE) dlog_print(DLOG_ERROR, LOG_TAG, "db update record failed: %x\n", error_code);
2. When the event handle is no longer needed, use the calendar_record_destroy() function to destroy the event handle and free the allocated memory.
```
calendar_record_destroy(record, true);
```
-
-

-Hide -

+ +

To delete an event, call the calendar_db_delete_record() function with _calendar_event._uri as the first parameter and event ID as the second one:

int event_id = ... // Acquire event ID
 error_code = calendar_db_delete_record(_calendar_event._uri, event_id);
 if (error_code != CALENDAR_ERROR_NONE)
    dlog_print(DLOG_ERROR, LOG_TAG, "db delete record failed: %x\n", error_code);

-
-
Setting Exceptions when Inserting Events
-Hide -
-
+ +
Setting Exceptions when Inserting Events
+
To set an exception date to an event record when creating the event:
1. Create a recurring event.
  The following example creates an event record with the following properties:
  -
  - Frequency: CALENDAR_RECURRENCE_MONTHLY
-
-
-
-
Adding an Exception Date for an Existing Event
-Hide -
-
+ +
Adding an Exception Date for an Existing Event
+
To add an exception date to an existing event:
1. Make sure you have an existing event.
-
-

-Hide -

To register a callback function that listens for event changes:

error_code = calendar_db_add_changed_cb(_calendar_event._uri, _event_changed_callback, NULL);
@@ -670,14 +621,9 @@ static void _event_changed_callback(const char *view_uri, void *user_data)
 
    calendar_record_destroy(record, true);
 }

-
-
Creating a Todo
-Hide -
-
+ +
Creating a Todo
+
To define and create a new todo handle record, since the Calendar Service uses a todo handler mechanism:

Use the calendar_record_create() function with the defined todo handle as a parameter to create a todo associated with the todo handle and a _calendar_todo._uri parameter for the todo type.

Verify the status of the error code. If the todo handle is created correctly, the function returns CALENDAR_ERROR_NONE. If an error is reported, check the error and take appropriate action, or stop other operations on the database.
@@ -685,14 +631,9 @@ static void _event_changed_callback(const char *view_uri, void *user_data) error_code = calendar_record_create(_calendar_todo._uri, &todo); if (error_code != CALENDAR_ERROR_NONE) dlog_print(DLOG_ERROR, LOG_TAG, "calendar_record_create: %x\n", error_code); -
-
-
-
Setting Todo Properties
-Hide -
-
+ +
Setting Todo Properties
+
To set the todo properties:
1. Set the todo subject.
  To set the subject, call calendar_record_set_str(). This function takes the todo handle (created before) as the first argument, _calendar_todo.summary for the subject type, and the subject, which is string value, as the third argument. The calendar_record_set_str() function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.
  @@ -718,14 +659,9 @@ if (error_code != CALENDAR_ERROR_NONE)
```
error_code = calendar_record_set_int(todo, _calendar_todo.todo_status, CALENDAR_TODO_STATUS_COMPLETED);
 if (error_code != CALENDAR_ERROR_NONE)
    dlog_print(DLOG_ERROR, LOG_TAG, "set todo_status failed : %x\n", error_code);
```
-
-
-
-
Inserting a Todo to the Database
-Hide -
-
+ +
Inserting a Todo to the Database
+
To insert a todo record:
1. Use the calendar_db_insert_record() function to insert a newly created todo into the Calendar database. The first argument is the todo handle, the second is the record ID. A unique ID is assigned to the record you are adding, and is returned as the third argument of the called function. If the todo is inserted successfully, the function returns CALENDAR_ERROR_NONE.
```
int id;
@@ -734,14 +670,9 @@ if (error_code != CALENDAR_ERROR_NONE)
    dlog_print(DLOG_ERROR, LOG_TAG, "db insert record failed: %x\n", error_code);
```
2. After inserting, destroy the used structures:
```
calendar_record_destroy(todo, true);
```
-
-
-
-
Getting Todos
-Hide -
-
+ +
Getting Todos
+
To retrieve a single todo or all todos one by one. You can also filter the todos by one of the properties:
1. Get a single todo record using its ID. @@ -757,7 +688,7 @@ error_code = calendar_db_get_all_records(_calendar_todo._uri, 0, 0, &list); if (error_code != CALENDAR_ERROR_NONE) dlog_print(DLOG_ERROR, LOG_TAG, "db get all records failed: %x\n", error_code);
2. Filter the list. -
  1. To get todos with filtering, you need a record list and a query: +
    1. To get todos with filtering, you need a record list and a query:
      calendar_list_h list = NULL; calendar_query_h query = NULL; @@ -802,7 +733,7 @@ if (error_code != CALENDAR_ERROR_NONE) calendar_query_destroy(query);
  2. Iterate the list and read the records. -
    1. Get records from the list using calendar_list_get_current_record_p(), and calendar_list_next() or calendar_list_prev(). Inside the loop, get details of each record. +
      Get records from the list using calendar_list_get_current_record_p(), and calendar_list_next() or calendar_list_prev(). Inside the loop, get details of each record.
      Note on the returned values' ownership: some functions have the _p postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.
      
      calendar_record_h record; while (calendar_list_get_current_record_p(list, &record) == CALENDAR_ERROR_NONE) @@ -899,14 +830,9 @@ static calendar_gl_todo_data_t *_create_gl_todo_data(calendar_record_h record)
      Free the list:
      calendar_list_destroy(list, true);
      -
-
-
-
Updating a Todo
-Hide -
-
+ +
Updating a Todo
+
To update a todo record:
1. Get the todo record handle to update with the ID.
```
calendar_record_h record;
@@ -928,27 +854,17 @@ if (error_code != CALENDAR_ERROR_NONE)
    dlog_print(DLOG_ERROR, LOG_TAG, "db update record failed: %x\n", error_code);
```
2. When the todo handle is no longer needed, use the calendar_record_destroy() function to destroy the todo handle and free the allocated memory.
```
calendar_record_destroy(record, true);
```
-
-

-Hide -

+ +

To delete a todo, use the calendar_db_delete_record() function with _calendar_todo._uri as the first parameter and the todo ID as the second one.

int todo_id = ... // Acquire todo ID
 error_code = calendar_db_delete_record(_calendar_todo._uri, todo_id);
 if (error_code != CALENDAR_ERROR_NONE)
    dlog_print(DLOG_ERROR, LOG_TAG, "db delete record failed: %x\n", error_code);

-
-
Monitoring Todo Changes
-Hide -
-
+ +
Monitoring Todo Changes
+
To register a callback function that listens for todo changes:
1. Register the callback function. @@ -981,14 +897,9 @@ static void _todo_changed_callback(const char *view_uri, void *user_data) calendar_record_destroy(record, true); }
-
-

-Hide -

+ +

To make a vCalendar stream from an event record:

Get the event record by the event ID.

int event_id = ... // Acquire event ID
@@ -1014,14 +925,9 @@ if (error_code != CALENDAR_ERROR_NONE)
 When the list handle is no longer needed, use the calendar_list_destroy() function to destroy the list handle and free the allocated memory.
 free(vcalendar_stream);
 calendar_list_destroy(list, true);

-Hide -

+ +

To parse a vCalendar from a file and insert to the database:

char vcalendar_file_path[512] = {0};
 char *resource_path = app_get_resource_path();
@@ -1051,11 +957,6 @@ error_code = calendar_vcalendar_parse_to_calendar_foreach(vcalendar_file_path, /
 
    return true;
 }

diff --git a/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm b/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm index 948ab5e..1228772 100644 --- a/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/social/contact_tutorial_n.htm @@ -14,84 +14,84 @@ -

+ @@ -99,86 +99,97 @@

This tutorial demonstrates how you can manage contacts and groups, and import them to or export them from the vCard format.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Contacts API basics by learning about:

Initializing Contacts +
Initializing Contacts
Initialize the contacts for use.
Contacts -
- Creating a Contact +
  - Creating a Contact
    Create a new contact.
  - Setting Contact Properties +
  - Setting Contact Properties
    Set contact properties, such as name and image.
  - Inserting a Contact to the Database +
  - Inserting a Contact to the Database
    Insert a contact to the Contacts database.
  - Getting Contacts +
  - Getting Contacts
    Retrieve single contacts or a list of contacts.
  - Updating a Contact +
  - Updating a Contact
    Update contact details.
  - Deleting a Person +
  - Deleting a Person
    Delete the person from the database.
  - Linking and Unlinking Contacts +
  - Linking and Unlinking Contacts
    Link and unlink contacts to persons.
  - Managing Favorites +
  - Managing Favorites
    Set or unset a person to be a favorite.
  - Monitoring Person Changes +
  - Monitoring Person Changes
    Receive notifications when changes occur in persons.
- Groups
  - Creating a Group
    Create a new group.
  - Setting Group Properties +
  - Setting Group Properties
    Set group properties, such as name and image.
  - Inserting a Group to the Database +
  - Inserting a Group to the Database
    Insert a group to the Contacts database.
  - Getting Groups +
  - Getting Groups
    Retrieve single groups or a list of groups.
  - Updating a Group +
  - Updating a Group
    Update group details.
  - Deleting a Group +
  - Deleting a Group
    Delete the group from the database.
  - Managing Group Members +
  - Managing Group Members
    Add, remove, and retrieve group members.
  - Monitoring Group Changes +
  - Monitoring Group Changes
    Receive notifications when changes occur in groups.
- vCards
  - Making a vCard +
  - Making a vCard
    Make a vCard stream from a person record.
  - Parsing a vCard +
  - Parsing a vCard
    Parse a vCard from a file and insert to the database.
- Speed dials
  - Creating a Speed Dial +
  - Creating a Speed Dial
    Create a new speed dial.
  - Setting Speed Dial Properties +
  - Setting Speed Dial Properties
    Set speed dial properties, such as speed dial number and number ID.
  - Inserting a Speed Dial to the Database +
  - Inserting a Speed Dial to the Database
    Insert a speed dial to the database.
  - Getting Speed Dials +
  - Getting Speed Dials
    Retrieve a single speed dial or a list of speed dials.
  - Updating a Speed Dial +
  - Updating a Speed Dial
    Update speed dial details.
  - Deleting a Speed Dial +
  - Deleting a Speed Dial
    Delete the speed dial from the database.
- Phone logs
  - Creating a Log +
  - Creating a Log
    Create a new log.
  - Setting Log Properties +
  - Setting Log Properties
    Set log properties, such as type, time, and address.
  - Inserting a Log to the Database +
  - Inserting a Log to the Database
    Insert a log to the database.
  - Getting Logs +
  - Getting Logs
    Retrieve single log or a list of logs.
  - Deleting a Log +
  - Deleting a Log
    Delete the log from the database.
@@ -187,48 +198,36 @@
- Records
  - Inserting New Records +
  - Inserting New Records
    Add new records to the database.
  - Getting Record Details +
  - Getting Record Details
    Get information from existing records.
  - Handling Lists +
  - Handling Lists
    Iterate, filter, and sort record lists.
  - Deleting Records +
  - Deleting Records
    Remove records from the database.
  - Linking Persons +
  - Linking Persons
    Assign several contacts to one person.
- Contact settings
  - Managing Contact Settings +
  - Managing Contact Settings
    Change the display settings of contacts.
  - Managing Contacts on the SIM Card +
  - Managing Contacts on the SIM Card
    Check that the SIM card is initialized and import contacts from the SIM card.
- vCard information
  - Importing from vCard +
  - Importing from vCard
    Import contacts from vCard files.
  - Exporting to vCard +
  - Exporting to vCard
    Export contacts to vCard files.
-
-
- Show All
- Hide All
-
- -
- -
  -
  Initializing Contacts
  -Hide -
  -
  +
  Initializing Contacts
  +
  To start with the Contact Service:
  1. To use the functions and data types of the Contacts API, include the <contacts.h> header file in your application:
    @@ -243,14 +242,9 @@ error_code = contacts_connect();
  2. When the Contacts APIs are not needed anymore, you have to disconnect from the service using the contacts_disconnect() function:
```
error_code = contacts_disconnect();
 
```
  -
  -
- -
  -
  Creating a Contact
  -Hide -
  -
  + +
  Creating a Contact
  +
  Before you insert a record, you need to create a record handle. To create it and assign a new record:
```
contacts_record_h contact;
 
@@ -259,17 +253,12 @@ error_code = contacts_record_create(_contacts_contact._uri, &contact);
 
 The first argument determines the type of the created record. Use _contacts_contact._uri to create contact type records.
 This record, however, contains no additional information, like a name or phone number. To add them, you must set contact properties by creating additional records and setting them as child records of the contact record. Note that records created this way are objects in the memory, with contacts_record_h type variables as their handles. Changes made to these objects are not reflected in the database until your explicit request, using contacts_db_insert_record() or contacts_db_update_record().
-	
```
  -
- -
  -
  Setting Contact Properties
  -Hide -
  -
  + +
  Setting Contact Properties
  +
  To set the contact name, birthday, and phone number:
  1. Add the contact name. -
    1. Create a name record: +
      Create a name record:
      contacts_record_h name; error_code = contacts_record_create(_contacts_name._uri, &name); @@ -287,7 +276,7 @@ error_code = contacts_record_create(_contacts_name._uri, &name);
      
      The second argument (_contacts_contact.name) is the parent property to which the child record is assigned. See _contacts_contact view description in the Contacts API. In the API, the name property is listed as one of the record type properties, which means that other records can be assigned to this property as child records ("single" means that only 1 _contacts_name type child record is allowed). The required type of the child record is specified in the API.
    2. Add an image. -
      Create an image record: +
      Create an image record:
      contacts_record_h image; error_code = contacts_record_create(_contacts_image._uri, &image); @@ -305,7 +294,7 @@ error_code = contacts_record_set_str(image, _contacts_image.path, caller_id_path
      
      Add an event.
      You can add a birthday event associated with the contact. An event contains the date and the event type, among other properties.
      -
      Create an event record: +
      Create an event record:
      contacts_record_h event; error_code = contacts_record_create(_contacts_event._uri, &event); @@ -331,7 +320,7 @@ error_code = contacts_record_set_str(event, _contacts_event.label, "Event d
      
      Add a phone number.
      The phone number is added to a parent record using an alternative method.
      -
      Create a phone number record and set the number property: +
      Create a phone number record and set the number property:
      contacts_record_h number; error_code = contacts_record_create(_contacts_number._uri, &number); @@ -341,14 +330,8 @@ error_code = contacts_record_set_str(number, _contacts_number.number, "+821
      Set the number record as the contact's child record:
      error_code = contacts_record_add_child_record(contact, _contacts_contact.number, number);
      -
  -
- -
  -
  Inserting a Contact to the Database
  -Hide -
  -
  + +
  Inserting a Contact to the Database
  
  To insert a contact:
  @@ -363,21 +346,15 @@ error_code = contacts_db_insert_record(contact, &id);
- When the records are in the database, the objects representing them in the memory are no longer needed and must be destroyed.
```
contacts_record_destroy(contact, true);
```
  If the second parameter is true, child records of the given record (objects representing them in the memory) are also destroyed. This does not depend on the way the child records were added.

- -

-Hide -

+ +

To retrieve contact records:

A person is an aggregation of one or more contacts associated with the same person. The person is created automatically when inserting a contact record. To use the contact information in your application, you must learn to print basic person information.

To get a single person record:

Use the contacts_db_get_record() function with the appropriate person_id:

contacts_record_h person  = NULL;
 const int person_id = ... // Acquire person ID
@@ -391,7 +368,7 @@ contacts_record_destroy(speeddial, true);

To get the total person record list: -

Use the contacts_db_get_all_records() function:

contacts_list_h list = NULL;
 
 error_code = contacts_db_get_all_records(_contacts_person._uri, 0, 0, &list);
@@ -409,7 +386,7 @@ error_code = contacts_db_get_all_records(_contacts_person._uri, 0, 0, &list)
     
    
 
-To get the records from the list, use the contacts_list_get_current_record_p(), and contacts_list_next() or contacts_list_prev() functions. Get the details of each record in the loop.  
+To get the records from the list, use the contacts_list_get_current_record_p(), and contacts_list_next() or contacts_list_prev() functions. Get the details of each record in the loop.  
   
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE)
@@ -491,7 +468,7 @@ static contacts_gl_person_data_t* _create_gl_person_data(contacts_record_h recor
    return gl_person_data;
 }
 Get person details.
-
+
 Get the display name.
 Assuming that you have the person record handle (contacts_record_h), you can access the display_name property. You can read the display name property and print it:
 static bool _get_display_name(contacts_record_h record, char **display_name)
@@ -651,9 +628,9 @@ static contacts_gl_person_data_t* _create_gl_person_data(contacts_record_h recor
 contacts_list_destroy(list, true);
 
 	To get the filtered person record list:
-	
+	
 		Use the contacts_db_get_records_with_query() function to filter the list with parameters:
-		
+		
 			To get a person list with filtering, create a record list and a query:
 			 contacts_list_h list = NULL;
@@ -707,7 +684,7 @@ contacts_list_destroy(list, true);
 	
 	
 	To get the searched person record list:
-	
+	
 		Use the contacts_db_search_records() function.
 		The Contact Service provides an API for the contact search. The contacts_db_search_records() function provides an easy way to find records based on a given keyword. The following example shows how to find the contact records which contain the "John" keyword:
 
@@ -727,15 +704,8 @@ contacts_list_destroy(list, true);
 	
 
 
+ Updating a Contact
 
-

-Hide -

To change the name, birthday, and phone number of an existing contact:

Get the contact.
To modify a record, you need to have a handle (contacts_record_h type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the contact ID:
@@ -746,7 +716,7 @@ error_code = contacts_db_get_record(_contacts_contact._uri, contact_id, &con
Such handles are also provided by search functions, such as contacts_db_get_records_with_query().
Change the name. -
1. To modify the contact name, get the name record with the contacts_record_get_child_record_at_p() function, which provides a list of the child records of a given type.
  +
  1. To modify the contact name, get the name record with the contacts_record_get_child_record_at_p() function, which provides a list of the child records of a given type.
```
contacts_record_h name = NULL;
 
 error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name, 0, &name);
@@ -759,7 +729,7 @@ error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.na
 
```
    This only changes the data in the memory object, not in the database. To insert the new value, the name record must be inserted. However, if you acquire this record using contacts_record_get_child_record_at_p() (as in this example), you only need to update the parent record.
2. Change the birthday event. -
  1. If only 1 event is set for the contact, you can call contacts_record_get_child_record_at_p() to get the event record. If there are more events, you must iterate over the child records. +
    1. If only 1 event is set for the contact, you can call contacts_record_get_child_record_at_p() to get the event record. If there are more events, you must iterate over the child records.
```
contacts_record_h event = NULL;
 error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, 0, &event);
 
```
    2. When the record handle is no more needed, use the contacts_record_destroy() function to destroy the record handle and free the allocated memory:
```
contacts_record_destroy(contact, true);
```
    -

-Hide -

+ +

To delete a person, call the contacts_db_delete_record() function with _contacts_person._uri as the first parameter and the person ID as the second one:

int person_id = ... // Acquire person ID
 
 error_code = contacts_db_delete_record(_contacts_person._uri, person_id);

-Hide -

+ +

To link and unlink contacts (manually and automatically):

To link a person to another person manually, call the contacts_person_link_person() function with base person ID as the first parameter and another person ID as the second one. +
- To link a person to another person manually, call the contacts_person_link_person() function with base person ID as the first parameter and another person ID as the second one.
```
int person_id1 = ... // Acquire base person ID
 int person_id2 = ... // Acquire another person ID
 
@@ -832,16 +792,11 @@ int unlinked_person_id;
 
 error_code = contacts_person_unlink_contact(person_id, contact_id, &unlinked_person_id);
 
```
-

-Hide -

+ +

To manage person favorites:

To set a person as favorite when creating a contact, use the is_favorite property of the person record. If the property is set to true when creating a contact, the person is set as favorite: +
- To set a person as favorite when creating a contact, use the is_favorite property of the person record. If the property is set to true when creating a contact, the person is set as favorite:
```
contacts_record_h contact = NULL;
 
 error_code = CONTACTS_ERROR_NONE;
@@ -875,14 +830,9 @@ error_code = contacts_record_set_bool(person, _contacts_person.is_favorite, fals
 error_code = contacts_db_update_record(person);
 
 contacts_record_destroy(person, true);
```
-

-Hide -

+ +

To register a callback function to listen for person changes:

error_code = contacts_db_add_changed_cb(_contacts_person._uri, _person_changed_callback, NULL);
@@ -914,27 +864,17 @@ void _person_changed_callback(const char *view_uri, void *user_data)
 
    contacts_record_destroy(record, true);
 }

-Hide -

+ +

To create a new group record:

contacts_record_h group = NULL;
 
 error_code = contacts_record_create(_contacts_group._uri, &group);

-Hide -

+ +

To set group properties:

Set the group name. @@ -952,14 +892,9 @@ snprintf(temp_path, sizeof(temp_path), "%s/ringtone.mp3", resource_pat free(resource_path); error_code = contacts_record_set_str(group, _contacts_group.ringtone_path, temp_path);

-Hide -

+ +

To insert a group record:

Use the contacts_db_insert_record() function to insert a newly created group into the Contacts database.
The first argument is the group record handle, the second is the record ID. A unique ID is assigned to the record your are adding, and is returned as the third argument of the called function. If the group is inserted successfully, the function returns CONTACTS_ERROR_NONE.
@@ -969,18 +904,13 @@ error_code = contacts_db_insert_record(group, &added_group_id);
After inserting, the used structures have to be destroyed:
```
contacts_record_destroy(group, true);
```

-Hide -

+ +

To get all of the group records one by one, or to filter them by one of the properties:

To get a single group record: -

Use the contacts_db_get_record() function with the appropriate group_id:

contacts_record_h group;
 int group_id = ... // Acquire group ID
 error_code = contacts_db_get_record(_contacts_group._uri, group_id, &group);
@@ -990,7 +920,7 @@ error_code = contacts_db_get_record(_contacts_group._uri, group_id, &group);
 contacts_record_destroy(group, true);

To get the total group record list: -

Use the contacts_db_get_all_records() function:

contacts_list_h list = NULL;
 error_code = contacts_db_get_all_records(_contacts_group._uri, 0, 0, &list);
@@ -1008,7 +938,7 @@ error_code = contacts_db_get_all_records(_contacts_group._uri, 0, 0, &list);
      
     
    
-		
+		
 			
 			To get the records from the list, use the contacts_list_get_current_record_p(), and contacts_list_next() or contacts_list_prev() functions. Get the details of each record in the loop.
 
@@ -1110,9 +1040,9 @@ contacts_list_destroy(list, true);
 	
 	
 	To get the filtered group record list:
-	
+	
 		Use the contacts_db_get_records_with_query() function to filter the list with parameters:
-		
+		
 To get groups with filtering, you need a record list and a query:
 contacts_list_h list = NULL;
 contacts_query_h query = NULL;
@@ -1157,7 +1087,7 @@ contacts_query_destroy(query);
     
    
 
-To get the records from the list, use the contacts_list_get_current_record_p(), and contacts_list_next() or contacts_list_prev() functions. Get the details of each record in the loop.
+To get the records from the list, use the contacts_list_get_current_record_p(), and contacts_list_next() or contacts_list_prev() functions. Get the details of each record in the loop.
 
 contacts_record_h record;
 while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE)
@@ -1245,14 +1175,9 @@ static contacts_gl_group_data_t* _create_gl_group_data(contacts_record_h record)
  contacts_list_destroy(list, true);
 
-

-Hide -

+ +

To change the name and image of an existing person:

Get the group.
To modify a record, you need to have a handle (contacts_record_h type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the group ID:
@@ -1280,30 +1205,20 @@ error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_pat
Clean up.
When the record handle is no longer needed, use the contacts_record_destroy() function to destroy the record handle and free the allocated memory.
```
contacts_record_destroy(group, true);
```

-Hide -

+ +

To delete a group, call the contacts_db_delete_record() function with _contacts_group._uri as the first parameter and group ID as the second one;

int group_id = ... // Acquire group ID
 
 error_code = contacts_db_delete_record(_contacts_group._uri, group_id);

-Hide -

+ +

To manage group members:

To add a group member, you need to know the contact ID and the group ID. Then you need to call contacts_group_add_contact(). +

To add a group member, you need to know the contact ID and the group ID. Then you need to call contacts_group_add_contact().

int contact_id = ... // Acquire contact ID
 int group_id = ... // Acquire group ID
 
@@ -1348,14 +1263,9 @@ while (contacts_list_get_current_record_p(list, &person) == CONTACTS_ERROR_N
 contacts_list_destroy(list, true);
 contacts_filter_destroy(filter);
 contacts_query_destroy(query);

-Hide -

+ +

To register a callback function to listen for group changes:

Register the callback function.
The code below shows how to register a callback function to listen for group changes.
@@ -1388,14 +1298,9 @@ static void _group_changed_callback(const char *view_uri, void *user_data) contacts_record_destroy(record, true); }

-Hide -

+ +

To make a vCard stream from a person record:

Get the person record by the person ID.

int person_id = ... // Acquire person ID
@@ -1427,14 +1332,8 @@ int contacts_vcard_make_from_my_profile(contacts_record_h my_profile, char **vca
 free(vcard_stream);
 contacts_record_destroy(record, true);

-Hide -

+ +

To parse a vCard from a file and insert to the database:

@@ -1459,29 +1358,18 @@ error_code = contacts_vcard_parse_to_contact_foreach(temp_path, // File path of
 
    return true;
 }

-Hide -

To create a speed dial record:

 contacts_record_h speeddial;
 error_code = contacts_record_create(_contacts_speeddial._uri, &speeddial);

The first argument determines the type of the created record. Use _contacts_speeddial._uri to create speed dial type records.

-Hide -

+ +

To set speed dial properties:

Set the speed dial number. @@ -1511,14 +1399,8 @@ error_code = contacts_record_set_int(speeddial, _contacts_speeddial. number_id, -

-Hide -

To insert a speed dial record:

Use the contacts_db_insert_record() function to insert a newly created speed dial into the Contacts database. The first argument is the speed dial record handle, the second is the speed dial number. If the speed dial is inserted successfully, the function returns CONTACTS_ERROR_NONE.
```
@@ -1534,18 +1416,13 @@ contacts_record_destroy(speeddial, true);
 
```

-Hide -

+ +

To get all of the speed dial records one by one, or to filter them by one of the properties:

To get a single speed dial record: -

Use the contacts_db_get_record() function with the appropriate speeddial_id:

 contacts_record_h speeddial;
@@ -1559,7 +1436,7 @@ error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_id, &
 contacts_record_destroy(speeddial, true);

To get the total speed dial record list: -

Use the contacts_db_get_all_records() function: +

Use the contacts_db_get_all_records() function:

 contacts_list_h list = NULL;
 error_code = contacts_db_get_all_records(_contacts_speeddial._uri, 0, 0, &list);
@@ -1679,9 +1556,9 @@ contacts_list_destroy(list, true);

To get the filtered speed dial record list: -

Use the contacts_db_get_records_with_query() function. -

Create a record list and query:

@@ -1836,14 +1713,9 @@ static contacts_gl_speeddial_data_t* _create_gl_speeddial_data(contacts_record_h
  contacts_list_destroy(list, true);

-Hide -

+ +

To change the number ID of an existing speed dial:

Get the speed dial. @@ -1881,29 +1753,18 @@ contacts_record_destroy(speeddial, true);

-Hide -

+ +

To delete a speed dial, call the contacts_db_delete_record() function with _contacts_speeddial._uri as the first parameter and speed dial number as the second one;

 int speeddial_number = ... // Acquire speed dial number
 
 error_code = contacts_db_delete_record(_contacts_speeddial._uri, speeddial_number);

-Hide -

To create a log record:

 contacts_record_h log;
@@ -1912,14 +1773,9 @@ if (error_code != CONTACTS_ERROR_NONE)
    dlog_print(DLOG_ERROR, LOG_TAG, "contacts record create failed: %x", error_code);

To get a single log record: -

Use the contacts_db_get_record() function with the appropriate log_id:

contacts_record_h log;
 int log_id = ... // Acquire log ID
 error_code = contacts_db_get_record(_contacts_phone_log._uri, log_id, &log);
@@ -2018,7 +1864,7 @@ if (error_code != CONTACTS_ERROR_NONE)
 contacts_record_destroy(log, true);

To get the total log record list: -

Use the contacts_db_get_all_records() function:

 contacts_list_h list = NULL;
 error_code = contacts_db_get_all_records(_contacts_phone_log._uri, 0, 0, &list);
@@ -2138,9 +1984,9 @@ contacts_list_destroy(list, true);

To get the filtered log record list: -

Use the contacts_db_get_records_with_query() function. -

Create a record list and query:

 contacts_list_h list = NULL;
@@ -2309,14 +2155,8 @@ static contacts_gl_log_data_t* _create_gl_log_data(contacts_record_h record)
 contacts_list_destroy(list, true);

-Hide -

To delete a log, use the contacts_db_delete_record() function with _contacts_phone_log._uri as the first parameter and log ID as the second one:

 int log_id = ... // Acquire log ID
@@ -2325,15 +2165,9 @@ error_code = contacts_db_delete_record(_contacts_phone_log._uri, log_id);
 if (error_code != CONTACTS_ERROR_NONE)
    dlog_print(DLOG_ERROR, LOG_TAG, "contacts db delete record failed: %x", error_code);

- -

-Hide -

+ +

To insert a new record:

Set properties.
Set the properties of the newly created record. Almost every property in the contact view is a record itself, so create more records, as needed. The following example shows how to add an address record to a contact.
-

-Hide -

To find all records and get their details:

Get details through a structure. -

For more record details, use a structure to get them.

The memory for the record data is allocated and the data is copied from the record by functions listed in the following step.

@@ -2529,7 +2357,7 @@ static contact_gl_data_t *_create_gl_data(contacts_record_h r_contact)
 Retrieve record data into the structure.
 Contacts are organized in a parent-child structure. To access specified data from a record, get the child responsible for the requested type using the contacts_record_get_child_record_at_p() function (for the property lists, see View/Property). Do not pass any data returned by a function with the _p suffix to the free() function.
 
-To get the name details, get the _contacts_contact.name (representing the child) from the r_contact parent. Both structures have the contacts_record_h type. After obtaining a child record, get the desired data from it using the contacts_record_get_str() function.
+To get the name details, get the _contacts_contact.name (representing the child) from the r_contact parent. Both structures have the contacts_record_h type. After obtaining a child record, get the desired data from it using the contacts_record_get_str() function.
 
  static bool _get_contact_last(contacts_record_h r_contact, char **last)
@@ -2557,7 +2385,7 @@ static bool _get_contact_id(contacts_record_h r_contact, int *id)
 
 
 To get a contact number, check whether it exists using the contacts_record_get_bool() function. If it exists, use the various Query  and Filter functions from the Contacts API to make a query to get a list. At the end, free any data returned by a function not containing the _p suffix.
-Get a list of all numbers and filter the list to get the default:
+Get a list of all numbers and filter the list to get the default:
  static bool _get_contact_number(contacts_record_h r_contact, char **number)
 {
@@ -2661,7 +2489,7 @@ static bool _get_contact_first(contacts_record_h r_contact, char **first)

Clean up. -
1. Destroy the contacts_list_h list.
  +
  1. Destroy the contacts_list_h list.
    
    When the access to the database is no longer needed, disconnect from the service using the contact_disconnect() function.
```
@@ -2678,20 +2506,14 @@ contacts_filter_destroy(filter); // If filter has been used
 
```
-

-Hide -

+ +

To access multiple records using lists and contact property filters, and to sort records:

Get a record list. -

To get all records: +

To get all records:
The following function retrieves all records and returns the result list. After all operations, the list must be released with the contacts_list_destroy() function.
```
@@ -2701,7 +2523,7 @@ contacts_db_get_all_records(_contacts_contact._uri, 0, 0, &list);
 
```

To filter and get specific records: -

Create a query for a list.

To filter or sort records, you need a record list and query:

@@ -2816,7 +2638,7 @@ contacts_db_get_records_with_query(query, 0, 0, &list);

To read records:

To get only a few details: +

To get only a few details:

 contacts_record_h record;
@@ -2869,7 +2691,7 @@ while (contacts_list_get_current_record_p(list, &record) == 0)
 Insert the list to the database.
 You can insert a whole list to the database. This can be useful when you have several records to create and you want to insert them all at once.
 
-
+
 If you have a list, use it or create a new one:
 
 @@ -2908,14 +2730,8 @@ contacts_list_destroy(list, true);
 
 
 
-

-Hide -

To delete records from the contact database, you need to know their ID:

@@ -2929,14 +2745,8 @@ int error = contacts_db_delete_record(_contacts_contact._uri, id);
  contacts_record_get_int(record, _contacts_contact.id, &id);
 
-

-Hide -

+ +

To link persons (a useful joining method if there are several contacts assigned to one person):

@@ -2984,7 +2794,7 @@ error_code = contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBE

Get default properties.

Get the default property values of a person with the contacts_person_get_default_property() function:

Get the ID of the default email details:

 int person_email_number;
@@ -3012,7 +2822,7 @@ error_code = contacts_record_destroy(email_record, true);
 Unlink persons.
 To unlink a contact using the contacts_person_unlink_contact() function:
 
-If you have the record handle, get the contact ID: 
+If you have the record handle, get the contact ID: 
 
  int person_id;
@@ -3029,14 +2839,9 @@ int contacts_person_unlink_contact(person_id,
 
 
 
-

Export contacts to a file. -
- To export a contact from the _contacts_contact view to the vCard format, use the contacts_vcard_make_from_contact() function.

- - -

- @@ -3403,4 +3186,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm b/org.tizen.tutorials/html/native/social/phonenumber_util_tutorial_n.htm similarity index 98% rename from org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm rename to org.tizen.tutorials/html/native/social/phonenumber_util_tutorial_n.htm index 9ed6a58..2c7955e 100644 --- a/org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/social/phonenumber_util_tutorial_n.htm @@ -28,7 +28,7 @@

Related Info

diff --git a/org.tizen.tutorials/html/native/social/social_tutorials_n.htm b/org.tizen.tutorials/html/native/social/social_tutorials_n.htm index 0a85abb..a15498e 100644 --- a/org.tizen.tutorials/html/native/social/social_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/social/social_tutorials_n.htm @@ -14,15 +14,16 @@ -

+ @@ -31,7 +32,13 @@

The social tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The social tutorials demonstrate how to use the following features in creating Tizen native applications:

Phonenumber-utils: Parsing and Formatting Phone Numbers +
Demonstrates how you can parse and format phone numbers.

+ +

The following tutorials apply in mobile applications only:

Account Manager: Managing Account Information on the Device
Demonstrates how you can connect to and disconnect from the Account Service, create, delete, and update accounts in the account database, and manage account information.
Calendar: Managing Calendar Events and Accessing the Calendar Database
Demonstrates how you can manage calendars, events, and tasks.

Sync Adapter: Making sync mechanism implementation easy

Sync Adapter: Implementing the Sync Mechanism

- -

This tutorial demonstrates how you can set callbacks which will perform start or cancel sync operation. The Sync Adapter API provides function which sets callback functions to be called by Sync Manager for starting or canceling sync operation:

- +

+ +

This tutorial demonstrates how you can set callbacks to start or cancel a sync operation.

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Sync Adapter API basics by learning about:

Set Callback Functions -
Set client callback functions for starting or canceling sync operation.
Setting the Callback Functions +
Set the client callback functions for starting or canceling sync operations.

Show All
Hide All

- -

- Hide -

To set callbacks to receive notification for a time to sync operation. +

To set callbacks to receive notifications about sync operations:

To use the features of the Sync Adapter API, include the <sync_adapter.h> header file in your application: +
To use the features of the Sync Adapter API, include the <sync_adapter.h> header file in your application:
```
 #include <sync_adapter.h>
 
```
Initialize Sync Adapter's instance using the sync_adapter_init() function: +

Initialize the sync adapter instance using the sync_adapter_init() function:

 int result;
-const char* capability = "http://tizen.org/account/capability/calendar";
+const char* capability = "http://tizen.org/account/capability/calendar";
 result = sync_adapter_init(capability);

-In the case of accountless, as follows: +

If no capabilities are defined (you do not want to receive notifications about calendar or contact data changes on the device):

 result = sync_adapter_init(NULL);

Using below API is required for sync operation subscribe to notifications about specific rule for synchronization scheduling, use the sync_adapter_set_callbacks() function to set a callback functions. When specific event is detected, the sync_adapter_start_sync_cb or sync_adapter_cancel_sync_cb is invoked. -The following example subscribes the callback functions to receive notifications when the specific event or condition is detected on device. Then, the callback functions to be invoked by Sync Manager for sync operation: +
Subscribe to the callback functions to receive notifications for the sync operation when a specific event or condition is detected on the device:
```
 result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 
```
+
When a specific event is detected, the sync_adapter_start_sync_cb or sync_adapter_cancel_sync_cb callback is invoked.

When the on_start_cb() callback is invoked, sync process predefined is performed inside the callback function. in the case of on_cancel_cb() is same.

+When the on_start_cb() callback is invoked, the predefined sync process is performed inside the callback function. The on_cancel_cb() callback works in a similar way and cancels the sync operation.
+ int on_start_cb(account_h account, bundle *extras, const char *capability)
 {
-	   //process for starting sync operation.
+   // Start the sync operation
 }
 
 int on_cancel_cb(account_h account, const char *capability)
 {
-	   //process for canceling sync operation.
+   // Cancel the sync operation
 }
 
 
 
-When sync operation is no longer used, destroy the instance of Sync Adapter:
+
When the sync operation is no longer needed, destroy the sync adapter instance:
  result = sync_adapter_unset_callbacks();
 sync_adapter_destroy();
 
 
 
-

diff --git a/org.tizen.tutorials/html/native/sync/sync_manager_tutorial_n.htm b/org.tizen.tutorials/html/native/sync/sync_manager_tutorial_n.htm index 4fa29d8..8635f0a 100644 --- a/org.tizen.tutorials/html/native/sync/sync_manager_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/sync/sync_manager_tutorial_n.htm @@ -11,91 +11,90 @@ - Sync Manager: Managing all sync related activities + Sync Manager: Managing Sync-related Activities -

This tutorial demonstrates how you can manage the schedule of time to synchronize data. The Sync Manager API provides function which can control sync operation manually or periodically:

This tutorial demonstrates how you can manage the data synchronizing schedule and control the sync operations manually or periodically.

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Sync Manager API basics by learning about:

On Demand Sync -
Add on demand sync job scheduling for one time operation.
Periodic Sync -
Add periodic sync job scheduling with a cycle.
Initializing the On-demand Sync +
Add an on-demand sync job scheduling for a one-time operation.
Initializing the Periodic Sync +
Add a periodic sync job scheduling with a recurring cycle.

Show All
Hide All

- -

-
-
On Demand Sync
- Hide -
-
+
Initializing the On-demand Sync
-
To inform explicitly service app of a time to sync operation once.
+
To inform the service application of a one-time sync operation:
1. To use the features of the Sync Manager API, include the <sync_manager.h> header file in your application: +
2. To use the features of the Sync Manager API, include the <sync_manager.h> header file in your application:
```
 #include <sync_manager.h>
 
```
3. Sync Adapter callbacks should be set first. Setting Sync Adapter callbacks can be verified at Sync Adapter. To set callbacks, as follows: +
4. Set the sync adapter callbacks:
```
 #include <sync_adapter.h>
 
-const char* capability = "http://tizen.org/account/capability/contact";
+const char* capability = "http://tizen.org/account/capability/contact";
 int result;
 result = sync_adapter_init(capability);
 result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 
```
  -In the case of accountless, as follows: +
  If no capabilities are defined (you do not want to receive notifications about calendar or contact data changes on the device):
```
 result = sync_adapter_init(NULL);
 result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 
```
5. Connect to Sync Manager service using the sync_manager_connect() function: +
6. Connect to the sync manager service using the sync_manager_connect() function:
```
 result = sync_manager_connect();
 
```
7. In the case of using Account, Account and bundle creation should be performed previously for sync_manager_add_sync_job()'s parameters. But, Account handle is not a mandatory parameter. Because, that is for an application which want to use the Sync Manager without Account. See the Creating and Managing an Account part for Account creation in Account Tutorial. Also, see the Managing and Using the Bundle Content part for Bundle creation in Bundle Tutorial. For example,: +
8. If you want to use an account (track calendar or contact data changes on the device), create the account and the bundle to obtain the parameters for the sync_manager_add_sync_job() function you need later on. +
  The account handle is not a mandatory parameter, because it is meant for an application that uses the sync manager without an account. For more information, see Creating and Managing an Account and Managing and Using the Bundle Content.
  +
```
 account_h account = NULL;
 int account_id = -1;
@@ -103,32 +102,33 @@ bundle *extra = NULL;
 
 account_connect();
 account_create(&account);
-account_set_user_name(account, "test_name");
-account_set_email_address(account, "test_email@samsung.com");
-account_set_package_name(account, "data-sync-module");
+account_set_user_name(account, "test_name");
+account_set_email_address(account, "test_email@samsung.com");
+account_set_package_name(account, "data-sync-module");
 account_set_sync_support(account, ACCOUNT_SUPPORTS_SYNC);
 account_insert_to_db(account, &account_id);
 account_disconnect();
 
 extra = bundle_create();
-bundle_add(extra, SYNC_OPTION_NO_RETRY, "true");
-bundle_add(extra, SYNC_OPTION_EXPEDITED, "false");
+bundle_add(extra, SYNC_OPTION_NO_RETRY, "true");
+bundle_add(extra, SYNC_OPTION_EXPEDITED, "false");
 
```
  -The above example creates bundle and adds option for sync related information. If the SYNC_OPTION_NO_RETRY is set as true, sync service will not retry operation when sync operation is failed. +
  This example creates a bundle and adds options for sync-related information. Since the SYNC_OPTION_NO_RETRY is set to true, the sync service does not retry the operation if the sync operation fails.
9. To add on demand sync job, as follows: +
10. To add an on-demand sync job:
```
 result = sync_manager_add_sync_job(account, capability, extra);
 
```
  -In the case of accountless, as follows: +
  If no account is used:
```
 result = sync_manager_add_sync_job(NULL, NULL, extra);
 
```
  -If sync job process had been made well, returns value SYNC_ERROR_NONE. +
  If the sync job addition process succeeds, the SYNC_ERROR_NONE value is returned.
11. When on demand sync is no longer used, remove the sync job with the sync_manager_remove_sync_job() function. If you want to stop using account, should not forget clean-up account handle. Also, disconnect from Sync Manager and release the resources with the sync_manager_disconnect() function: +
12. When the on-demand sync is no longer needed, remove it with the sync_manager_remove_sync_job() function. If you want to stop using the account too, clean up the account handle. +
  At the end, disconnect from the sync manager and release the resources with the sync_manager_disconnect() function.
```
 result = sync_manager_remove_sync_job(account, capability);
 
@@ -142,7 +142,7 @@ sync_manager_disconnect();
 sync_adapter_unset_callbacks();
 sync_adapter_destroy();
 
```
  -In the case of accountless, as follows: +
  If no account is used:
```
 result = sync_manager_remove_sync_job(NULL, NULL);
 
@@ -150,73 +150,69 @@ sync_manager_disconnect();
 sync_adapter_unset_callbacks();
 sync_adapter_destroy();
 
```
  -
-
-
-
-
Periodic Sync
- Hide -
-
+ +
Initializing the Periodic Sync
-
To inform regularly service app of times to sync operation with an interval.
+
To inform the service application of a periodical sync operation and its sync interval:
1. To use the features of the Sync Manager API, include the <sync_manager.h> header file in your application: +
2. To use the features of the Sync Manager API, include the <sync_manager.h> header file in your application:
```
 #include <sync_manager.h>
 
```
3. Sync Adapter callbacks should be set first. Setting Sync Adapter callbacks can be verified at Sync Adapter. To set callbacks, as follows: +
4. Set the sync adapter callbacks:
```
 #include <sync_adapter.h>
 
-const char* capability = "http://tizen.org/account/capability/contact";
+const char* capability = "http://tizen.org/account/capability/contact";
 int result;
 result = sync_adapter_init(capability);
 result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 
```
  -In the case of accountless, as follows: +
  If no capabilities are defined (you do not want to receive notifications about calendar or contact data changes on the device):
```
 result = sync_adapter_init(NULL);
 result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
 
```
5. Connect to Sync Manager service using the sync_manager_connect() function: +
6. Connect to the sync manager service using the sync_manager_connect() function:
```
-int result;
 result = sync_manager_connect();
 
```
7. In the case of using Account, Account and bundle creation should be performed previously for sync_manager_add_sync_job()'s parameters. But, Account handle is not a mandatory parameter. Because, an application is not using the Account in order to use the Sync Manager. See the Creating and Managing an Account part for Account creation in Account Tutorial or above On Demand Turorial. Also, see the Managing and Using the Bundle Content part for Bundle creation in Bundle Tutorial. For example,: +
8. If you want to use an account (track calendar or contact data changes on the device), create the account and the bundle to obtain the parameters for the sync_manager_add_sync_job() function you need later on. +
  The account handle is not a mandatory parameter, because it is meant for an application that uses the sync manager without an account. For more information, see Creating and Managing an Account and Managing and Using the Bundle Content.
  +
```
 bundle *extra = NULL;
 extra = bundle_create();
-bundle_add(extra, SYNC_OPTION_NO_RETRY, "false");
-bundle_add(extra, SYNC_OPTION_EXPEDITED, "false");
+bundle_add(extra, SYNC_OPTION_NO_RETRY, "false");
+bundle_add(extra, SYNC_OPTION_EXPEDITED, "false");
 
```
  -The above example creates bundle and adds option for sync related information. All of the sync option is false for periodic sync request. The sync option will retry when sync operation is failed and doesn't grant priority for sync operation. +
  This example creates a bundle and adds options for sync-related information. All the sync options are set to false for a periodic sync request. The sync service tries again when the sync operation has failed and does not grant priority for the sync operation.
9. To add periodic sync job, as follows: +
10. To add a periodic sync job:
```
 sync_period_e sync_period = SYNC_PERIOD_INTERVAL_30MIN;
 result = sync_manager_add_periodic_sync_job(account, capability, extra, sync_period);
 
```
  -In the case of accountless, as follows: +
  If no account is used:
```
 result = sync_manager_add_periodic_sync_job(NULL, NULL, extra, sync_period);
 
```
  -If sync job process had been made well, returns value SYNC_ERROR_NONE. Last parameter means time interval of periodic sync. +
  If the sync job addition process succeeds, the SYNC_ERROR_NONE value is returned. The last parameter stands for the time interval of the periodic sync.
11. When periodic sync is no longer used, remove the sync job with the sync_manager_remove_periodic_sync_job() function. If you want to stop using account, should not forget clean-up account handle. That can be verified above On Demand Tutorial. Also, disconnect from Sync Manager and release the resources with the sync_manager_disconnect() function: +
12. When the periodic sync is no longer needed, remove it with the sync_manager_remove_periodic_sync_job() function. If you want to stop using the account too, clean up the account handle, as shown in the Initializing the On-demand Sync use case. + +
  At the end, disconnect from the sync manager and release the resources with the sync_manager_disconnect() function.
```
 result = sync_manager_remove_periodic_sync_job(account, capability);
 
@@ -224,7 +220,7 @@ sync_manager_disconnect();
 sync_adapter_unset_callbacks();
 sync_adapter_destroy();
 
```
  -In the case of accountless, as follows: +
  If no account is used:
```
 result = sync_manager_remove_periodic_sync_job(NULL, NULL);
 
@@ -234,12 +230,7 @@ sync_adapter_destroy();
 
```
-
-

diff --git a/org.tizen.tutorials/html/native/sync/sync_tutorials_n.htm b/org.tizen.tutorials/html/native/sync/sync_tutorials_n.htm index 96441d5..ab2ce82 100644 --- a/org.tizen.tutorials/html/native/sync/sync_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/sync/sync_tutorials_n.htm @@ -11,36 +11,47 @@ - Sync: Scheduling for Syncing of Application's Data + Sync: Scheduling for Application Data Syncing -

The sync tutorials demonstrate how you can synchronize data between mobile device and server:

+ + + + + + + + + + +

Note
The Sync API domain is supported in mobile applications only.

+ +

The sync tutorials demonstrate how to use the following features in creating Tizen native applications:

- Sync Adapter: Making sync mechanism implementation easy -
Demonstrates how you can receive the notification of a sync operation.
+ Sync Adapter: Implementing the Sync Mechanism +
Demonstrates how you can receive notifications of a sync operation.
- Sync Manager: Managing all sync related activities -
Demonstrates how you can manage the schedule of time to synchronize data.
+ Sync Manager: Managing Sync-related Activities +
Demonstrates how you can manage the data synchronizing schedule.

diff --git a/org.tizen.tutorials/html/native/system/device_tutorial_n.htm b/org.tizen.tutorials/html/native/system/device_tutorial_n.htm index b2a8da1..109484f 100644 --- a/org.tizen.tutorials/html/native/system/device_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/device_tutorial_n.htm @@ -16,82 +16,71 @@ -

This tutorial demonstrates how to manage the display, battery, LED, haptic, and power functions.

+ +

This tutorial demonstrates how you can manage the display, battery, LED, haptic, and power functions.

Become familiar with the Device API basics by learning about:

Retrieving Battery Information +
Retrieving Battery Information
Get battery information.
Device control
- Controlling the Display +
- Controlling the Display
  Control display devices.
- Controlling Haptic Devices +
- Controlling Haptic Devices
  Control haptic devices.
- Controlling LED Devices +
- Controlling LED Devices
  Control LED devices.
- Controlling the Power State +
- Controlling the Power State
  Control the device power state.
Monitoring Device Changes +
Monitoring Device Changes
Register a changed device event to monitor device changes.

Show All
Hide All

- -

-
-
Retrieving Battery Information
- Hide -
-
+
Retrieving Battery Information
+
To retrieve battery information:
1. -
  To use the battery-related features of the Device API, include the <device/battery.h> header file in your application:
  +
  To use the battery-related features of the Device API (in mobile and wearable applications), include the <device/battery.h> header file in your application:
```
 #include <device/battery.h>
```
2. Get the battery details: -
-
-
-
-
Controlling the Display
- Hide -
-
+ +
Controlling the Display
+
To control the display:
1. -
  To use the display-related features of the Device API, include the <device/display.h> header file in your application:
  +
  To use the display-related features of the Device API (in mobile and wearable applications), include the <device/display.h> header file in your application:
```
 #include <device/display.h>
```
2. Retrieve and set display properties: -

- Hide -

To control haptic devices:

+ +

To control haptic devices:

-
To use the haptic-related features of the Device API, include the <device/haptic.h> header file in your application:
+
To use the haptic-related features of the Device API (in mobile and wearable applications), include the <device/haptic.h> header file in your application:
```
 #include <device/haptic.h>
```

- -

- Hide -

To control LED devices:

+ + +

+ +

To control LED devices:

-
To use the LED-related features of the Device API, include the <device/led.h> header file in your application:
+
To use the LED-related features of the Device API (in mobile and wearable applications), include the <device/led.h> header file in your application:
```
 #include <device/led.h>
```

The led_custom_flags enumerator defines the available custom effects.

The led_custom_flags enumerator (in mobile and wearable applications) defines the available custom effects.

+ -

- Hide -

To control the device power state:

+ +

To control the device power state:

-
To use the power-related features of the Device API, include the <device/power.h> header file in your application:
+
To use the power-related features of the Device API (in mobile and wearable applications), include the <device/power.h> header file in your application:
```
 #include <device/power.h>
```
Lock the power state with the device_power_request_lock() function.
The function locks the given lock state for a specified time. After the given timeout, the given lock state is unlocked automatically. If the process is destroyed, every lock is removed.
-
The power_lock_e enumerator defines the available lock types.
+
The power_lock_e enumerator (in mobile and wearable applications) defines the available lock types.
```
 int error;
@@ -317,25 +288,21 @@ int error;
 error = device_power_wakeup(true);
 
```

+ -

- Hide -

To monitor device changes:

+ +

To monitor device changes:

-
To use the device change-related features of the Device API, include the <device/callback.h> header file in your application:
+
To use the device change-related features of the Device API (in mobile and wearable applications), include the <device/callback.h> header file in your application:
```
 #include <device/callback.h>
```
Define the device changed callback, which is called when a device status changes. -
The device_callback_e enumerator defines the available callback types.
+
The device_callback_e enumerator (in mobile and wearable applications) defines the available callback types.
```
 static void changed_cb(device_callback_e type, void *value, void *user_data)
@@ -363,11 +330,7 @@ int error;
 error = device_remove_callback(DEVICE_CALLBACK_DISPLAY_STATE, changed_cb);
 
```

- -

+ diff --git a/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm b/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm index f7cda37..493f4d8 100644 --- a/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm @@ -16,33 +16,34 @@ -

+ -

This tutorial demonstrates how to send log messages to a circular log device and check them.

This tutorial demonstrates how you can send log messages to a circular log device and check them.

Become familiar with the dlog API basics by learning about:

@@ -55,42 +56,24 @@

Check the output.

Show All
Hide All

- -

-
-
Initializing dlog
-Hide -
-
+
Initializing dlog

To initialize dlog:
-
1. To use the functions and data types of the dlog API, include the <dlog.h> header file in your application:
  +
  1. To use the functions and data types of the dlog API (in mobile and wearable applications), include the <dlog.h> header file in your application:
```
 #include <dlog.h>
 
```
  2. Make sure you have the necessary tools: -
  -
-
-
-
Sending a Log Message
-Hide -
-
+ +
Sending a Log Message
+
Send a log message with the MY_APP tag with various priorities.
```
@@ -111,14 +94,9 @@ int main(void)
    return 0;
 }
 
```
-
-
-
-
Checking the Output Logs
-Hide -
-
+ +
Checking the Output Logs
+
Execute dlogutil on the device sdb shell to check the out log.

Check the sdb guide to connect to a target and use it.
@@ -209,11 +187,6 @@ W/MY_APP (11097): warning message E/MY_APP (11097): error message I/MY_APP (11097): test dlog, 21 -
-

diff --git a/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm index 8495471..71b14e5 100644 --- a/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm @@ -16,28 +16,29 @@ -

This tutorial demonstrates how you can obtain runtime information, such as system preferences.

@@ -51,24 +52,13 @@

Show All
Hide All

- -

-
-
Getting Runtime Information
- Hide -
-
+ +
Getting Runtime Information
+
To get runtime information, which consists of key, value pairs:
1. To use the runtime information-related features of the Runtime information API, include the <runtime_info.h> header file in your application:
  +
2. To use the runtime information-related features of the Runtime information API (in mobile and wearable applications), include the <runtime_info.h> header file in your application:
```
 #include <runtime_info.h>
 
```
-
-
-
-
Monitoring Runtime Information Changes
- Hide -
-
+ +
Monitoring Runtime Information Changes
+
To monitor runtime information changes:
1. To use the runtime information-related features of the Runtime information API, include the <runtime_info.h> header file in your application:
  +
2. To use the runtime information-related features of the Runtime information API (in mobile and wearable applications), include the <runtime_info.h> header file in your application:
```
 #include <runtime_info.h>
 
```
-
-

diff --git a/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm b/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm index 74821c4..fd9facc 100644 --- a/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/sensor_tutorial_n.htm @@ -16,9 +16,9 @@ -

This tutorial demonstrates how you can manage sensors, retrieve information from and about them, and set intervals for sensor events.

@@ -54,24 +55,12 @@

Create an event which is called when the accuracy is changed.

Show All
Hide All

- -

-
-
Retrieving a Sensor
- Hide -
-
+
Retrieving a Sensor
+
To declare the variables and get a sensor handle:
1. To use the Sensor API, include the following header file: +
2. To use the Sensor API (in mobile and wearable applications), include the following header file:
```
 #include <sensor.h>
 
```
  @@ -105,19 +94,13 @@ error = sensor_get_default_sensor(type, &list);
-
-
-
-
Registering a Sensor Event
- Hide -
-
+ +
Registering a Sensor Event
+
To set and unset callback functions for sensor events:
1. To use the Sensor API, include the following header file: +
2. To use the Sensor API (in mobile and wearable applications), include the following header file:
```
 #include <sensor.h>
 
```
  @@ -166,7 +149,7 @@ error = sensor_listener_set_interval(listener, 100);
3. Set the sensor option (optional): +
4. Set the optional sensor option (in mobile and wearable applications):
```
 error = sensor_listener_set_option(listener, SENSOR_OPTION_ALWAYS_ON);
 
```
  @@ -226,15 +209,9 @@ error = sensor_get_min_interval(listener, &min_interval);
-
-
-
-
Registering the Accuracy Changed Callback
- Hide -
-
+ +
Registering the Accuracy Changed Callback
+
To register the accuracy changed callback:
-
-

diff --git a/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm b/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm index 5463457..4a5ad3b 100644 --- a/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/storage_tutorial_n.htm @@ -16,29 +16,30 @@ -

This tutorial demonstrates how you can obtain detailed information from the internal and external storage.

@@ -56,28 +57,16 @@

Retrieve information about the storage space.

Show All
Hide All

- -

-
-
Using Statvfs Wrapper
- Hide -
-
+
Using Statvfs Wrapper
+
Use the statvfs wrapper to get memory sizes:
1. To use the Storage API features, include the <storage.h> header file in your application:
  +
2. To use the Storage API (in mobile and wearable applications) features, include the <storage.h> header file in your application:
```
 #include <storage.h>
 
```
3. Get memory sizes:
  -
-
-
-
-
Retrieving Storage Information
- Hide -
-
+ +
Retrieving Storage Information

To retrieve storage information:
1. To use the Storage API features, include the <storage.h> header file in your application:
  +
2. To use the Storage API (in mobile and wearable applications) features, include the <storage.h> header file in your application:
```
 #include <storage.h>
 
```
3. Retrieve storage information:
  -
-
-
-
Monitoring Storage State Changes
- Hide -
-
+

To monitor storage state changes:

To use the Storage API features, include the <storage.h> header file in your application:
+
To use the Storage API (in mobile and wearable applications) features, include the <storage.h> header file in your application:
```
 #include <storage.h>
 
```

- - -

- Hide -

+ +

To retrieve storage space information:

To use the Storage API features, include the <storage.h> header file in your application:
+
To use the Storage API (in mobile and wearable applications) features, include the <storage.h> header file in your application:
```
 #include <storage.h>
 
```
Retrieve storage space:
-

- -

diff --git a/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm b/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm index 18b745c..0c3aabb 100644 --- a/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm @@ -16,9 +16,9 @@ -

This tutorial demonstrates how you can obtain device information, such as platform version, device model, and supported device features.

@@ -51,22 +52,10 @@

Check whether the device provides a camera.

Show All
Hide All

- -

-
-
Getting the Device Model Name
- Hide -
-
+
Getting the Device Model Name
+
To get the device model name:
1. To use the device-specific information-related features of the System Information API, include the <system_info.h> header file in your application:
  +
2. To use the device-specific information-related features of the System Information API (in mobile and wearable applications), include the <system_info.h> header file in your application:
```
 #include <system_info.h>
 
```
-
-
-
-
Checking Whether a Camera is Provided
- Hide -
-
+ +
Checking Whether a Camera is Provided

To check whether a camera is provided:
1. To use the device-specific information-related features of the System Information API, include the <system_info.h> header file in your application:
  +
2. To use the device-specific information-related features of the System Information API (in mobile and wearable applications), include the <system_info.h> header file in your application:
```
 #include <system_info.h>
 
```
-
-

diff --git a/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm b/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm index 9b6f9a0..467415c 100644 --- a/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm @@ -16,27 +16,28 @@ -

This tutorial demonstrates how you can manage and monitor system settings.

@@ -48,24 +49,11 @@ -

Show All
Hide All

- -

-
-
Managing System Settings
- Hide -
-
+
Managing System Settings

To manage system settings, which provide access to system variables:
1. To use the system settings-related features of the System Settings API, include the <system_settings.h> header file in your application:
  +
2. To use the system settings-related features of the System Settings API (in mobile and wearable applications), include the <system_settings.h> header file in your application:
```
 #include <system_settings.h>
 
```
3. Get the setting data.
  -
  The available settings are defined in the system_settings_key_e enumerator.
  +
  The available settings are defined in the system_settings_key_e enumerator (in mobile and wearable applications).
  
  Read the data using the following functions, according to the data type of the value you want to read:
  -
  - int system_settings_get_value_int (system_settings_key_e key, int *value)
-

diff --git a/org.tizen.tutorials/html/native/system/system_tutorials_n.htm b/org.tizen.tutorials/html/native/system/system_tutorials_n.htm index 1fea3c3..1d2257a 100644 --- a/org.tizen.tutorials/html/native/system/system_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/system/system_tutorials_n.htm @@ -16,23 +16,24 @@ -

The system tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The system tutorials demonstrate how to use the following features in creating Tizen native applications:

Device: Accessing Devices, Such as SB, MMC, Battery, CPU, and Display diff --git a/org.tizen.tutorials/html/native/telephony/phonenumber_util_n.htm b/org.tizen.tutorials/html/native/telephony/phonenumber_util_n.htm deleted file mode 100644 index 0cac351..0000000 --- a/org.tizen.tutorials/html/native/telephony/phonenumber_util_n.htm +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - - - - - - - Phonenumber-utils - - - -
-
-

-
- -
-
Related Info
-
-
-
- -
-
Phonenumber-utils
- -
Tizen enables you to parse and format phone numbers. The Phonenumber-utils APIs are implemented with the libphonenumber opensource library.
- -
The main features of the Phonenumber-utils API include:
- -
- Retrieving the location information -
  You can get the location based on the phone number, region, and language using the phone_number_get_location_from_number() function. If the function cannot provide the location with the passed language, it uses English.
- Formatting the phone number -
  You can format the phone number string based on the region using the dash ("-") and space (" ") characters using the phone_number_get_formatted_number() function.
- - - -
- - - -
-
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.tutorials/html/native/telephony/telephony_tutorials_n.htm b/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm index 567b813..305a31a 100644 --- a/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm @@ -521,4 +521,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - \ No newline at end of file + diff --git a/org.tizen.tutorials/html/native/tutorials_n.htm b/org.tizen.tutorials/html/native/tutorials_n.htm index 56b7d1c..22bb014 100644 --- a/org.tizen.tutorials/html/native/tutorials_n.htm +++ b/org.tizen.tutorials/html/native/tutorials_n.htm @@ -16,15 +16,15 @@ -
+
-
+
Related Info

Tizen Native Guides
-
Native API Reference
+
Native API References
@@ -39,41 +39,41 @@
- Application Framework: Controlling Your Application -
  Demonstrate how you can configure application properties and manage application data.
- Base: Using Fundamental Libraries -
  Demonstrate how you can manage locale-sensitive information and use SQL databases in your application.
- Content: Getting and Handling Media Content -
  Demonstrate how you can manage and store a variety of data types, input and output data, and device content.
- Context: Detecting and Exploiting Contextual Information -
  Demonstrate how you can detect user activities and gestures.
- Graphics: Creating and Managing Graphics -
  Demonstrate how you can create and edit various kinds of images, shapes, text, and elements, and recognize specific elements from images and video.
- Location: Using Location Information and Service -
  Demonstrate how you can manage location data.
- Messaging: Sending SMS, MMS, Email, and Push Messages -
  Demonstrate how you can send and receive SMS, MMS, email, and push messages.
- Multimedia: Handling Audio, Video, Camera, and Images -
  Demonstrate how you can capture and play various media.
- Network: Managing Connections and Communication -
  Demonstrate how you can send data to networks and other applications, and receive data back from them.
- OAuth2: Authorization Framework -
  Demonstrate how you can obtain access tokens using oauth2 authorization.
- OAuth2: Using the Authorization Framework +
  Demonstrates how you can obtain access tokens using oauth2 authorization.
- Security: Handling Keys and Cryptographic Operations -
  Demonstrate how you can increase the security of your application through cryptography and request control.
- Social: Managing Personal Data -
  Demonstrate how you can manage the user's personal data, such as contacts, calendars, and call history, on the device.
- Sync: Scheduling for Syncing of Application's Data -
  Demonstrate how you can manage your application with notification for syncing operation between server and device.
- System: Getting System Information and Managing Devices -
  Demonstrate how you can manage data related to or provided by the device.
- Telephony: Handling Phone Call, SIM Card, and Network Information
  Demonstrates how you can retrieve call status, extract information stored on a SIM card, and get information about the current cellular network and telephony service.
- UI: Creating the Application UI -
  Demonstrate how you can create a visual outlook for your application to ensure the best possible user experience.
- UI Framework: Creating the Application UI +
  Demonstrates how you can create a visual outlook for your application to ensure the best possible user experience.
- UIX: Taking Advantage of UI Extensions -
  Demonstrate how you can recognize and synthesize speech.
- Web: Managing Web Pages and Web Content -
  Demonstrate how you can create a simple web browser
- Sync: Scheduling for Application Data Syncing in mobile applications only +
  Demonstrates how you can receive notifications about syncing operations between a server and the device.
diff --git a/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm index 431380b..146a418 100644 --- a/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/ui/animation_event_types_tutorials_n.htm @@ -16,16 +16,21 @@ -
+
-
+
Related Info

Animation and Effect Types Guide
-
UI API
+
Ecore API for Mobile Native
+
Edje API for Mobile Native
+
Elementary API for Mobile Native
+
Ecore API for Wearable Native
+
Edje API for Wearable Native
+
Elementary API for Wearable Native
@@ -33,7 +38,7 @@
Animation and Effect Types: Using Various Effect and Effect Types
-
The animation and effect tutorials demonstrate how to create and implement a variety of animation effects in Tizen mobile native applications:
+
The animation and effect tutorials demonstrate how to create and implement a variety of animation effects in Tizen native applications:

Ecore Animator: Creating Ecore Animations
Demonstrates how you can create an animation by changing and manipulating the Evas object attributes.

Edje Animation: Using the Edje Library to Create Animations
Demonstrates how you can use the Edje library to create your own animations.
diff --git a/org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm deleted file mode 100644 index 52e7f1b..0000000 --- a/org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm +++ /dev/null @@ -1,232 +0,0 @@ - - - - - - - - - - - - - - Application Framework: Managing the Application Framework - - - - -
-
-
-
-
-
Content
-
-
Handling the Application Framework -
-
-
Related Info
-
-
UI Guides
-
EFL API
-
-
-
- -
- -
Application Framework: Managing the Application Framework
-
- -
This tutorial demonstrates how you can manage the application framework.
- - -
Warm-up
-
Become familiar with the EFL API basics by learning about:
- -
-
Handling the Application Framework
Start the application and manage its interactions with the operating system.
-
- -
-
-
Show All
-
Hide All
-
-
- -
- -
-
-
Handling the Application Framework
-Hide -
-
-
Appcore is the framework all Tizen applications are based on. It is simple and only handles interactions between applications and the operating system.
-
An application starts with the main() function. It initializes the appcore and starts it.
-
The code below is the minimal application using appcore. It only builds and runs.
-
-// Add this include to be able to use the functions from appcore. -#include <app.h> - -int -main(int argc, char *argv[]) -{ -   // Create and ui_app_lifecycle_callback_s object and initialize its contents to 0 -   ui_app_lifecycle_callback_s event_callback = {0,}; - -   // Run the application -   return ui_app_main(&argc, &argv, &event_callback, NULL); -} -
- -
Appcore is based on callbacks. There are two classes of callbacks: those about the application's life-cycle and those about the system.
-
The application's life-cycle callbacks are:
-
-
create: first initialization, comes after app_main() has been called and initializes UI.
-
control: triggered when the application is started to do something. It can be called several times during the lifespan of an application, it shows the screen for the action requested. It requires specific information given to the callback.
-
terminate: saves work, releases resources, and exits.
-
pause: sets the application's window not visible and switches to a mode which uses less resources.
-
resume: sets the application's window to be visible again.
-
- -
Then, system-related callbacks:
-
-
low_memory: the system is running low on memory, saves work, and releases resources; if this is not enough are freed, some applications will be killed.
-
low_battery: the system is running low on battery (less than 5%), saves work and avoids battery-draining workloads.
-
device_orientation: the screen orientation changed between vertical and horizontal, orientation information is given to the callback.
-
language_changed: language of the system is changed and messages are translated.
-
region_format_changed: time zone has changed.
-
- -
A basic implementation is shown below:
-
-#include <app.h> - -// Structure to store the data for application's logic; it is given -// to each callback invoked through appcore -typedef struct appdata { -   char *several; -   char *fields; -} appdata_s; - -static bool -app_create(void *data) -{ -   // Hook to take necessary actions before main event loop starts; this -   // usually means initializing UI and application's data (the "data" -   // parameter to this function) - -   appdata_s *ad = data; -   create_gui(ad); - -   // If this function returns true, the main loop of application starts -   // If this function returns false, the application is terminated -   return true; -} - -static void -app_control(app_control_h app_control, void *data) -{ -   // Handles the launch request, show the user the task requested through the -   // "app_control" parameter (detailed in the next section) -} - -static void -app_pause(void *data) -{ -   // Takes necessary actions when application becomes invisible -} - -static void -app_resume(void *data) -{ -   // Takes necessary actions when application becomes visible -} - -static void -app_terminate(void *data) -{ -   // Releases all resources -   appdata_s *ad = data; - -   if (!ad) { -      return; -   } - -   // If specific steps are needed: -   // destroy_gui(ad); -} - -static void -app_device_orientation(void *data) -{ -   // Takes necessary actions when device orientation changes -} - -int -main(int argc, char *argv[]) -{ -   appdata_s ad = {0,}; -   ui_app_lifecycle_callback_s event_callback = {0,}; - -   // Sets the callbacks for the application's logic; explanation on the -   // implementation below -   event_callback.create = app_create; -   event_callback.terminate = app_terminate; -   event_callback.pause = app_pause; -   event_callback.resume = app_resume; -   event_callback.app_control = app_control; - -   // Note the &ad below; this is how the struct is given to callbacks -   return ui_app_main(argc, argv, &event_callback, &ad); -} -
- -
The last section of this tutorial describes app control. It is a mechanism through which an application receives additional information about why it was started and with which parameters.
-
An application receives a handle to an app control object in the app_control callback. A definition for that callback is:
-
app_control_cb(app_control_h app_control, void *user_data); -
- -
The app_control_h type is opaque and information can only be extracted from it through functions from the SDK.
-
The most interesting ones are:
-
-
app_control_get_operation(): retrieves a string describing which operation the application was started for.
-
app_control_get_mime(): retrieves the MIME type of the data (e.g. image/jpg).
-
app_control_get_app_extra_data(): gets the string value associated with the given key.
-
app_control_get_app_extra_data_array(): gets the string array associated with the given key (first check with app_control_is_extra_data_array() whether the data associated with a key is an array).
-
-
If other functions are needed, check the app.h header.
-
-
- -
-
-
- - - - -
- - - -
-
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.
-
- - - - - diff --git a/org.tizen.tutorials/html/native/ui/basic_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/basic_tutorial_mn.htm similarity index 81% rename from org.tizen.tutorials/html/native/ui/basic_tutorial_n.htm rename to org.tizen.tutorials/html/native/ui/basic_tutorial_mn.htm index 77c6f6d..b518575 100644 --- a/org.tizen.tutorials/html/native/ui/basic_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/basic_tutorial_mn.htm @@ -11,62 +11,62 @@ - Basic: Using Basic Interactions + Basic: Using Basic Interactions -
+

Content

-
Using Buttons
-
Using Simple Text
-
Using Simple Lists
+
Using Buttons
+
Using Simple Text
+
Using Simple Lists

Related Info

-
UI Widgets Guide
-
Elementary Widgets API
+
Components Guide for Mobile Native
+
Elementary API for Mobile Native
+
Evas API for Mobile Native

-
Basic: Using Basic Interactions
-
+
Basic: Using Basic Interactions
+ -
This tutorial teaches the basics of widgets interactions. It builds upon the EFL Hello World Tutorial.
+
This tutorial teaches the basics of UI components interactions. It builds upon the Hello World example.
+ + + + + + + + + + +
Note
This feature is supported in mobile applications only.

Warm-up
-
Become familiar with the Elementary Widgets API by learning about:
+
Become familiar with the Elementary and Evas API basics by learning about:

-
Using Buttons +
Using Buttons
Use buttons in your application.
-
Using Simple Text +
Using Simple Text
Use simple text and text styles in your application.
-
Using Simple Lists +
Using Simple Lists
Use different kinds of lists in your application.

-
-
-
Show All
-
Hide All
-
-
+
Using Buttons
-
-
-
-
Using Buttons
-Hide -
-
-
The basic application code is the same as in the EFL Hello World Tutorial.
+
The basic application code is the same as in the Hello World example.

Button Styles

Basic Text Button
@@ -83,7 +83,7 @@ evas_object_show(button);
Basic Icon Button
-
Instead of a button with text, create a button with icon.
+
Instead of a button with text, create a button with an icon.

Evas_Object* button2; Evas_Object* icon2; @@ -98,7 +98,7 @@ evas_object_show(button);

Icon and Text Button
-
Create buttons with both an icon and a label.
+
Create buttons with both an icon and a text label.

Evas_Object* button3; Evas_Object* icon3; button3 = elm_button_add(box); @@ -131,7 +131,7 @@ evas_object_smart_callback_add(button, "clicked", _button_click_cb, NU

Press/Unpress Events
-
The button may also respond to the press and unpress events instead of the whole click.
+
The button can respond to the press and unpress events instead of the entire click event.

static void _button_press_cb(void *data, Evas_Object *button, void *ev) {    elm_object_text_set(button, "Pressed!"); @@ -146,15 +146,15 @@ evas_object_smart_callback_add(button3, "unpressed", _button_unpress_c

Repeated Events
-
The button may also receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, may be set. In this example, the initial timeout is set to one second, and the repeat interval to half a second.
+
The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.

static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) { -      static int count = 0; -      char buf[16]; +   static int count = 0; +   char buf[16]; -      snprintf(buf, sizeof(buf), "Repeat %d", count++); +   snprintf(buf, sizeof(buf), "Repeat %d", count++); -      elm_object_text_set(button, buf); +   elm_object_text_set(button, buf); } elm_button_autorepeat_set(button3, EINA_TRUE); @@ -162,14 +162,9 @@ elm_button_autorepeat_initial_timeout_set(button3, 1.0); elm_button_autorepeat_gap_timeout_set(button3, 0.5); evas_object_smart_callback_add(button3, "repeated", _button_repeat_cb, NULL);
-
-
-
-
-
Using Simple Text
-Hide -
-
+ +
Using Simple Text
+
Basic Text

To create a label object, use the following code.

label = elm_label_add(ad->win); @@ -179,7 +174,7 @@ evas_object_show(label);
Sliding Text

If your text is too long, set it to slide. The duration of the slide is set to five seconds in the following example. There are several styles available:
-
+

slide_short: The text stops at an edge, reverts to its initial position and slides again.

slide_long: The text is originally empty. It slides in, all the way to the edge, continues sliding until the label is empty, and loops.

slide_bounce: The text moves backwards after stopping at the edge. In the example, it is set to bounce.
@@ -206,14 +201,9 @@ evas_object_color_set(label, 0, 0, 255, 255);
You can apply basic styles to the text. For a bolded text, do as follows.

elm_object_text_set(label, "<b>This text is bold.</b>");
-
-
-
-
-
Using Simple Lists
-Hide -
-
+ +
Using Simple Lists
+
Basic List

A list is a scrollable container, whose children are selected.

Evas_Object* list; @@ -239,7 +229,7 @@ elm_list_go(list);
List Mode

There are several modes for the list item dimensions.
-
+

ELM_LIST_COMPRESS: The list does not set any size measures to inform the container how to resize it. If the list is not created as a "resize object", its dimensions are zeroed. The list respects the container's geometry and if any of the list items do not fit into the container transverse axis, the list does not scroll in that direction.

ELM_LIST_SCROLL: This is the default value. This list is the same as ELM_LIST_COMPRESS, with the exception that if any of the list items do not fit into the container transverse axis, the list still scrolls in that direction.

ELM_LIST_LIMIT: This list sets a minimum size measure on the list object, so that containers may respect it (and resize themselves to fit the child properly). More specifically, a minimum size measure is set for its transverse axis, so that the largest item in that direction fits well. This feature is bound by the list object's maximum size measures that are set externally.
@@ -260,7 +250,7 @@ elm_list_go(list);

As for the bounce preference, the second argument is for the horizontal axis, the third one for the vertical axis.
-
+

ELM_SCROLLER_POLICY_OFF hides the scrollbar

ELM_SCROLLER_POLICY_ON shows the scrollbar

ELM_SCROLLER_POLICY_AUTO the scrollbar is shown only when needed and stays hidden at other times
@@ -268,7 +258,7 @@ elm_list_go(list);
Events

A list responds to several events:
-
+

activated: The user clicks or presses an item.

selected: The user selects an item.

unselected: The user unselects an item.
@@ -280,11 +270,6 @@ elm_list_go(list);
highlighted: An item is pressed and highlighted.

unhighlighted: The press and highlight is removed on an item.

-
-
-
-
-
diff --git a/org.tizen.tutorials/html/native/ui/button_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/button_tutorial_wn.htm new file mode 100644 index 0000000..f7fcf7c --- /dev/null +++ b/org.tizen.tutorials/html/native/ui/button_tutorial_wn.htm @@ -0,0 +1,240 @@ + + + + + + + + + + + + + + Button: Using Buttons + + + + +
+
+
+
+
+
Content
+
+
Initializing the Button Application
+
Using Button Styles
+
Managing Button Events
+
+
Related Info
+
+
Button Guide for Wearable Native
+
Button API for Wearable Native
+
+
+
+ +
+
Button: Using Buttons
+ + +
This tutorial teaches the basics of the button component interactions.
+ + + + + + + + + + +
Note
This feature is supported in wearable applications only.
+ +
Warm-up
+
Become familiar with the Button API basics by learning about:
+
+
Initializing the Button Application +
Create a base application where buttons can be used.
+
Using Button Styles +
Create various button styles.
+
Managing Button Events +
Handle various button events.
+
+ +
Initializing the Button Application
+ +
This use case creates an application with a window entitled "Button Basic Tutorial". The window consists of a box component, and a button is placed inside the box.
+ +
To create a typical elementary application:
+
+static void +create_base_gui(appdata_s *ad) +{ +   // Window +   Evas_Object *btn1, *btn2, *btn3; + +   ad->win = elm_win_util_standard_add("main", "Button Basic Tutorial"); +   elm_win_autodel_set(ad->win, EINA_TRUE); + +   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL); +   eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad); + +   ad->box = elm_box_add(ad->win); +   evas_object_size_hint_weight_set(ad->box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); +   evas_object_show(ad->box); +   elm_win_resize_object_add(ad->win, ad->box); + +   create_button(ad->box); + +   // Show the window after the base GUI is set up +   evas_object_show(ad->win); +} + +static bool +app_create(void *data) +{ +   appdata_s *ad = data; +   create_base_gui(ad); + +   return true; +} + +int +main(int argc, char **argv) +{ +   struct app_data ad = {0,}; +   ui_app_lifecycle_callback_s event_callback = {0,}; + +   event_callback.create = app_create; + +   return ui_app_main(&argc, &argv, &event_callback, &ad); +}
+ + +
Using Button Styles
+ +
The basic application code is the same as in the Hello World example.
+ +
To use various button styles:
+ +
To create buttons using various styles:
+ +
Create a basic text-only button: + +
Evas_Object* button; + +button = elm_button_add(box); +elm_object_text_set(button, "Click me"); +evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); +evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5); +elm_box_pack_end(box, button); +evas_object_show(button); +
+ +
Create a basic icon button (no text, just an icon): +
Evas_Object* button2; +Evas_Object* icon2; + +button2 = elm_button_add(box); +icon2 = elm_icon_add(box); +elm_image_file_set(icon2, "icon.png", NULL); +elm_object_content_set(button2, icon2); +evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); +evas_object_size_hint_align_set(button2, EVAS_HINT_FILL, 0.5); +elm_box_pack_end(box, button2); +evas_object_show(button2); +
+ +
Create a button with both an icon and a text label: +
Evas_Object* button3; +Evas_Object* icon3; +button3 = elm_button_add(box); +icon3 = elm_icon_add(box); +elm_image_file_set(icon3, "icon.png", NULL); +elm_object_content_set(button3, icon3); +elm_object_text_set(button3, "Press me"); +evas_object_size_hint_weight_set(button3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); +evas_object_size_hint_align_set(button3, EVAS_HINT_FILL, 0.5); +elm_box_pack_end(box, button3); +evas_object_show(button3); +
+
+
To disable a button so that it is not in use, only shown:
+
elm_object_disabled_set(button2, EINA_TRUE); +
+ +
Managing Button Events
+
The Elementary buttons respond to user interactions with several events.
+
To manage button events:
+ +
+
Handle click events: +
The "click" event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.
+
+static void _button_click_cb(void *data, Evas_Object *button, void *ev) +{ +   elm_object_text_set(button, "Clicked!"); +} +evas_object_smart_callback_add(button, "clicked", _button_click_cb, NULL); +
+ +
Handle press and unpress events: +
The button can respond to the separate press and unpress events instead of the entire click event.
+
static void _button_press_cb(void *data, Evas_Object *button, void *ev) +{ +   elm_object_text_set(button, "Pressed!"); +} +static void _button_unpress_cb(void *data, Evas_Object *button, void *ev) +{ +   elm_object_text_set(button, "Unpressed!"); +} + +evas_object_smart_callback_add(button3, "pressed", _button_press_cb, NULL); +evas_object_smart_callback_add(button3, "unpressed", _button_unpress_cb, NULL); +
+ +
Handle repeated events: +
The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.
+
static void _button_repeat_cb(void *data, Evas_Object *button, void *ev) +{ +   static int count = 0; +   char buf[16]; + +   snprintf(buf, sizeof(buf), "Repeat %d", count++); + +   elm_object_text_set(button, buf); +} + +elm_button_autorepeat_set(button3, EINA_TRUE); +elm_button_autorepeat_initial_timeout_set(button3, 1.0); +elm_button_autorepeat_gap_timeout_set(button3, 0.5); +evas_object_smart_callback_add(button3, "repeated", _button_repeat_cb, 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.
+
+ + + + + diff --git a/org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm new file mode 100644 index 0000000..8ca2a27 --- /dev/null +++ b/org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + Circle Components: Creating a Circular View + + + + +
+
+
+
+
+
Content
+
+
Creating the Circle Surface
+
Creating the Circle Components
+
+
Related Info
+
+
Circle Components Guide
+
Efl Extension API for Wearable Native
+
+
+
+ +
+ +
Circle Components: Creating a Circular View
+ + +
This tutorial demonstrates how you can create a circular view with circle UI components, or circle components, which are supported by EFL Extension library. Additionally, you learn how to make your application to operate with rotary events. You need to test your application with a circular device or an emulator with circular display which has a rotary device in it.
+ + + + + + + + + +
Note
This feature is supported in wearable applications only.
+ +
Warm-up
+
Become familiar with the Efl Extension circle component basics by learning about:
+
+
Creating the Circle Surface +
Create a surface to show the circular UI of your application.
+
Creating the Circle Components +
Use circular UI components which operate with rotary events.
+
+ +
Creating the Circle Surface
+ +
Figure: An application view with Circle Slider
+
+ +
To show the circular UI of circle components, circle surface (Eext_Circle_Surface type) object is needed. The surface object can be connected with several circle components to manage the display. The following code shows how to create a surface object in an elementary naviframe component.
+
+Evas_Object *naviframe; +Eext_Circle_Surface * surface; + +naviframe = elm_naviframe_add(parent); +evas_object_show(naviframe); + +surface = eext_circle_surface_naviframe_add(naviframe); +
+ +
Creating the Circle Components
+
EFL Extension supports several circle components which operate with rotary events. There circle components are responsible for circular UI which fits with circular display.
+
To create the circle components:
+
+
Create the circle slider. +
The circle slider provides a circular UI and operates with rotary events to change its value. After calling eext_rotary_object_event_activated_set to the circle slider, every rotary event changes its value with step 0.5.
+
+Evas_Object* slider; + +slider = eext_circle_object_slider_add(parent, surface); +eext_circle_object_slider_step_set(slider, 0.5); +eext_rotary_object_event_activated_set(slider, EINA_TRUE); +
+
+ +
Create the circle progressbar. +
The circle progressbar provides a circular UI only. Its design can be changed by eext_circle_object APIs.
+
+Evas_Object* progressbar; + +progressbar = eext_circle_object_progressbar_add(parent, surface); +eext_circle_object_value_min_max_set(progressbar, 0.0, 100.0); +eext_circle_object_value_set(progressbar, 50); +evas_object_show(progressbar); +
+
+ +
Create the circle scroller. +
The circle scroller provides a circular scroll bar UI to an elementary scroller and operates with rotary events to scroll its content. After calling eext_rotary_object_event_activated_set to the circle scroller, every rotary event moves its content following the scroll direction.
+
+Evas_Object* scroller; +Evas_Object* circle_scroller; + +scroller = elm_scroller_add(parent); +elm_object_content_set(parent, scroller); + +circle_scroller = eext_circle_object_scroller_add(scroller, surface); +eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO); +eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE); +
+
+ +
Create the circle genlist. +
The circle genlist provides circular scroll bar UI to an elementary genlist and operates with rotary events to move to the next or the previous item. After calling eext_rotary_object_event_activated_set to the circle genlist, every rotary event shows the next or the previous item.
+
+Evas_Object* genlist; +Evas_Object* circle_genlist; + +genlist = elm_genlist_add(parent); +elm_object_content_set(parent, genlist); + +circle_genlist = eext_circle_object_genlist_add(genlist, surface); +eext_circle_object_genlist_scroller_policy_set(circle_genlist, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO); +eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE); +
+
+ +
Create the circle datetime. +
The circle datetime provides a circular UI which is proper to each date or time field of the elementary datetime and operates with rotary events to change its value. After calling eext_rotary_object_event_activated_set to circle datetime, every rotary event changes the value of each date or time field.
+
+Evas_Object* datetime; +Evas_Object* circle_datetime; + +datetime = elm_datetime_add(parent); +elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M%p"); +elm_object_content_set(parent, datetime); + +circle_datetime = eext_circle_object_datetime_add(datetime, surface); +eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE); +
+
+
+ + + + + +
+ + + +
+
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.
+
+ + + + + diff --git a/org.tizen.tutorials/html/native/ui/datetime_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/datetime_tutorial_wn.htm new file mode 100644 index 0000000..9ff654a --- /dev/null +++ b/org.tizen.tutorials/html/native/ui/datetime_tutorial_wn.htm @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + Datetime: Using Datetime + + + + +
+
+
+
+
+
Content
+
+
Creating a Date Picker
+
Creating a Time Picker
+
+
Related Info
+
+
Datetime Guide for Wearable Native
+
Datetime API for Wearable Native
+
+
+
+ +
+
Datetime: Using Datetime
+ + +
This tutorial explains how you can create UI components that allow the user to select a date or time.
+ + + + + + + + + + +
Note
This feature is supported in wearable applications only.
+ +
Warm-up
+
Become familiar with the Datetime API basics by learning about:
+
+
Creating a Date Picker +
Create a datetime component with the datepicker style.
+
Creating a Time Picker +
Create a datetime component with the timepicker style.
+
+ +
Creating a Date Picker
+ +
Use the elm_datetime component to add a date picker style (Year : Month : Day).
+
The following example creates the datepicker-styled Datetime and adds it in the conform.
+ +
+// Add a datepicker style Datetime component +datetime = elm_datetime_add(ad->win); +evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5); +evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0); +elm_object_style_set(datetime, "datepicker_layout"); +evas_object_show(datetime); + +elm_object_content_set(ad->conform, datetime); +
+ +
Creating a Time Picker
+
Use the elm_datetime component to add a time picker style (Hour(12) : Min : AM/PM, or Hour(24) : Min).
+
The following example creates the timepicker-styled Datetime and adds it in the conform.
+ +
+// Add a timepicker style Datetime component +datetime = elm_datetime_add(ad->win); +evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5); +evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0); +elm_object_style_set(datetime, "timepicker_layout"); +evas_object_show(datetime); + +elm_object_content_set(ad->conform, datetime); +
+ + + + + +
+ + + +
+
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.
+
+ + + + + diff --git a/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm index b971b28..5ce8827 100644 --- a/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/ecore_effects_tutorial_n.htm @@ -16,65 +16,58 @@ -
+

-
+

Content

-
Setting Up the Application
-
Creating a Rotation Effect
-
Creating a Zoom Effect
-
Creating a 3D Rotation Effect
-
Creating Drop and Bounce Effects
+
Setting Up the Application
+
Creating a Rotation Effect
+
Creating a Zoom Effect
+
Creating a 3D Rotation Effect
+
Creating Drop and Bounce Effects

Related Info

Ecore Animator Guide
-
Ecore Animator API
+
Ecore API for Mobile Native
+
Elementary API for Mobile Native
+
Evas API for Mobile Native
+
Ecore API for Wearable Native
+
Elementary API for Wearable Native
+
Evas API for Wearable Native

Ecore Animator: Creating Ecore Animations
-
+
This tutorial demonstrates how you can use Ecore animators to simplify the creation of animations. Using Ecore animators, you can manually create your own animations by changing and manipulating Evas object attributes. Ecore animators work like timers, running callback functions over a given duration (an animation timeline).

Warm-up
-
Become familiar with the Ecore Animator API basics by learning about:
+
Become familiar with the Ecore, Elementary, and Evas API basics by learning about:

-
Setting Up the Application +
Setting Up the Application
Prepare the application for use.

-
Creating a Rotation Effect +
Creating a Rotation Effect
Create rotation animation effects.

-
Creating a Zoom Effect +
Creating a Zoom Effect
Create zoom animation effects.
-
Creating a 3D Rotation Effect +
Creating a 3D Rotation Effect
Create 3D rotation effects.
-
Creating Drop and Bounce Effects +
Creating Drop and Bounce Effects
Create drop and bounce effects.

-
-
-
Show All
-
Hide All
-
-
+
Setting Up the Application
-
-
-
-
Setting Up the Application
-Hide -
-

In this part of the tutorial, we create a simple application that manipulates and animates an Evas object. We use a "Basic UI Application" as the basis for the application.
-
First, we set up the widgets we are going to use in the application:
+
First, we set up the UI components we are going to use in the application:

typedef struct appdata { @@ -93,7 +86,7 @@ } appdata_s;
-
We then create the actual widgets in the create_base_gui() function, starting with the main window and application title:
+
We then create the actual UI components in the create_base_gui() function, starting with the main window and application title:

// Main window ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE); @@ -115,7 +108,7 @@ elm_win_resize_object_add(ad->win, ad->label); evas_object_show(ad->label);
-
Next, we create the animation target, which is an Evas object of type Elm_Image. We store the image, which is used in the source code, in the res/images folder of the application. On the contrary, we store the image, which is used in the edc file, in the edje/images folder.
+
Next, we create the animation target, which is an Evas object of type Elm_Image. The image that is used in the source code is stored in the res/images folder of the application. The image that is used in the EDC file is stored in the edje/images folder.

// Animation target // Setting the image path @@ -127,11 +120,11 @@ ad->target = elm_image_add(ad->win); if (!elm_image_file_set(ad->target, buf, NULL))    printf("error: could not load image \"%s\"\n", buf); evas_object_size_hint_weight_set(ad->target, EVAS_HINT_FILL, EVAS_HINT_FILL); -//Moving the image +// Moving the image evas_object_move(ad->target, 130, 100); -//Resizing the image +// Resizing the image evas_object_resize(ad->target, 200, 100); -//Showing the image +// Showing the image evas_object_show(ad->target);
@@ -163,14 +156,9 @@ evas_object_move(ad->target, 130, 100); evas_object_resize(ad->target, 200, 100); //Showing the image -
-
-
-
-
Creating a Rotation Effect
-Hide -
-
+ +
Creating a Rotation Effect
+
After the animation target is created, we can create the first button and the associated rotation animation:

// Button 1 @@ -259,14 +247,9 @@ evas_object_map_enable_set(obj, EINA_TRUE);
// Free used memory evas_map_free(m);
-
-
-
-
-
Creating a Zoom Effect
-Hide -
-
+ +
Creating a Zoom Effect
+
The next animation is a zoom, for which we also use an Evas Map.

First, we create the button in the create_base_gui() function:
@@ -314,7 +297,7 @@ _do_zoom(void *data, double pos)
The evas_map_util_zoom() function takes the following arguments:
-
+

The map to change

The horizontal zoom factor

The vertical zoom factor
@@ -325,14 +308,9 @@ _do_zoom(void *data, double pos)
Here, we use a horizontal and vertical zoom factor of 2, and the X and Y coordinates of the target as the horizontal and vertical center coordinates.

The _do_zoom() callback function is called at several points along the animation timeline, which is why we multiply the horizontal and vertical zoom factor values by the timeline position. Each call will zoom more than the previous one, thereby creating the animation effect.
-
-
-
-
-
Creating a 3D Rotation Effect
-Hide -
-
+ +
Creating a 3D Rotation Effect
+
The last animation is a 3D rotation. For this one, we are going to rotate the Evas object on all three axes (X, Y, Z).

First, we create the button and its callback function:
@@ -378,7 +356,7 @@ _do_3d(void *data, double pos)
The evas_map_util_3d_rotate() function takes the following arguments:
-
+

The map to change

The angle (0-360Â°) to rotate around the X axis

The angle (0-360Â°) to rotate around the Y axis
@@ -391,14 +369,9 @@ _do_3d(void *data, double pos)
Here, we rotate 360 degrees around each axis. The horizontal (X) rotation center is the X position of the target plus its width divided by 2. The vertical (Y) rotation center is the Y position of the target plus 60. The Z rotation center is 0.

As with the rotation and zoom animations, we multiply the angles by the timeline position to gently rotate the target on each call to the _do_3d() callback function along the timeline.
-
-
-
-
-
Creating Drop and Bounce Effects
-Hide -
-
+ +
Creating Drop and Bounce Effects
+
To finish, we add drop and bounce effects to our buttons at application start. To do this, we create one timeline per button after creating the buttons in the create_base_gui() function:

ecore_animator_timeline_add(2, _do_drop, ad->bt1); @@ -425,7 +398,7 @@ _do_drop(void *data, double pos)
To get the bounce effect, we use the ecore_animator_pos_map() function, which maps an input position from 0.0 to 1.0 along the timeline to a position on a different curve. The curve can be of different types, such as LINEAR, SINUSOIDAL, and BOUNCE. This function takes the following arguments:
-
+

The input position to map

The mapping to use (LINEAR, SINUSOIDAL, and so on)

v1, which is the first parameter used by the mapping
@@ -438,11 +411,6 @@ _do_drop(void *data, double pos)

This frame is used in the move function to create the animation. The value increases on each _do_drop() call along the timeline, which produces a nice drop of the buttons from their initial position to 600 pixels on the vertical axis.
-
-
-
-
-
diff --git a/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm index d6003b6..257097b 100644 --- a/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/edje_effects_tutorial_n.htm @@ -16,60 +16,53 @@ -
+

-
+

Content

-
Animating on Application Start-up +
Animating on Application Start-up
-
Animating Object on Click +
Animating Object on Click

Related Info

Edje Animation Guide
-
Edje Animation API
+
Edje API for Mobile Native
+
Elementary API for Mobile Native
+
Evas API for Mobile Native
+
Edje API for Wearable Native
+
Elementary API for Wearable Native
+
Evas API for Wearable Native

Edje Animation: Using the Edje Library to Create Animations
-
+
One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how Elm_Transit can create pre-defined animations, but you can also use the Edje library to create your own animations.

Warm-up
-
Become familiar with the Edje Animation API basics by learning about:
+
Become familiar with the Edje, Elementary, and Evas API basics by learning about:

-
Animating on Application Start-up +
Animating on Application Start-up
Run an animation on application start-up.
-
Animating Object on Click +
Animating Object on Click
Animate an object when clicking.

-
-
-
Show All
-
Hide All
-
-
+
Animating on Application Start-up
-
-
-
-
Animating on Application Start-up
-Hide -
-

The goal of this tutorial is to create an animation target and buttons to start animations, all this in an EDC (Edje Data Collection) file.

First create an application using Basic EDC UI Application. This model provides a simple application just like the one used in the previous chapter, but with one more element: an .edc file.

Animations can be run at application startup. By default the Basic EDC UI Application model produces an empty window with a title. In this example a Tizen logo is added to the window and the behavior of the window title is changed.
-
The images used by the Edje file are stored in the edje/images directory of the application. Copy the Tizen logo available in shared/res/<yourapplicationname>.png into the Edje images directory edje/images. Add then the image to the Edje images collection.
+
The images used by the Edje file are stored in the edje/images directory of the application. Copy the Tizen logo available in shared/res/<yourapplicationname>.png into the Edje image directory edje/images. Then add the image to the Edje images collection.

images {    image: "edceffects.png" COMP; @@ -103,7 +96,7 @@ part    } }
The logo part has the IMAGE type. The default state contains in the first description of the part sets:
-
+

the maximum and minimum size using the min and max statements

the image to use in this part

the default position.
@@ -177,14 +170,9 @@ program }
This program goes from the default state to the bigger state in five seconds with a LINEAR effect, automatically running on the application startup.
-
-
-
-
-
Animating Object on Click
-Hide -
-
+ +
Animating Object on Click
+
All the previous animations are automatic and do not have any relation with the user's actions. Next animate a part by clicking on another one. Make the title restore its default aspect when clicking on the small logo.

The parts and the states are already defined. The animation goes back to the default state, there is no need to add any parts or states: only add a program which makes the transition when clicking on logo part.

// Make the title go back to normal @@ -201,8 +189,8 @@ program
When clicking any mouse button on the small logo, the title goes back to its original state.

Rotating Parts

Next add two more buttons to the application and create programs to animate a target.
-
It is possible to create a button with Edje from scratch, but to save time, the SWALLOW part is used in this example to store Elementary widgets.
-
First create the SWALLOW parts, and then the Elementary widgets in the .c file.
+
It is possible to create a button with Edje from scratch, but to save time, the SWALLOW part is used in this example to store Elementary UI components.
+
First create the SWALLOW parts, and then the Elementary UI components in the .c file.

// Container for the rotate button part { @@ -231,7 +219,7 @@ part    } }
This second SWALLOW part is very similar to the first one. It is placed relatively to btn/rotate, in order to remain next to it.
-
Next create the actual widgets. This is done in the .c file and is very similar to what is done for the buttons in the first chapter.
+
Next create the actual UI components. This is done in the .c file and is very similar to what is done for the buttons in the first chapter.

This code is added to the create_base_ui function.

// Creation button in the app window ad->button = elm_button_add(ad->win); @@ -247,7 +235,7 @@ elm_object_text_set(ad->btn_up, "Grow"); elm_object_part_content_set(ad->layout, "btn/grow", ad->btn_up); evas_object_show(ad->btn_up);
In the default Basic EDC UI Application, the Edje layout is loaded by default. Create two Elementary buttons and add them to the SWALLOW containers, without having to setup sizes or positions as this is done in the SWALLOW container.
-
Note that the part name is very important because it is used to be merged the Elementary widget and the SWALLOW part.
+
Note that the part name is very important because it is used to be merged the Elementary UI component and the SWALLOW part.

When the buttons placed and set, create the animation target. it is done in the EDC file.

Add the animation target part.

The part initialization and the default state:
@@ -262,7 +250,7 @@ part    {       state: "default" 0.0;       image { normal: "tizen-logo.png"; } -      color: 255 0 0 255; /* red */ +      color: 255 0 0 255; // red       rel1 { relative: 0.3 0.3; }       rel2 { relative: 0.7 0.4; }    } @@ -278,19 +266,19 @@ description    map    { -      //Enable Map on the part +      // Enable Map on the part       on: 1; -      //Enable smooth rendering +      // Enable smooth rendering       smooth: 1; -      //Enable perspective +      // Enable perspective       perspective_on: 1; -      //Apply rotations on the part +      // Apply rotations on the part       rotation.x: 0;       rotation.y: 0;       rotation.z: 0;    } -   color: 0 255 0 255; /* green */ +   color: 0 255 0 255; // green }
This part changes the color to green and defines the map. This statement makes rotations possible on an Edje part. Rotations are done around the x, y or z axes. In this example, the map is enabled and a 0° rotation is applied around each axis.

Add a state with a rotation around the z axis of 360°.
@@ -305,7 +293,7 @@ description
// The grow state description {    state: "grow" 0.0; -   color: 0 0 255 255; /* blue */ +   color: 0 0 255 255; //blue    rel1    {       relative: 0.2 0.2; @@ -343,7 +331,7 @@ program    after: "rotate,end"; }
This program sets the part state to rotate 1.0 in 0.7 seconds, and when done calls the next one rotate,end.
-
// Go back to the normal. +
// Go back to the normal program {    name: "rotate,end"; @@ -376,12 +364,6 @@ program }
-
-
-
-
-
- diff --git a/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm index 1feadf8..806cdd7 100644 --- a/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm @@ -16,20 +16,29 @@ -
+

-
+

Content

-
Creating Objects +
Initializing the EFL Extension +
+
Managing Hardware Key Events +
+
Managing Rotary Events

Related Info

Efl Extension Guide
-
Efl Extension API
+
Efl Extension API for Mobile Native
+
Elementary API for Mobile Native
+
Evas API for Mobile Native
+
Efl Extension API for Wearable Native
+
Elementary API for Wearable Native
+
Evas API for Wearable Native

@@ -37,41 +46,46 @@

Efl Extension: Creating a Naviframe Window
-
-
This tutorial demonstrates how you can use the Efl Extension API to create an application with a window. The window contains a naviframe and registers the EFL Extension Menu and Back key events for the naviframe.
- -
When the Menu key is pressed, a popup is created and an EFL Extension Back key event for this popup is registered. If the popup is shown and the Back key is pressed, the popup is removed. Otherwise, if the Back key is pressed and there is no popup, the application is hidden.
- + +
This tutorial demonstrates how you can handle hardware key and rotary events.

Warm-up
-
Become familiar with the Efl Extension API basics by learning about:
+
Become familiar with the Efl Extension, Elementary, and Evas API basics by learning about:

-
Creating Objects -
Create objects using the naviframe and window.
+
Initializing the EFL Extension +
Initialize the EFL Extension for use.
+
Managing Hardware Key Events +
Use the Menu and Back keys in your application.
+
Managing Rotary Events +
Manage rotary events on a circular device.

-
-
-
Show All
-
Hide All
-
-
- -
-
-
-
Creating Objects
-Hide -
-
-
To create objects:
+
Initializing the EFL Extension
-
-
To use the functions and data types of the Efl Extension API, include the <efl_extension.h> header file in your application:
+
To use the functions and data types of the Efl Extension API (in mobile and wearable applications), include the <efl_extension.h> header file in your application:

#include <efl_extension.h> -
+ + +
Managing Hardware Key Events
+ + + + + + + + + + +
Note
Hardware key events are only supported in mobile devices.
+ +
The application has a window that contains a naviframe and registers the EFL Extension Menu and Back key events for the naviframe.
+
When the Menu key is pressed, a popup is created and an EFL Extension Back key event for this popup is registered. If the popup is shown and the Back key is pressed, the popup is removed. Otherwise, if the Back key is pressed and there is no popup, the application is hidden.
+ +
To manage hardware key events:
+

Create objects using the window and naviframe:
static void @@ -79,11 +93,11 @@ create_base_gui(appdata_s *ad) {    Evas_Object *win = NULL; -   // Create window +   // Create the window    win = elm_win_util_standard_add(NULL, "extension sample");    evas_object_smart_callback_add(win, "delete,request", _win_del, NULL); -   // Create naviframe +   // Create the naviframe    Evas_Object *nf = NULL;    nf = elm_naviframe_add(win);    evas_object_size_hint_weight_set(win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); @@ -96,7 +110,7 @@ create_base_gui(appdata_s *ad)    elm_object_text_set(label, "Press menu key to show popup,<br/>back key to exit.");    elm_naviframe_item_push(nf, "Efl Extension usage", NULL, NULL, label, NULL); -   // Show window +   // Show the window    evas_object_show(win); }
@@ -107,7 +121,7 @@ create_base_gui(appdata_s *ad) static void create_base_gui(appdata_s *ad) { -   // Register EFL extension callbacks for Menu and Back key events +   // Register the EFL extension callbacks for Menu and Back key events    eext_object_event_callback_add(nf, EEXT_CALLBACK_MORE, _create_popup, NULL);    eext_object_event_callback_add(nf, EEXT_CALLBACK_BACK, _nf_back_cb, win); } @@ -131,7 +145,7 @@ _create_popup(void *data, Evas_Object *obj, void *event_info)    elm_object_text_set(content, "Press back key to remove popup.");    elm_object_content_set(popup, content); -   // Register extension callback for the Back key event +   // Register the EFL extension callback for the Back key event    eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);    evas_object_show(popup); } @@ -146,19 +160,204 @@ _nf_back_cb(void *data, Evas_Object *obj, void *event_info) {    Evas_Object *win = data; -   // Hide window +   // Hide the window    elm_win_lower(win); }

-
-
- -
-
-
+
Managing Rotary Events
+ + + + + + + + + + +
Note
Rotary events are only supported in devices with a circular screen.
+ +
To manage rotary events:
+
+
Create the rotary event handler: +
+
Create the window: +
+static void +create_base_gui(appdata_s *ad) +{ +Evas_Object *win = NULL; + +   // Window +   win = elm_win_util_standard_add(NULL, "extension circle sample"); +   elm_win_autodel_set(win, EINA_TRUE); +   evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL); + +   // Show the window after base gui is set up +   evas_object_show(win); +} +
+
+ +
Register the rotary event handler: +
+static void +create_base_gui(appdata_s *ad) +{ +   // Register the rotary event handler +   eext_rotary_event_handler_add(_rotary_handler_cb, NULL); +} +
+
Define the callback function: +
+Eina_Bool _rotary_handler_cb(void *data, Eext_Rotary_Event_Info *ev) +{ +   if (ev->direction == EEXT_ROTARY_DIRECTION_CLOCKWISE) +   { +      LOGD("Rotary device rotated in clockwise direction"); +   } +   else +   { +      LOGD("Rotary device rotated in counter clockwise direction"); +   } + +   return EINA_FALSE; +} +
+
+ +
Remove the rotary event handler and release all resources when you do not need it anymore. +
+static void +app_terminate(void *data) +{ +   // Release all resources +   eext_rotary_event_handler_del(_rotary_handler_cb); +} +
+
+
+
+
Create a rotary event callback for a normal Evas object. +
When a rotary event occurs, the slider value is adjusted accordingly.
+
+
Create the objects. +
The window and the slider are created using the Elementary APIs.
+
+static void +create_base_gui(appdata_s *ad) +{ +   Evas_Object *win = NULL, *slider = NULL; + +   // Window +   win = elm_win_util_standard_add(NULL, "extension sample"); +   elm_win_autodel_set(win, EINA_TRUE); +   evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL); + +   // Slider +   slider = elm_slider_add(win); +   evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); +   elm_slider_min_max_set(slider, 0, 50); +   elm_slider_step_set(slider, 1.0); +   evas_object_show(slider); +   elm_win_resize_object_add(win, slider); + +   // Show the window after the base GUI is set up +   evas_object_show(win); +} +
+
+
Register the rotary event callback. +
To receive the rotary event, register the rotary event callback and set the activated object as the slider object.
+
+static void +create_base_gui(appdata_s *ad) +{ +   // Register rotary event callback +   ext_rotary_object_event_callback_add(slider, _rotary_event_cb, NULL); +   eext_rotary_object_event_activated_set(slider, EINA_TRUE); +} +
+
Define the rotary callback function:
+
+Eina_Bool _rotary_event_cb(void *data, Evas_Object *obj, Eext_Rotary_Event_Info *ev) +{ +   Evas_Object *slider = obj; +   int val = elm_slider_value_get(slider); +   if (ev->direction == EEXT_ROTARY_DIRECTION_CLOCKWISE) +   { +      elm_slider_value_set(slider, val + 1); +   } +   else +   { +      elm_slider_value_set(slider, val - 1); +   } + +   return EINA_FALSE; +} +
+
+
+
+
Create a rotary event callback for an EFL Extension object. +
When a rotary event occurs, the slider value is adjusted accordingly.
+
+
Create the objects: +
+static void +create_base_gui(appdata_s *ad) +{ +   Evas_Object *win = NULL, *conform = NULL; +   Eext_Circle_Surface *sur = NULL; + +   // Window +   win = elm_win_util_standard_add(NULL, "extension circle sample"); +   elm_win_autodel_set(win, EINA_TRUE); +   evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL); + +   // Conformant +   conform = elm_conformant_add(win); +   elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_SHOW); +   elm_win_indicator_opacity_set(win, ELM_WIN_INDICATOR_OPAQUE); +   evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); +   elm_win_resize_object_add(win, conform); +   evas_object_show(conform); + +   // Surface +   sur = eext_circle_surface_conformant_add(conform); + +   // Slider +   slider = eext_circle_object_slider_add(conform, sur); +   eext_circle_object_value_min_max_set(slider, 0.0, 30.0); +   eext_circle_object_value_set(slider, 0.0); + +   // Show the window after the base GUI is set up +   evas_object_show(win); +} +
+
+
Set the activated object. +
Since the EFL Extension API is used to create the slider object, the created slider object already registers the rotary event callbacks internally. To receive a rotary event, you only need to set the activated object as the desired object (slider).
+
+static void +create_base_gui(appdata_s *ad) +{ +   // Activate circle slider's rotary object event +   // Its value increases/decreases its value by 1.0 to clockwise or +   // counter-clockwise rotary event +   eext_rotary_object_event_activated_set(slider, EINA_TRUE); +   eext_circle_object_slider_step_set(slider, 1.0); +} +
+
+
+
+
+ + diff --git a/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm index e650d0f..396bfb3 100644 --- a/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/efl_optimization_tutorial_n.htm @@ -16,32 +16,37 @@ -
+

-
+

Content

-
Optimizing EDC
-
Optimizing Evas
+
Optimizing EDC
+
Optimizing Evas

Related Info

-
Optimizing Application Performance
-
EFL API
-
+
Optimizing Application Performance
+
Edje API for Mobile Native
+
Elementary API for Mobile Native
+
Evas API for Mobile Native
+
Edje API for Wearable Native
+
Elementary API for Wearable Native
+
Evas API for Wearable Native
+
EFL Optimization: Optimizing Tizen Native Applications
-
+
This tutorial demonstrates how you can optimize your Tizen native application.

Warm-up
-
Become familiar with the EFL API basics by learning about:
+
Become familiar with the Edje, Elementary, and Evas API basics by learning about:

Optimizing EDC
Optimize the EDC code.
@@ -49,21 +54,9 @@
Optimize the Evas code.

-
-
-
Show All
-
Hide All
-
-
- -
-
-
-
Optimizing EDC
- hide -
-
-
To optimize EDC:
+
Optimizing EDC
+ +
To optimize EDC:

Remove unnecessary parts.
When you create EDC, there can be obsolete and unnecessary parts. Since they have an effect on performance, remove them.
@@ -542,22 +535,17 @@ collections
-
-
+
+

-
-
-
-
-
Optimizing Evas
- hide -
-
+ +
Optimizing Evas
+
To optimize Evas:

Use a rectangle object instead of using a solid color image. @@ -712,12 +700,6 @@ button = elm_button_add(box);

-
-
- -
-
-
diff --git a/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm index b076193..818cb73 100644 --- a/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm @@ -16,9 +16,9 @@ -
+

-
+

@@ -33,7 +33,12 @@
Related Info

EFL Guide
-
EFL API
+
EFL API for Mobile Native
+
Efl Extension API for Mobile Native
+
Elementary API for Mobile Native
+
EFL API for Wearable Native
+
Efl Extension API for Wearable Native
+
Elementary API for Wearable Native

@@ -41,14 +46,14 @@

EFL: Using EFL Features for Designing the UI
-
-
This tutorial demonstrates how you can use EFL to create your application UI. EFL is an open-source toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from data structures to widget sets. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.
+ +
This tutorial demonstrates how you can use EFL to create your application UI. EFL is an open-source toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from data structures to UI component sets. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.

Warm-up
-
Become familiar with the EFL API basics by learning about:
+
Become familiar with the Efl Extension and Elementary API basics by learning about:

Learning EFL Basics @@ -58,38 +63,26 @@
Using the Base Application Layout
Use the base layout with EFL for your application.

Creating a Simple Clock View -
Create a simple clock view using a box, container widget, and label to create a basic layout.

+
Create a simple clock view using a box, container UI component, and label to create a basic layout.

Creating a Complex Clock View
Create a complex clock view by organizing a basic layout using boxes.

-
-
-
Show All
-
Hide All
-
-
+
Learning EFL Basics
-
-
-
-
Learning EFL Basics
-Hide -
-

EFL stands for Enlightenment Foundation Libraries. Enlightenment is a project consisting of the Enlightenment window manager, EFL libraries, and various utilities and applications. The Enlightenment team needed powerful libraries to handle, among others, rendering, main loops, and events, so EFL was introduced during the development of the Enlightenment window manager to fill these gaps. EFL is now widely used outside of the Enlightenment window manager.

Currently, five EFL libraries are publicly available to Tizen native applications. These libraries provide the following features, among others:
-
+

Data structures

Optimized rendering

Thread pool

Events and callbacks

Fd handlers

Timers and animators
-
Widgets
+
UI components

Layout scripts

@@ -99,7 +92,7 @@
The key characteristics of EFL include:
-
+

Performance
The main reason Tizen adopted EFL as its native toolkit is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering. EFL is fast even in software rendering.

Small memory footprint @@ -109,7 +102,7 @@
GUI and logic separation
EFL supports GUI layout and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.

Themeable -
An EFL theme can be changed at runtime without restarting the application. Widgets are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of widgets to achieve a specific look and feel.
+
An EFL theme can be changed at runtime without restarting the application. UI components are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of UI components to achieve a specific look and feel.

Scalable
EFL supports a scale factor that affects the size of objects in the application at runtime. By configuring the scale factor, applications can scale up and down as needed. The scale factor also supports a default setting that allows applications to scale nicely out-of-the-box.

Animations @@ -122,11 +115,11 @@
EFL Libraries

Figure: EFL libraries
-
+

Tizen supports the following EFL libraries:
-
+

Ecore
A clean and tiny event loop library with many convenience modules supporting operating system abstraction and integration. Ecore runs a main loop that is a key feature for event-driven applications and the rest of EFL. The Ecore main loop runs infinitely (or until requested to quit) and handles all registered events, such as touch, mouse, key, timers, animators, idlers, and fd handlers. Ecore also provides modules for handling network connections, files, input methods, and so on. EFL assumes that you run an Ecore main loop at all times (except at application startup and shutdown) and use the main loop to handle all callbacks (unless otherwise documented). ELF also assumes that threads use the Ecore infrastructure to return the results of their work back to the main loop for implementation.

Edje @@ -134,19 +127,12 @@
Eina
A library for data types and other useful tools. Eina provides data types such as lists, in-line lists, arrays, in-line arrays, hash tables, compact lists, iterator functions, sparse matrices, red-black trees, string buffers, shared string tokens, rectangle regions, generic value storage, and data models. Eina also supports tools such as benchmarking infrastructure, converters, counters, error handlers, basic file handlers, lazy allocators, loggers, magic number handlers, memory pools, modules, rectangles, safety checks, and string handlers.

Elementary -
A widget set library. Elementary is composed of several common UI widgets, such as buttons, check boxes, entries, lists, pop-ups, and windows. Some infrastructure is shipped with Elementary, such as scale configuration handling, finger-size configuration for touch UIs, theme handling, focus handling, accessibility, UI mirroring, and profile handling.
+
A UI component set library. Elementary is composed of several common UI components, such as buttons, check boxes, entries, lists, pop-ups, and windows. Some infrastructure is shipped with Elementary, such as scale configuration handling, finger-size configuration for touch UIs, theme handling, focus handling, accessibility, UI mirroring, and profile handling.

Evas
A highly optimized scene graph and rendering library. Evas is a stateful canvas scene graph in which you can place objects such as rectangles, lines, polygons, text, text blocks, images, and smart objects. Evas uses a scene graph to keep track of the state of all objects. You do not need to worry about objects repainting or keeping their states. You only need to modify them for the new state and let Evas take care of the rest. Evas supports anti-aliased text, smooth super and sub-sampled scaled images, alpha-blended objects, and more.

-
-
-
-
-
Using EFL in Tizen Native Applications
-Hide -
-
+
Using EFL in Tizen Native Applications

To start the Ecore main loop and move your application into the running state, call the ui_app_main() function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.
@@ -163,31 +149,25 @@ main(int argc, char *argv[]) After your application is running:
-
Create a window, and organize your widgets inside the window.
+
Create a window, and organize your UI components inside the window.

Create the application logic code to be called when callbacks or timed events occurs (for example, animators for animations, timers for timeouts).

-
-
-
-
-
Using the Base Application Layout
-Hide -
-
+ +
Using the Base Application Layout

This section provides how to use base layout with EFL for your application. Also, you can get some idea of sample layouts for applications.

Using the Base Layout
-
When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and widget hierarchy of the base layout:
+
When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and UI component hierarchy of the base layout:
-
Figure: Base layout wireframe and widget hierarchy
-
+
Figure: Base layout wireframe and UI component hierarchy
+
-
The widgets have the following roles:
+
The UI components have the following roles:
-
-
Window (Elm_win): Every UI widget from Elementary is rendered in a Window.
+
+
Window (Elm_win): Every UI component from Elementary is rendered in a Window.

Conformant (Elm_Conformant): The Conformant supports the indicator area and resizing the application due to rotation or the ISF (keypad).

Naviframe (Elm_Naviframe): The Naviframe acts as a view manager and optionally provides the application title. The main layout of the application is added to the Naviframe's view area.

@@ -200,7 +180,7 @@ After your application is running:
The Setting application consists of a list to show as a menu. For organizing the application, create the application layout with a screen-size-list and place the layout into the Naviframe's view area.

Figure: Setting UI and layout
-
+

For more information, see the Setting sample application.
@@ -211,7 +191,7 @@ After your application is running:
You can use a list or grid if the same objects are shown repeatedly. In this sample application, however, the various items are shown in a layout.

Figure: Application Store UI and layout
-
+

For more information, see the Application Store sample application.
@@ -221,10 +201,10 @@ After your application is running:
The Calculator is a good example of an exception to the base layout. The application has no view changes and no application title. As these are the two reasons why you should use a Naviframe, you do not need to add a Naviframe to the Calculator.
-
You can organize the application layout with container widgets. Container widgets are used for arranging widgets, both basic widgets and other container widgets.
+
You can organize the application layout with container components. Container components are used for arranging UI components, both basic UI components and other container components.

Figure: Calculator UI and layout
-
+

For more information, see the Calculator sample application.
@@ -242,31 +222,26 @@ elm_layout_theme_set(layout, "layout", "drawer", "panel
The style includes parts for locating the Drawer and the main view. In the Drawer area, you can add a list to indicate the menu. In the main view, you can add a Naviframe to organize the view of the layout.

Figure: Email UI and layout
-
+

For more information, see the Email sample application.
-
-
-
-
-
Creating a Simple Clock View
-Hide -
-
-
This sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box, container widget, and label to create a basic layout. The application includes the following widgets:
- -
+ +
Creating a Simple Clock View
+ +
This sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box, container component, and label to create a basic layout. The application includes the following UI components:
+ +

Elm_window: Basic canvas for rendering the screen

Elm_conformant: Support indicator area
-
Elm_naviframe: View manager widget
-
Elm_box: Container widget for layouting other widgets
-
Elm_label: Basic widget for showing text with a tag
+
Elm_naviframe: View manager component
+
Elm_box: Container component for layouting other UI components
+
Elm_label: Basic UI component for showing text with a tag

The following figure illustrates the main view of the simple clock sample application and its wireframe structure.
-
Figure: Simple clock screen
-
+
Figure: Simple clock screen
+

The basic clock is implemented in the world_clock.c file. In this application, the data structure for application is following:
@@ -326,14 +301,14 @@ app_create(void *data)
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE); elm_win_autodel_set(ad->win, EINA_TRUE); -/* Conformant */ +// Conformant conform = elm_conformant_add(ad->win); elm_win_conformant_set(ad->win, EINA_TRUE); evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); elm_win_resize_object_add(ad->win, conform); evas_object_show(conform); -/* Naviframe */ +// Naviframe nf = elm_naviframe_add(conform); elm_object_content_set(conform, nf); evas_object_show(nf); @@ -364,12 +339,12 @@ evas_object_show(box);
elm_naviframe_item_push(nf, _("World Clock"), NULL, NULL, box, "basic");
-
The parameters include the title, the name of the widget added as a new view, and the naviframe style. The basic style is used for a simple view with normal title.
+
The parameters include the title, the name of the UI component added as a new view, and the naviframe style. The basic style is used for a simple view with normal title.
-
The following figure illustrates the widget hierarchy of the application.
+
The following figure illustrates the UI component hierarchy of the application.
-
Figure: Simple clock widgets
-
+
Figure: Simple clock components
+

Set the HW key handler. The Tizen mobile environment supports the More and back keys, but only the back key is handled in this sample.

eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad); @@ -383,32 +358,26 @@ win_back_cb(void *data , int type , void *event)    elm_win_lower(ad->win); }
-
-
-
-
-
Creating a Complex Clock View
-Hide -
-
+ +
Creating a Complex Clock View
-
This sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following widgets:
+
This sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following UI components:
-
+

Elm_window: Basic canvas for rendering the screen

Elm_conformant: Support indicator area
-
Elm_naviframe: View manager widget
-
Elm_box: Container widget for layouting other widgets
-
Elm_label: Basic widget for showing text with a tag
-
Elm_genlist: List widget
+
Elm_naviframe: View manager component
+
Elm_box: Container component for layouting other UI components
+
Elm_label: Basic UI component for showing text with a tag
+
Elm_genlist: List component

Elm_button: Simple push button

The following figure illustrates the main view of the complex clock sample application and its wireframe structure.
-
Figure: Complex clock screen
-
+
Figure: Complex clock screen
+

Basic GUI
@@ -467,7 +436,7 @@ app_create(void *data)
The base GUI of the application contains the following elements:
-
+

Clock

List

Main layout with buttons
@@ -475,7 +444,7 @@ app_create(void *data)
Clock
-
The clock element contains 3 labels. The labels are packed as a single box widget, which is part of the main layout.
+
The clock element contains 3 labels. The labels are packed as a single box component, which is part of the main layout.

static Evas_Object * create_clock(Evas_Object *nf) { @@ -497,7 +466,7 @@ create_clock(Evas_Object *nf)
List
-
This element contains a list of cities. The widget used is genlist, which is a complex list able to show information with various styles.
+
This element contains a list of cities. The UI component used is genlist, which is a complex list able to show information with various styles.

static Evas_Object * create_list(Evas_Object *nf) { @@ -600,7 +569,7 @@ create_base_gui(appdata_s *ad) }
-
The box widget is used to organize the main layout. The box is expanded as much as possible to fill the entire view.
+
The box component is used to organize the main layout. The box is expanded as much as possible to fill the entire view.

   // Box    box = elm_box_add(nf);    evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); @@ -609,7 +578,7 @@ create_base_gui(appdata_s *ad)
The box contains the following elements:
-
+

The clock element contains 3 labels. The parameter for the evas_object_size_hint_weight_set() function is 0.1 meaning that the height of the clock box occupies 30% of the available area.

   clock = create_clock(nf); @@ -645,10 +614,10 @@ create_base_gui(appdata_s *ad)

-
The following figure illustrates the widget hierarchy of the application.
+
The following figure illustrates the UI component hierarchy of the application.
-
Figure: Complex clock widgets
-
+
Figure: Complex clock components
+

Add the main layout to the naviframe, and set the HW key handler:

eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad); @@ -662,11 +631,6 @@ win_back_cb(void *data , int type , void *event)    elm_win_lower(ad->win); }
-
-
-
-
-
diff --git a/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm index 9d79b3b..0de5e1c 100755 --- a/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/efl_util_tutorial_n.htm @@ -136,7 +136,7 @@ void create_win()
To get a screenshot:
-
Initialize with the efl_util_screenshot_initialize() function:
+
Initialize with the efl_util_screenshot_initialize() function:
#include <tbm_surface.h> #include <X11/Xlib.h> @@ -161,7 +161,7 @@ void capture()       }
-
Free resources with the efl_util_screenshot_deinitialize() function:
+
Free the resources with the efl_util_screenshot_deinitialize() function:
      efl_util_screenshot_deinitialize(screenshot);    } @@ -204,7 +204,7 @@ void key_event_generator()       return;    }
-
Free resources with the efl_util_input_deinitialize_generator() function: +
Free the resources with the efl_util_input_deinitialize_generator() function:
   efl_util_input_deinitialize_generator(); }
@@ -255,7 +255,7 @@ void touch_event_generator()       return;    }
-
Free resources with the efl_util_input_deinitialize_generator() function: +
Free the resources with the efl_util_input_deinitialize_generator() function:
   efl_util_input_deinitialize_generator(); }
diff --git a/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm index ee3f0ba..cb6c619 100644 --- a/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/elm_transit_tutorial_n.htm @@ -16,81 +16,66 @@ -
+

-
+

Content

-
Setting Up the Application -
-
Creating a Rotation Effect -
-
Creating a Zoom Effect -
-
Creating a Flip Effect -
-
Creating a Blend Transition -
-
Creating a Fade Effect -
-
Creating a Flip on y Axis -
-
Creating a Wipe Effect -
+
Setting Up the Application
+
Creating a Rotation Effect
+
Creating a Zoom Effect
+
Creating a Flip Effect
+
Creating a Blend Transition
+
Creating a Fade Effect
+
Creating a Flip on y Axis
+
Creating a Wipe Effect

Related Info

Elementary Animations Guide
-
Transit API
+
Ecore API for Mobile Native
+
Elementary API for Mobile Native
+
Evas API for Mobile Native
+
Ecore API for Wearable Native
+
Elementary API for Wearable Native
+
Evas API for Wearable Native

Elementary Animations: Applying Transition Effects to an Evas Object
-
+
This tutorial demonstrates how you can use Elm Transit to create animated transitions effects, such as rotation, wiping, zooming, resizing, and fading, to an Evas_Object.

Warm-up
-
Become familiar with the Transit API basics by learning about:
+
Become familiar with the Ecore, Elementary, and Evas API basics by learning about:

-
Setting Up the Application +
Setting Up the Application
Prepare the application for use.
-
Creating a Rotation Effect +
Creating a Rotation Effect
Create a rotation effect in your application.
-
Creating a Zoom Effect +
Creating a Zoom Effect
Create a zoom effect in your application.
-
Creating a Flip Effect +
Creating a Flip Effect
Create a flip effect in your application.
-
Creating a Blend Transition +
Creating a Blend Transition
Create a blend transition in your application.
-
Creating a Fade Effect +
Creating a Fade Effect
Create a fade effect in your application.
-
Creating a Flip on y Axis +
Creating a Flip on y Axis
Create a flip on y axis in your application.
-
Creating a Wipe Effect +
Creating a Wipe Effect
Create a wipe effect in your application.

Implementing Elementary Transit Effects
Demonstrates how you can implement a variety of EFL animation effects.

-
-
-
Show All
-
Hide All
-
-
+
Setting Up the Application
-
-
-
-
Setting Up the Application
-Hide -
-
-
First create a basic application like explained in the Basic Tutorial.
+
First create a basic application like explained in the Basic Tutorial.

When the application is ready, create Evas objects and animate them. In this example, one single object is animated with different type of animations.
@@ -110,9 +95,9 @@ } appdata_s; -
This structure holds the main widgets of the application:
+
This structure holds the main UI components of the application:
-
+

win: the main window

label: the title label

button: a button object, the target of the animations
@@ -124,9 +109,9 @@
rt_angle, zto, zfrom: these variables are used to store values for animations

-
Place the widgets on the application's canvas. To make things easier, the widget creation is split into two functions.
+
Place the UI components on the application's canvas. To make things easier, the UI component creation is split into two functions.
-
The first function creates widgets on the main window, and the second in the boxes.
+
The first function creates UI components on the main window, and the second in the boxes.

create_base_gui(appdata_s *ad) { @@ -134,7 +119,7 @@    ad->zfrom = 1.0;    ad->zto = 2.0; -   /* Window */ +   // Window    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);    elm_win_autodel_set(ad->win, EINA_TRUE); @@ -146,14 +131,14 @@    evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL); -   /* Label*/ +   // Label    ad->label = elm_label_add(ad->win);    elm_object_text_set(ad->label, "Effects Tutorial");    evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);    elm_win_resize_object_add(ad->win, ad->label);    evas_object_show(ad->label); -   /* Show window after base gui is set up */ +   // Show the window after the base GUI is set up    evas_object_show(ad->win);    ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad); @@ -178,7 +163,7 @@    _create_btn_box(ad); -} //End of create_base_gui +} // End of create_base_gui

This function takes appdata_s *ad as its only parameter. This function is called by the creation callback app_create of the Tizen application (event_callback.create = app_create;) in the main function of the application.
@@ -192,7 +177,7 @@ ad->zto = 2.0;
Create the main window with a title and add the delete callback:
-
/* Window */ +
// Window ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE); elm_win_autodel_set(ad->win, EINA_TRUE); @@ -204,14 +189,14 @@ if (elm_win_wm_rotation_supported_get(ad->win)) evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL); -/* Label*/ +// Label ad->label = elm_label_add(ad->win); elm_object_text_set(ad->label, "Effects Tutorial"); evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); elm_win_resize_object_add(ad->win, ad->label); evas_object_show(ad->label); -/* Show window after base gui is set up */ +// Show the window after the base GUI is set up evas_object_show(ad->win); ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad); @@ -280,7 +265,7 @@ elm_box_pack_end(ad->left_vbox, btn_resize);    appdata_s *ad = data;    // Starting the rotation effect 360 degrees -   //evas_object_resize(ad->button, 100, 50); +   // evas_object_resize(ad->button, 100, 50);    elm_object_text_set(ad->button, "Resize");    _resize_effect(ad->button); @@ -289,7 +274,7 @@ elm_box_pack_end(ad->left_vbox, btn_resize);
This function is an evas_object_smart_callback and thus needs to have its specific prototype: it does not return anything and receives three parameters:
-
+

data: data to be passed

btn: the object the callback is being called about

ev: the actual event, seldom used
@@ -350,14 +335,9 @@ elm_box_pack_end(ad->left_vbox, btn_resize);
When the resize button is clicked, the animation target button grows.

All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.
-
-
-
-
-
Creating a Rotation Effect
-Hide -
-
+ +
Creating a Rotation Effect
+
This effect rotates the animation target button with an angle of 360°. This angle is stored in the application data as ad->rt_angle.

Create the button and add it to the center column in the _create_btn_box function.
@@ -385,7 +365,7 @@ elm_box_pack_end(ad->center_vbox, btn_rotate);
The animation function rotates the animation target by adding a rotation effect with elm_transit_effect_rotation_add. This function takes three parameters:
-
+

Elm_Transit

the rotation position at which the effect begins

the rotation position at which the effect ends
@@ -398,20 +378,15 @@ elm_box_pack_end(ad->center_vbox, btn_rotate);    Elm_Transit *trans = elm_transit_add();    elm_transit_object_add(trans, obj); -   // rotates the object from its original angle to given degrees to the right +   // Rotates the object from its original angle to given degrees to the right    elm_transit_effect_rotation_add(trans, 0.0, angle);    elm_transit_duration_set(trans, 2.0);    elm_transit_go(trans); } -
-
-
-
-
Creating a Zoom Effect
-Hide -
-
+ +
Creating a Zoom Effect
+
The zoom effect zooms on the animation target to make it twice bigger. Store the source rate and the destination rate in the application data using ad->zfrom and ad->zto.

Create the button and add it to the center column in the _create_btn_box function.
@@ -431,7 +406,7 @@ elm_box_pack_end(ad->right_vbox, btn_zoom);    appdata_s *ad = data;    // Starting the rotation effect 360 degrees -   //evas_object_resize(ad->button, 100, 50); +   // evas_object_resize(ad->button, 100, 50);    elm_object_text_set(ad->button, "Zoom");    _zoom_effect(ad->button, ad->zfrom, ad->zto); } @@ -450,14 +425,9 @@ elm_box_pack_end(ad->right_vbox, btn_zoom); } -
-
-
-
-
Creating a Flip Effect
-Hide -
-
+ +
Creating a Flip Effect
+
This effect is applied to a pair of objects, in the order they are added, to the Elm_Transit transition. In this example, add the animation target button and the button called buttonbck which represents the back of the target button.

Create the action button for the flip effect:
@@ -499,14 +469,8 @@ elm_box_pack_end(ad->left_vbox, btn_flip); } -
-
-
-
-
Creating a Blend Transition
-Hide -
-
+
Creating a Blend Transition
+
The blend effect also works the same way as the flip, but without the axes or direction information. Use the back button here as well. To create the blend effect button:

// The blend button @@ -544,14 +508,9 @@ elm_box_pack_end(ad->center_vbox, btn_blend);    elm_transit_go(trans); }
-
-
-
-
-
Creating a Fade Effect
-Hide -
-
+ +
Creating a Fade Effect
+
The fade effect works exactly the same way as the blend effect. First create the button:

// The fade button @@ -590,14 +549,9 @@ elm_box_pack_end(ad->right_vbox, btn_fade);    elm_transit_go(trans); }
-
-
-
-
-
Creating a Flip on y Axis
-Hide -
-
+ +
Creating a Flip on y Axis
+
This is same as the flip transition, but on y axis. To create a flip on y axis:

// The flip y button @@ -630,14 +584,9 @@ static void _flip_y_effect(Evas_Object *obj, Evas_Object *obj2)    elm_transit_go(trans); }
-
-
-
-
-
Creating a Wipe Effect
-Hide -
-
+ +
Creating a Wipe Effect
+
The wipe transition is applied on an Evas object considering the wipe type and the direction. Use ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE to hide the button, and ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT to do it from left to right.

The wipe animation button is as follows:
@@ -658,7 +607,7 @@ elm_box_pack_end(ad->right_vbox, btn_wipe);    appdata_s *ad = data;    // Starting the rotation effect 360 degrees -   //evas_object_resize(ad->button, 100, 50); +   // evas_object_resize(ad->button, 100, 50);    // Setting the button text    elm_object_text_set(ad->button, "Wipe");    _wipe_effect(ad->button); @@ -678,12 +627,6 @@ elm_box_pack_end(ad->right_vbox, btn_wipe);     elm_transit_go(trans); } -
-
- -
-
-
diff --git a/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm index 4751641..cfeb86d 100644 --- a/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm @@ -16,77 +16,61 @@ -
+

-
+

Content

-
Initializing EOM
-
Getting Output ID
-
Setting Attribute
-
Setting External Window
-
Getting Status of External Output Device
+
Initializing the EOM
+
Getting the Output ID
+
Setting the Presentation Mode
+
Setting the External Window
+
Getting the Status of the External Output Device

Related Info

EOM Guide
- +

EOM: Using the External Output Devices
-
-
This tutorial demonstrates how you can control external output devices by EOM API.
+
This tutorial demonstrates how you can control external output devices with the External Output Manager (EOM).

Warm-up

Become familiar with the EOM API basics by learning about:
-
-
Initializing EOM -
Initialize the EOM.
-
Getting Output ID -
Get output device's ID.
-
Setting Attribute -
Set the attribute.
-
Setting External Window -
Set external window.
-
Getting Status of External Output Device -
Get external output device's information
+
Initializing the EOM +
Initialize the external output for use.
+
Getting the Output ID +
Obtain the output ID and control the external window.
+
Setting the Presentation Mode +
Set the output attribute and connect to an external device using the presentation mode.
+
Setting the External Window +
Set the external window and resize the image.
+
Getting the Status of the External Output Device +
Get information about the external output device.

-
-
-
Show All
-
Hide All
-
-
- -
-
-
-
Initializing EOM
- Hide -
-
-
To use the EOM API, the following header file has to be included:
-
#include <eom.h>
-
And have to excute eom_init() function.
-
-
- -
-
-
Getting Output ID
- Hide -
-
-
Have to find output id to get information of output device and control external window.
-
Use the eom_get_eom_output_ids() function to find output id.
-
+ +
Initializing the EOM
+
To initialize EOM:
+
+
To use the functions and data types of the EOM API, include the <eom.h> header file in your application: +
#include <eom.h>
+
+
Initialize the application with the eom_init() function.
+
+ +
Getting the Output ID
+ +
To retrieve the output ID, use the eom_get_eom_output_ids() function. You need the ID to get information about the output device and to control the external window.
+
int sample_get_output_id (const char *output_name) {    eom_output_id *output_ids = NULL; @@ -94,18 +78,19 @@ int sample_get_output_id (const char *output_name)    eom_output_type_e output_type = EOM_OUTPUT_TYPE_UNKNOWN;    int id_cnt = 0;    int i; -    +    output_ids = eom_get_eom_output_ids(&id_cnt);    if (id_cnt == 0)    { -      printf ("no external outuputs supported\n"); +      printf ("no external outputs supported\n"); +       return 0;    } -    +    for (i = 0; i < id_cnt; i++)    {       eom_get_output_type(output_ids[i], &output_type); -      if (!strncmp(output_name, "HDMI", 4)) +      if (!strncmp(output_name, "HDMI", 4))       {          if (output_type == EOM_OUTPUT_TYPE_HDMIA || output_type == EOM_OUTPUT_TYPE_HDMIB)          { @@ -113,7 +98,7 @@ int sample_get_output_id (const char *output_name)             break;          }       } -      else if (!strncmp(output_name, "Virtual", 7)) +      else if (!strncmp(output_name, "Virtual", 7))       {          if (output_type == EOM_OUTPUT_TYPE_VIRTUAL)          { @@ -122,174 +107,122 @@ int sample_get_output_id (const char *output_name)          }       }    } -    +    if (output_ids)       free (output_ids); +    return output_id; } -
-
-
- -
-
-
Setting Attribute
- Hide -
-
-
To acquire the right of external output device, use the eom_set_output_attribute() function
-
If setting is successful, eom module will work presentation mode when external output device connected.
-
+
+ + +
Setting the Presentation Mode
+ +
To connect to an external output device in the presentation mode, use the eom_set_output_attribute() function to set the presentation mode priority attribute.
+
If the setting is successful, the EOM module uses the presentation mode when the external output device connected.
+
int set_attribute() {    m_output_id output_id = 0;    int ret; -    -   output_id = sample_get_output_id("HDMI"); -    + +   output_id = sample_get_output_id("HDMI"); +    ret = eom_set_output_attribute(output_id, EOM_OUTPUT_ATTRIBUTE_NORMAL);    if (ret != EOM_ERROR_NONE)    { -      //Attribute set fail. Cannot use external output device. Deinitializing. -      eom_deinit (); +      // Attribute setting failed, the external output device cannot be used. Deinitializing. +      eom_deinit(); +       return -1;    } +    return 0; } -
-
There are three attributes for priority. It is recommended to use EOM_OUTPUT_ATTRIBUTE_NORMAL attribute to general application.
-
Other attributes are for special applications.
-
-EOM_OUTPUT_ATTRIBUTE_NORMAL -EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE -EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE -
-
If receive EOM_ERROR_NONE by eom_set_output_attribute() funtion, the application can use external output device.
-
-
- -
-
-
-
Setting External Window
- Hide -
-
-
Application can set window to external by using eom_set_output_window() function.
-
This API moves window to external output and resizes best resolution of external output device automatically.
-
Before excuting this function, application must receive success return from eom_set_output_attribute() function.
-
+
+ +
If the EOM_ERROR_NONE response is received from the eom_set_output_attribute() function, the application can use the external output device.
+ +
Setting the External Window
+ +
To set an external window, use the eom_set_output_window() function. This function moves the window to the external output and automatically resizes it to the best resolution of the external output device.
+
Before calling this function, you must receive a success return from the eom_set_output_attribute() function.
+
int make_external_window() {    Evas_Object *window; -   window = elm_win_add(NULL, "external_window", ELM_WIN_BASIC); +   window = elm_win_add(NULL, "external_window", ELM_WIN_BASIC);    if (eom_set_output_window(output_id, window) == EOM_ERROR_NONE)       return 0;    else    {       evas_object_del (window); +       return -1;    } } -
-
-
- -
-
-
Getting Status of External Output Device
- Hide -
-
-
Application can get external output device's information by using EOM API callback functions.
-
mode info
-
Mirror mode is default mode. If eom_set_output_attribute funtion excuted successfully, the external output will work to presentation mode.
-
-typedef enum -{ -   EOM_OUTPUT_MODE_NONE, -   EOM_OUTPUT_MODE_MIRROR, -   EOM_OUTPUT_MODE_PRESENTATION, -   EOM_OUTPUT_MODE_MAX, -} eom_output_mode_e; -
- -
attribute state
-
If application set attribue, EOM send current attribute state to application.
-
ACTIVE means application can use external output. INACTIVE means cannot use cause of disconnection.
-
LOST means application cannot use external output cause of another application's attribute setting.
-
In case of LOST, application can't recevie attribute state anymore.
-
-typedef enum -{ -   EOM_OUTPUT_ATTRIBUTE_STATE_NONE, -   EOM_OUTPUT_ATTRIBUTE_STATE_ACTIVE, -   EOM_OUTPUT_ATTRIBUTE_STATE_INACTIVE, -   EOM_OUTPUT_ATTRIBUTE_STATE_LOST, -   EOM_OUTPUT_ATTRIBUTE_STATE_MAX, -} eom_output_attribute_state_e; -
- -
get information
-
Application can get some information by using below APIs.
-
int eom_get_output_type (eom_output_id output_id, eom_output_type_e *type):Get output device type(HDMI, VIRTUAL, VGA, etc).
-
int eom_get_output_mode (eom_output_id output_id, eom_output_mode_e *mode):Get mode (NONE, MIRROR, PRESETNTATION).
-
int eom_get_output_attribute (eom_output_id output_id, eom_output_attribute_e *attribute)Get information of attribute set(NORMAL, EXCLUSIVE_SHARE, EXCLUSIVE).
-
int eom_get_output_attribute_state (eom_output_id output_id, eom_output_attribute_state_e *state)Get attribute state(ACTIVE, INACTIVE, LOST).
-
int eom_get_output_resolution (eom_output_id output_id, int *width, int *height)Get best resolution of external output device.
-
int eom_get_output_physical_size (eom_output_id output_id, int *phy_width, int *phy_height)Get physical size of external output device.
- -
callback
-
Application can get status changing event by setting callback functions.
-
-typedef void (*eom_output_added_cb)(eom_output_id output_id, void *user_data); -typedef void (*eom_output_removed_cb)(eom_output_id output_id, void *user_data); -typedef void (*eom_mode_changed_cb)(eom_output_id output_id, void *user_data); -typedef void (*eom_attribute_changed_cb)(eom_output_id output_id, void *user_data); -
-
By using below funtions, application can set and unset callback functions.
-
-int eom_set_output_added_cb (eom_output_added_cb callback, void *user_data); //external output connection event -int eom_unset_output_added_cb (eom_output_added_cb callback); //external output connection event -int eom_set_output_removed_cb (eom_output_removed_cb callback, void *user_data); //external output disconnection event -int eom_unset_output_removed_cb (eom_output_removed_cb callback); //external output disconnection event -int eom_set_mode_changed_cb (eom_mode_changed_cb callback, void *user_data); //external output mode changing event -int eom_unset_mode_changed_cb (eom_mode_changed_cb callback); //external output mode changing event -int eom_set_attribute_changed_cb (eom_attribute_changed_cb callback, void *user_data); //external output attribute state changing event -int eom_unset_attribute_changed_cb (eom_attribute_changed_cb callback); //external output attribute state changing event -
-
This is sample code about callback funtion.
-
+
+ +
Getting the Status of the External Output Device
+ +
To get information about the external output device:
+ +
+
You can retrieve information about the external output device details with the following functions: +
+
eom_get_output_type(): Get the connection type of the external output.
+
eom_get_output_mode(): Get the external output mode. +
The mirror mode is the default mode. If the eom_set_output_attribute() function has executed successfully, the external output works in the presentation mode.
+
eom_get_output_attribute(): Get the presentation mode priority attribute information.
+
eom_get_output_attribute_state(): Get the attribute state information. +
If the application sets the attribute, the EOM sends the current attribute state to the application:
+
+
ACTIVE: The application can use the external output.
+
INACTIVE: The application was disconnected from the external output.
+
LOST: The application cannot use the external output because another application has set the attribute. The application cannot receive the attribute state anymore.
+
+
eom_get_output_resolution(): Get the best resolution of the external output device.
+
eom_get_output_physical_size(): Get the physical size of the external output device.
+
+
+
You can receive notifications about state changes in the external output device: +
+
Define the callbacks for various state changes: +
typedef struct {    Evas_Object *external_window;    int output_id; -} SampleInfo; +} +SampleInfo; +// Triggered when the external output is connected static void -sample_notify_cb_output_add (eom_output_id output_id, void *user_data) +sample_notify_cb_output_add(eom_output_id output_id, void *user_data) {    SampleInfo *info = (SampleInfo*)user_data;    if (!info->external_window)    { -      //make external window +      // Create the external window       make_external_window(info->external_window);    } } +// Triggered when the external output is disconnected static void -sample_notify_cb_output_remove (eom_output_id output_id, void *user_data) +sample_notify_cb_output_remove(eom_output_id output_id, void *user_data) {    SampleInfo *info = (SampleInfo*)user_data;    if (!info->external_window)    { -      evas_object_del (info->external_window) +      evas_object_del(info->external_window)       info->external_window = NULL;    } } +// Triggered when the state of the EOM output attribute changes static void -sample_notify_cb_attribute_changed (eom_output_id output_id, void *user_data) +sample_notify_cb_attribute_changed(eom_output_id output_id, void *user_data) {    SampleInfo *info = (SampleInfo*)user_data;    eom_output_attribute_e attribute = EOM_OUTPUT_ATTRIBUTE_NONE; @@ -300,35 +233,41 @@ sample_notify_cb_attribute_changed (eom_output_id output_id, void *user_data)        if (state == EOM_OUTPUT_ATTRIBUTE_STATE_ACTIVE)    { -      //start displaying image to external output(info->external_window); +      // Start displaying the image to the external output(info->external_window);    }    else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_INACTIVE)    { -      //stop displaying image -      //destory external_window +      // Stop displaying the image +      // Destroy the external_window       if (info->external_window)       { -         evas_object_del (info->external_window); +         evas_object_del(info->external_window);          info->external_window = NULL;       }    }    else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_LOST)    { -      //stop displaying image -      //destory external_window +      // Stop displaying the image +      // Destroy the external_window       if (info->external_window)       { -         evas_object_del (info->external_window); +         evas_object_del(info->external_window);          info->external_window = NULL;       } -      //remove callback +      // Remove the callbacks       eom_unset_output_added_cb(sample_notify_cb_output_add);       eom_unset_output_removed_cb(sample_notify_cb_output_remove);       eom_unset_attribute_changed_cb(sample_notify_cb_attribute_changed);       eom_deinit ();    } } +
+
You can also define the eom_mode_change_cb callback to be triggered when the EOM output mode changes.
+ +
+
Register the callbacks: +
int elm_main() {    SampleInfo *info; @@ -337,46 +276,56 @@ int elm_main()        info = calloc(sizeof(SampleInfo));     -   eom_init (); -   info->output_id = sample_get_output_id ("HDMI"); +   eom_init(); +   info->output_id = sample_get_output_id ("HDMI");        ret = eom_set_output_attribute(info->hdmi_output_id, EOM_OUTPUT_ATTRIBUTE_NORMAL);    if (ret != EOM_ERROR_NONE)    { -      //cannot use external output device -      eom_deinit (); +      // Cannot use the external output device +      eom_deinit();    }    else    {       eom_get_output_mode(info->output_id, &output_mode);       if (output_mode != EOM_OUTPUT_MODE_NONE)       { -         //make external window +         // Create the external window          make_external_window(info->external_window);       } -       -      //add callback + +      // Add the callbacks       eom_set_output_added_cb(sample_notify_cb_output_add, info);       eom_set_output_removed_cb(sample_notify_cb_output_remove, info);       eom_set_attribute_changed_cb(sample_notify_cb_attribute_changed, info);    }        elm_run(); -    -   //remove callback +
+
To register the eom_mode_change_cb callback, use the eom_set_mode_changed_cb() function.
+
+ + +
When no longer needed, delete the callbacks: +
   eom_unset_output_added_cb(sample_notify_cb_output_add);    eom_unset_output_removed_cb(sample_notify_cb_output_remove);    eom_unset_attribute_changed_cb(sample_notify_cb_attribute_changed); -   eom_deinit (); +   eom_deinit();    elm_shutdown(); +    return 0; } -
-
-
-
-
-
+ + +
To delete the eom_mode_change_cb callback, use the eom_unset_mode_changed_cb() function.
+ +

+ + diff --git a/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm index 7e9f7ec..7f0ecb0 100644 --- a/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm @@ -16,26 +16,27 @@ -

This tutorial demonstrates how you can create and manage image objects.

@@ -48,24 +49,11 @@ -

Show All
Hide All

- -

-
-
Managing Images
- hide -
-
+
Managing Images
+
To manage image objects in Evas:
-
-

- diff --git a/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm index 22607e8..7afe60c 100644 --- a/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm @@ -16,16 +16,19 @@ -

+ @@ -33,7 +36,7 @@

The event and effect tutorials demonstrate how to create and implement a variety of animation effects and use gestures in Tizen mobile native applications:

The event and effect tutorials demonstrate how to create and implement a variety of animation effects and use gestures in Tizen native applications:

Animation and Effect Types: Using Various Effect and Effect Types
Demonstrates how you can create different kinds of animations and effects.
Gesture Detector: Implementing Gestures Provided by the EFL Library
Demonstrates how you can implement gestures provided by the EFL library.

+ @@ -40,41 +45,29 @@

This tutorial demonstrates how you can use different methods to set and change the font style in your application. You can change the font to another system-default font or one of your own fonts.

Become familiar with the Elementary Fonts and Edje Text Class API basics by learning about:

Become familiar with the Edje, Elementary, and Evas API basics by learning about:

Setting the Font for a Widget -
Set the font of a widget.
Setting the Font Using EDC +
Setting the Font for a UI Component +
Set the font of a UI component.
Setting the Font Using EDC
Create a layout with text using the EDC.
Using the Edje Text Class +
Using the Edje Text Class
Change the font of several text parts simultaneously.
Setting Your Own Font +
Setting Your Own Font
Change the font of several text parts simultaneously.

Show All
Hide All

- - Hide -

You can use the Elementary Fonts API to set the font for an application.

To set a font for a widget:

Set the font for a common widget: +

You can use the Elementary Fonts API (in mobile and wearable applications) to set the font for an application.

To set a font for a UI component:

Set the font for a common UI component: @@ -92,7 +85,7 @@ char *buf = "<font=Sans:style=Regular font_size=50>Hello</font/> elm_object_part_text_set(layout, "textblock1", buf); -

Set the font for an entry widget using the elm_entry_text_style_user_push() function. It overrides the default style of the entry widget for each attribute. +

Set the font for an entry component (in mobile and wearable applications) using the elm_entry_text_style_user_push() function. It overrides the default style of the entry component for each attribute.

@@ -100,7 +93,7 @@ elm_object_part_text_set(layout, "textblock1", buf); - +

Note
The elm_entry_text_style_user_push() function only affects the main text of the widget. To change the font of the guide text, you have to add markup tags.	The elm_entry_text_style_user_push() function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags.

@@ -113,16 +106,10 @@ elm_object_part_text_set(entry, "elm.guide",

-
-
Setting the Font Using EDC
- Hide -
-
+
Setting the Font Using EDC
+
To create a layout with text using the EDC, you can set the font for each text part or textblock:
-
-

- Hide -

You can use the Edje Text class to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.

+ +

You can use the Edje Class: Text API (in mobile and wearable applications) to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.

@@ -199,7 +180,7 @@ part - +

Note
Note that the text_class cannot be used in a widget with markup text or the elm_entry_text_style_user_push() function. You must set the text_class in EDC.	Note that the text_class cannot be used in a UI component with markup text or the elm_entry_text_style_user_push() function. You must set the text_class in EDC.

@@ -207,7 +188,7 @@ part

To set the text class, you can use reserved words for text class, but you can also make your own text class:

Set a class for a text part:

@@ -284,27 +265,15 @@ elm_config_font_overlay_apply();

-
-
Setting Your Own Font
- Hide -
-
+
Setting Your Own Font
+
You can create your own font and use them in your application. Before using your fonts, set the path for the fonts. Use the evas_font_path_global_append() or prepend function once when the application is launched.
```
 char *font_path = "/opt/usr/apps/org.tizen.myapp/res/fonts/";
 evas_font_path_global_append(font_path);
 
```
-
After calling the evas_font_path_global_append() function, you can load your fonts including the family name and style.
- -
-

After calling the evas_font_path_global_append() function, you can load your fonts including the family name and style.

diff --git a/org.tizen.tutorials/html/native/ui/form_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm similarity index 90% rename from org.tizen.tutorials/html/native/ui/form_tutorial_n.htm rename to org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm index c61373a..b359110 100644 --- a/org.tizen.tutorials/html/native/ui/form_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm @@ -16,53 +16,54 @@ -

This tutorial explains how to create a basic application for displaying a list of contacts, and a form for displaying and editing contact information when an item is selected on the contact list.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Elementary API basics by learning about:

Become familiar with the Eina, Elementary, and Evas API basics by learning about:

Creating the Basic Application +
Creating the Basic Application
Create an elementary application.
Creating the Naviframe +
Creating the Naviframe
Create the application layout.

Show All
Hide All

-Hide -

To create an elementary application with a single window, use the following code.

static bool
 app_create(void *data)
@@ -87,14 +88,9 @@ main(int argc, char **argv)
    return ui_app_main(&argc, &argv, &event_callback, &ad);
 }

-
-
Creating the Naviframe
-Hide -
-
+ +
Creating the Naviframe
+
Use a naviframe in this application to switch between different views. The first view that is displayed is the list of contacts. When a user selects an item on this list, information on the contact is displayed in a form. Both the view list and the form are opened in a naviframe, which handles the animations between the views for you. It also manages creating a back button in the top bar and launching the back animation when you select it, deletes the form view, and shows the list of contacts again.

Naviframe
@@ -198,8 +194,8 @@ _genlist_text_get(void *data, Evas_Object *obj EINA_UNUSED, const char *part)
The _genlist_content_get function is called several times depending on the style of the created item. In this case, with the default style for the genlist item, there are two different swallow parts. A swallow part is a container in the edje file of the genlist item, which may contain an evas object. The following figure shows the layout of different parts in the theme.
-
Figure: Genlist item
-
+
Figure: Genlist item
+

There are two elm.swallow parts. When the callback function for the creation of icons is called, the part name is passed via the part variable. Compare this variable to elm.swallow.icon for the first object and to elm.swallow.end for the icon at the end.
@@ -251,7 +247,7 @@ _genlist_content_get(void *data, Evas_Object *obj, const char *part)
To display the various information about the contact, we use boxes in this example.

Figure: Form contact layout
-
+

The first box is an vertical box.
@@ -272,7 +268,7 @@ evas_object_show(ic); elm_box_pack_end(vbox, ic); -
In the following example, add the information on the contact: the name, the mobile phone number, the postal address and the e-mail address. For each information item, create a label and an edit line. The label contains the kind of the information, and the edit box, the information itself. To set the widgets in a horizontal layout, use a horizontal box.
+
In the following example, add the information on the contact: the name, the mobile phone number, the postal address and the e-mail address. For each information item, create a label and an edit line. The label contains the kind of the information, and the edit box, the information itself. To set the UI components in a horizontal layout, use a horizontal box.
```
 hbox = elm_box_add(vbox);
 elm_box_horizontal_set(hbox, EINA_TRUE);
@@ -309,15 +305,10 @@ elm_box_pack_end(vbox, hbox);
 
```
Figure: Form tutorial: form
-
+

Figure: Form tutorial: list
-
-
-

Form tutorial: list

diff --git a/org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm similarity index 86% rename from org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm rename to org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm index ea66bec..7dcc7b8 100644 --- a/org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm @@ -16,7 +16,7 @@ -

+ -

This tutorial deals with genlists, a list widget for large sets of elements. It uses callbacks to populate entries. The same widget handles both flat lists and trees.

This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Genlist API basics by learning about:

Become familiar with the Elementary and Evas API basics by learning about:

Set-up
- Initializing the Application +
- Initializing the Application
  Initialize the application for use.
- Creating a Genlist +
- Creating a Genlist
  Create a genlist.
- Adding New Entries +
- Adding New Entries
  Add new entries to the list.
Modifications
- Choosing Another Item Style to Add or Remove Parts +
- Choosing Another Item Style to Add or Remove Parts
  Customize your list.
- Using Item Modes +
- Using Item Modes
  Use different list modes in your application.
- Using Other APIs +
- Using Other APIs
  Change the item class and size of the genlist.

Show All
Hide All

-
-
Initializing the Application
-Hide -
-
Figure: Example of a genlist
-
-
The code below shows a typical elementary application that creates a window entitled "Genlist Basic Tutorial". It is consisted of a conformant widget that contains a naviframe widget. The genlist goes inside the naviframe.
+
+
The code below shows a typical elementary application that creates a window entitled "Genlist Basic Tutorial". It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.
```
static bool
 _app_create(void *data)
 {
@@ -146,25 +146,15 @@ main(int argc, char **argv)
    Elm_Genlist_Item_Class *itc2;
 };
 
```
-
-
-
-
Creating a Genlist
-Hide -
-
+ +
Creating a Genlist
+
Call elm_genlist_add() to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.
-
```
Evas_object *list = elm_genlist_add(parent);
+Evas_Object *list = elm_genlist_add(parent);
 
-	
```
-
-
-
Adding New Entries
-Hide -
-
+ +
Adding New Entries
+
Use elm_genlist_item_append() to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to elm_genlist_item_append().

Building a Basic Item Class
@@ -239,7 +229,7 @@ _genlist_text_get(void *data, Evas_Object *obj, const char *part)
The data parameter makes it possible to behave differently according to data that is given to the EFLs during the call to elm_genlist_item_append() in the data parameter. For example, given an integer in that field through casting with (void *)(uintptr_t) i, it is possible to get its value back using (int)(uintptr_t)data:
```
static char *
-_genlist_text_get(void *data, Evas_Object *obj __UNUSED__, const char *part)
+_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
 {
    if (strcmp(part, "elm.text") == 0) 
    {
@@ -317,29 +307,19 @@ _genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
    elm_genlist_item_item_class_update(it, app->itc2);
 }
 
```
-
-
-
-
Choosing Another Item Style to Add or Remove Parts
-Hide -
-
+ +
Choosing Another Item Style to Add or Remove Parts
+
As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the Elm_Genlist_Item_Class struct:
```
app->itc->item_style = "default";
 
```
-
The Genlist Widget lists all available item styles.
+
The Genlist component lists all available item styles.

Further customization is achieved by modifying the theme as explained in the Edje guide.

In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.
-
-
-
-
Using Item Modes
-Hide -
-
-
So far the genlist examples have all featured bare lists while the genlist widget is able to display trees or even a "group" mode where scrolling keeps the item at the top of the widget until another group comes and replaces it.
+ +
Using Item Modes
+ +
So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a "group" mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.

Group Mode

The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for "title" items.

Mark some elements as ELM_GENLIST_ITEM_GROUP and use the returned Elm_Object_Item to establish the parent-children relationship when adding the children items.
@@ -469,22 +449,15 @@ _tree_item_contracted(void *data, Evas_Object *o, void *event_info)
Mixing Group and Tree Modes

A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.
-
-
-
-
Using Other APIs
-Hide -
-
+
Using Other APIs

Homogeneous Item Size

Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.

The elm_genlist_homogeneous_set() function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.

Changing the Item Class of an Item After Its Creation
-
Changing the item class of a widget is an easy way to change its appearance upon selection or other actions of the user. This is done by calling elm_genlist_item_class_update():
+
Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling elm_genlist_item_class_update():
```
static void
 _tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
 {
@@ -496,11 +469,6 @@ _tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
    elm_genlist_item_expanded_set(it, EINA_TRUE);
 }
 
```
-
-

diff --git a/org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm new file mode 100644 index 0000000..6418d83 --- /dev/null +++ b/org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm @@ -0,0 +1,507 @@ + + + + + + + + + + + + + + Genlist: Managing Large Element Sets + + + + + + +

+ +

This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

Become familiar with the Elementary and Evas API basics by learning about:

Set-up +
- Initializing the Application +
  Initialize the application for use.
- Creating a Genlist +
  Create a genlist.
- Adding New Entries +
  Add new entries to the list.
+
Modifications +
- Choosing Another Item Style to Add or Remove Parts +
  Customize your list.
- Using Item Modes +
  Use different list modes in your application.
- Using Other APIs +
  Change the item class and size of the genlist.
+

+ +

+ +

Figure: Example of a genlist

Example of a genlist

The code below shows a typical elementary application that creates a window entitled "Genlist Basic Tutorial". It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.

static bool
+_app_create(void *data)
+{
+   appdata_s *app = data;
+
+   app->win = elm_win_util_standard_add("main", "Genlist Basic Tutorial");
+   elm_win_conformant_set(app->win, EINA_TRUE);
+   evas_object_show(app->win);
+   evas_object_resize(app->win, 480, 800);
+   elm_win_autodel_set(app->win, EINA_TRUE);
+
+   app->conformant = elm_conformant_add(app->win);
+   evas_object_size_hint_weight_set(app->conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_win_resize_object_add(app->win, app->conformant);
+   evas_object_show(app->conformant);
+
+   app->naviframe = elm_naviframe_add(app->win);
+   evas_object_size_hint_weight_set(app->naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_win_resize_object_add(app->win, app->naviframe);
+   evas_object_show(app->naviframe);
+   elm_object_content_set(app->conformant, app->naviframe);
+
+   _create_list(app);
+   elm_naviframe_item_push(app->naviframe, NULL, NULL, NULL, app->list, NULL);
+
+   return true;
+}
+
+int
+main(int argc, char **argv)
+{
+   // Declare a few structures and zero-initialize (C99 feature)
+   struct app_data app = { 0 };
+   ui_app_lifecycle_callback_s event_callback = { 0 };
+
+   event_callback.create = _app_create;
+
+   // Run the mainloop
+   return ui_app_main(&argc, &argv, &event_callback, &ad);
+}
+

The declaration of the struct app_data is shown below:

struct app_data
+{
+   Evas_Object *win;
+   Evas_Object *naviframe;
+   Evas_Object *conformant;
+   Evas_Object *list;
+   Elm_Genlist_Item_Class *itc;
+   Elm_Genlist_Item_Class *itc2;
+};
+

+ +

+ +

Call elm_genlist_add() to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.

Evas_Object *list = elm_genlist_add(parent);
+

+ +

+ +

Use elm_genlist_item_append() to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to elm_genlist_item_append().

The code for the minimal genlist item class is below:

+ +

Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+itc->item_style = "default";
+itc->func.text_get = NULL;
+itc->func.content_get = NULL;
+itc->func.state_get = NULL;
+itc->func.del = NULL;
+

+ +

It creates a simple item class, sets the item_style to "default" and every other field to NULL. However, this leaves out the text_get and content_get fields which are used to add text and an icon to the list entry. This is explained in another section.

Once the genlist item class object is created, a new element is added to the list by calling elm_genlist_item_append().

elm_genlist_item_append(list,
+   itc,
+   NULL,                    // Item data
+   NULL,                    // Parent item for trees, NULL if none
+   ELM_GENLIST_ITEM_NONE,   // Item type; this is the common one
+   NULL,                    // Callback on selection of the item
+   NULL                     // Data for that callback function
+);
+

With most parameters as NULL and itc having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.

Use text_get callback to add text in the elements in the Elm_Genlist_Item_Class structure. These callbacks must have a prototype matching to the following:

+ +

char * text_get(void *data, Evas_Object *obj, const char *part);
+

This callbacks returns a C string that is displayed in the part named after the part parameter. This callback is called for each user-settable text part according to the current theme.

If you are not familiar with the concept of parts in the EFLs, read the Write a Simple EDC File section.

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

Note
The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.

+ +

For the default theme there is one part named elm.text. A possible implementation of the text_get callback is therefore:

static char *
+_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+   // Check this is text for the part we're expecting
+   if (strcmp(part, "elm.text") == 0) 
+   {
+      return strdup("Some text");
+   }
+   else {
+      return NULL;
+   }
+}
+

+ + + + + + + + + + +

Note
The names and positions of parts depends on the item_style chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. The Edje guide explains how to do that.

+ +

The data parameter makes it possible to behave differently according to data that is given to the EFLs during the call to elm_genlist_item_append() in the data parameter. For example, given an integer in that field through casting with (void *)(uintptr_t) i, it is possible to get its value back using (int)(uintptr_t)data:

static char *
+_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
+{
+   if (strcmp(part, "elm.text") == 0) 
+   {
+      char *buf = malloc(16);
+      snprintf(buf, 16, "Entry %d.", (int)(uintptr_t)data);
+
+      return buf;
+   }
+   else 
+   {
+      return NULL;
+   }
+}
+

+ +

Icons are added in a similar fashion: there is a callback named content_get which returns a pointer to an Evas_Object and is called for each part which contents can be set.

The prototype of the callback must match this one:

Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
+

+ +

The only difference with the text_get callback is that it returns an Evas_Object* rather than a char *.

This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:

+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+   int i = (int) (uintptr_t) data;
+
+   if (strcmp(part, "elm.swallow.icon") == 0) 
+   {
+      Evas_Object *bg = elm_bg_add(obj);
+      elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
+
+      return bg;
+   }
+   else if (strcmp(part, "elm.swallow.end") == 0) 
+   {
+      Evas_Object *bg = elm_bg_add(obj);
+      elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
+
+      return bg;
+   }
+   else 
+   {
+      return NULL;
+   }
+}
+

For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.

+ + + + + + + + + + +

Note
The swallow parts have no minimum size. This means that if you do not fix the minimum size, the part cannot be seen.

+ +

Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling elm_genlist_item_append()):

elm_genlist_item_append(list,
+   itc,
+   NULL,                    // item data
+   NULL,                    // parent item for trees, NULL if none
+   ELM_GENLIST_ITEM_NONE,   // item type, other values are used for trees
+   _genlist_selected_cb,      // callback on selection of the item
+   NULL                     // data for that callback function
+);
+

+ +

This callback adheres to the following prototype:

void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
+

+ +

The implementation below changes the item style of items when they are selected:

static void
+_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   appdata_s *app = data;
+
+   Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+   elm_genlist_item_item_class_update(it, app->itc2);
+}
+

+ +

+ +

As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the Elm_Genlist_Item_Class struct:

app->itc->item_style = "default";
+

The Genlist component lists all available item styles.

Further customization is achieved by modifying the theme as explained in the Edje guide.

In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.

+ +

+ +

So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a "group" mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.

The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for "title" items.

Mark some elements as ELM_GENLIST_ITEM_GROUP and use the returned Elm_Object_Item to establish the parent-children relationship when adding the children items.

Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:

+app->itc = elm_genlist_item_class_new();
+app->itc->item_style = "default";
+app->itc->func.text_get = _genlist_text_get_size;
+app->itc->func.content_get = _genlist_content_get_bg;
+app->itc->func.state_get = NULL;
+app->itc->func.del = NULL; 
+
+app->itc2 = elm_genlist_item_class_new();
+app->itc2->item_style = "1text.1icon";
+app->itc2->func.text_get = _genlist_text_get_nosize;
+app->itc2->func.content_get = _genlist_content_get_icon;
+app->itc2->func.state_get = NULL;
+app->itc2->func.del = NULL; 
+

+ +

Then add a group header and follow it with 10 children. This is repeated 1000 times.

The parent has type ELM_GENLIST_ITEM_GROUP while the children have type ELM_GENLIST_ITEM_NONE.

The other important point is that the value returned by lm_genlist_item_append() is stored in it and then sent to the elm_genlist_item_append() call that adds the children. This creates the parent-children relationship.

+for (i = 0; i < 1000; i++) 
+{
+   it = elm_genlist_item_append(app->list, app->itc2,
+      (void *)(uintptr_t) (10 * i),
+      NULL,
+      ELM_GENLIST_ITEM_GROUP,
+      NULL,
+      NULL
+   );
+   for (j = 0; j < 10; j++)
+   {
+      elm_genlist_item_append(app->list, app->itc,
+         (void *)(uintptr_t) (10 * i + j),
+         it,
+         ELM_GENLIST_ITEM_NONE,
+         NULL,
+         NULL
+      );
+   }
+}
+

+ +

Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: expand,request, expanded, contract,request, and contracted. Like any smart callback, they are registered through evas_object_smart_callback_add on the genlist object:

evas_object_smart_callback_add(app->list, "expand,request",
+   _tree_item_expand_request, NULL);
+evas_object_smart_callback_add(app->list, "expanded",
+   _tree_item_expanded, NULL);
+
+evas_object_smart_callback_add(app->list, "contract,request",
+   _tree_item_contract_request, NULL);
+evas_object_smart_callback_add(app->list, "contracted",
+   _tree_item_contracted, NULL);
+

+ +

The callbacks expand,request and contract,request do only one thing: decide whether the element is expanded or contracted. This is done by using elm_genlist_item_expanded_set() function; if it changes the expansion status of the item, the next callback is called (either expanded or contracted, depending on whether it was an expand,request or contract,request event). A minimal implementation of these callbacks is therefore:

+static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+   Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+   elm_genlist_item_item_class_update(it, app->itc2);
+
+   elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+

+ + + + + + + + + + +

Note
The example above has an extra line: the call to elm_genlist_item_item_class_update(). It changes the item style and is explained in the Changing the item class of an item after its creation section.

+ +

+static void
+_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
+{
+   Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+   elm_genlist_item_item_class_update(it, app->itc);
+
+   elm_genlist_item_expanded_set(it, EINA_FALSE);
+}
+

+ +

As said above, once the genlist item status is set to expanded, the expanded event is triggered and it is the duty of a callback for that event to populate the list with the item's children. This relies on the parent parameter of functions like elm_genlist_item_append(), like for the group mode.

The function below is a callback implementation for the expanded event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent Elm_Object_Item pointer that is passes to the elm_genlist_item_append() function is given in the event_info callback and needs to be cast.

static void
+_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
+{
+   Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+   int i_parent = (int)(uintptr_t) data;
+   int i;
+
+   for (i = 0; i < 10; i++) 
+   {
+      elm_genlist_item_append(app->list, app->itc,
+            (void *)(uintptr_t) (i + i_parent),
+            it_parent,
+            ELM_GENLIST_ITEM_NONE,
+            NULL,
+            NULL
+      );
+   }
+}
+

+ +

The following code has the callback function for the contracted event. It imply calls elm_genlist_item_subitems_clear() to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the event_info parameter to the callback.

static void
+_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
+{
+   Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+
+   elm_genlist_item_subitems_clear(it_parent);
+}
+

+ +

Become familiar with the Elementary and Evas API basics by learning about:

Initializing Touch Gestures +
Initializing Touch Gestures
Initialize the touch gestures for use.
Implementing Touch Gestures +
Implementing Touch Gestures
Implement different kinds of touch gestures.

Show All
Hide All

-
-
Initializing Touch Gestures
-Hide -
-
+
Initializing Touch Gestures
+
The EFL library provides a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum, line, zoom and rotate, which can be used by the application to build a dynamic user interface interaction which is simple to use as well as intuitive.
-
The create_base_gui function creates the application layout. It starts by creating a window, then adds the elm_conformant widget to it to decorate the window with an indicator. It then adds the elm_naviframe widget which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the create_main_view() function and adds it to naviframe.
+
The create_base_gui function creates the application layout. It starts by creating a window, then adds the elm_conformant component to it to decorate the window with an indicator. It then adds the elm_naviframe component which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the create_main_view() function and adds it to naviframe.
```
 static void
 create_base_gui(appdata_s *ad)
@@ -128,29 +120,24 @@ create_gesture_layer(appdata_s *ad)
 The following figure illustrates the Gesture Detector.
 
   Figure: Gesture Detector screen 
-   
-	
```
-
-
-
Implementing Touch Gestures
-Hide -
-
+
+ +
Implementing Touch Gestures
+
The elm_gesture_layer_attach() is the function to which a gesture layer for a particular object is attached.

A gesture can have 4 different states:
-
-

diff --git a/org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm similarity index 85% rename from org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm rename to org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm index 270c869..e78b69e 100644 --- a/org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm @@ -16,124 +16,120 @@ -

This tutorial shows how to add menus to the application. The example code creates an application with 3 views, these views are showed by an interaction with a menu bar, placed on the top of the application. The application has also a hidden menu that appears only when the menu button is pressed.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Elementary API basics by learning about:

Become familiar with the Ecore, Elementary, and Evas API basics by learning about:

Defining the Application "Structure" +
Defining the Application "Structure"
Define the structure of the application.
Defining the Application Theme +
Defining the Application Theme
Create a theme using Basic EDC UI Application.
Creating the Basic UI +
Creating the Basic UI
Create menus and toolbars.
Creating a Hidden Menu +
Creating a Hidden Menu
Create a hidden menu in your application.

Show All
Hide All

- -

-Hide -

Define the structure of the application:

typedef struct appdata
 {
-   Evas_Object* win;      // The main window
-   Evas_Object* layout;   // The Edje layout
-   Evas_Object* conform;  // The conform
-   Evas_Object *nf;       // The Naviframe to handle the views
-   appmenu_s *menu;       // The main menu
-   appmenu_s *sidemenu;   // The side menu
+   Evas_Object* win; // The main window
+   Evas_Object* layout; // The Edje layout
+   Evas_Object* conform; // The conform
+   Evas_Object *nf; // The Naviframe to handle the views
+   appmenu_s *menu; // The main menu
+   appmenu_s *sidemenu; // The side menu
    mainview_s *main_view; // The main view (dayselector)
-   calview_s *cal_view;   // The calendar view
+   calview_s *cal_view; // The calendar view
    dateview_s *date_view; // The date and time view
    settview_s *settings_view; // The settings view
-   Eina_Bool sdmenu_up;   // A Boolean variable to keep the side menu status
+   Eina_Bool sdmenu_up; // A Boolean variable to keep the side menu status
 } appdata_s;

This structure contains some specific variables for the views and the menus.

Define the main view by using the structure mainview, it is composed of a box (the main container), a dayselector, an image img, and a label lb_main.

typedef struct mainview
 {
-   Evas_Object *box;         //The main container of the view
-   Evas_Object *colorselector; //A color selector
-   Evas_Object *img;          //An image 
-   Evas_Object *lb_day;      //A label
+   Evas_Object *box; // The main container of the view
+   Evas_Object *colorselector; // A color selector
+   Evas_Object *img; // An image 
+   Evas_Object *lb_day; // A label
 } mainview_s;

The date view is very similar, it contains a box, a datetime widget and a label lb_date.

The date view is very similar, it contains a box, a datetime component and a label lb_date.

typedef struct dateview
 {
-   Evas_Object *box;      //The main container of the view 
-   Evas_Object *datetime; //A datetime widget 
-   Evas_Object *lb_date;  //A label 
+   Evas_Object *box; // The main container of the view 
+   Evas_Object *datetime; // A datetime component 
+   Evas_Object *lb_date; // A label 
 } dateview_s;

The last view is the calendar, it contains a box, a calendar and a label lb_cal.

typedef struct calview
 {
-   Evas_Object *box;      //The main container of the view 
-   Evas_Object *calendar; //A calendar widget  
-   Evas_Object *lb_cal;   //A label widget
+   Evas_Object *box; // The main container of the view 
+   Evas_Object *calendar; // A calendar component  
+   Evas_Object *lb_cal; // A label component
 } calview_s;

The last members of the application structure are the 2 menus. The main menu is fixed and visible, and the side menu is hidden on application starts. These menus are represented by the appmenu structure.

typedef struct appmenu
 {
-   Evas_Object *tb;           //The toolbar
-   Elm_Object_Item *submenu; //The submenu item
+   Evas_Object *tb; // The toolbar
+   Elm_Object_Item *submenu; // The submenu item
 } appmenu_s;

-
-
Defining the Application Theme
-Hide -
-
+ +
Defining the Application Theme
+
After the structure is defined, define the UI. In this tutorial, Basic EDC UI Application is used.

This application structure is based on this skeleton:

Figure: Menu skeleton
-
+
-
The window, the conformant and the layout are set by the Basic EDC UI Application skeleton. Setup the containers for widgets and views.
+
The window, the conformant and the layout are set by the Basic EDC UI Application skeleton. Setup the containers for UI components and views.

Create the main_menu SWALLOW part in the .edc file.
```
 part
@@ -153,7 +149,7 @@ part
       rel2.relative: 1.0 0.18;
       
    }
-} //End menu/main
+} // End menu/main
 
```
This part has two descriptions, one for the real position named up and another out of the screen as the default position. Create these states to animate the menu on application start. The animation is run by animation,menu_main.
```
program
@@ -198,7 +194,7 @@ part
    action: STATE_SET "up" 1.0;
    target: "view/main";
    transition: LINEAR 0.2;
-} //END animation,view_main
+} // END animation,view_main
 
```
The last container is the side menu called menu/side.
```
@@ -220,7 +216,7 @@ part
       rel2.relative: 0.3 1.0;
      color: 255 0 0 255;
    }
-} //END menu/side
+} // END menu/side
 
```
By default, this container is hidden. Clicking menu button makes it appear. The second description places the container on the left of the screen. Here is the program to run animation:
```
@@ -232,7 +228,7 @@ part
    action: STATE_SET "up" 1.0;
    target: "menu/side";
    transition: LINEAR 0.2;
-} //END animation,menu_side
+} // END animation,menu_side
 
```
This program runs when it receives an event called show,sidemenu from MenuButton source.

Create a program that does the opposite and starts when it receives a signal called hide,menu_side from MenuButton source.
@@ -257,24 +253,19 @@ program transition: LINEAR 0.2; } //END animation,menu_side -
-

-Hide -

+ +

The view container view/main is structured like this:

Figure: Main view

Main view

The naviframe contains and manages the boxes. For more information, see the Container programming guide. This widget handle views. In this example each view is contained in a box and the box is contained in the naviframe.

The naviframe contains and manages the boxes. For more information, see the Container programming guide. This UI component handle views. In this example each view is contained in a box and the box is contained in the naviframe.

Create the naviframe in the create_base_gui function and allocate the memory to handle the views and menus of the application.

- // Memory allocation
+// Memory allocation
 ad->main_view = calloc(1, sizeof(mainview_s)); // Allocating memory for the main view 
 ad->cal_view = calloc(1, sizeof(calview_s));   // Allocating memory for the calendar view 
 ad->date_view = calloc(1, sizeof(dateview_s)); // allocating memory for the date view 
@@ -284,7 +275,7 @@ ad->settings_view = calloc(1, sizeof(settview_s)); // allocating memory for t
 Use app_terminate function to free the memory:
  app_terminate(void *data)
 {
-   /* Release all resources. */
+   // Release all resources
    appdata_s *ad = data;
 
    free(ad->menu);
@@ -292,16 +283,16 @@ ad->settings_view = calloc(1, sizeof(settview_s)); // allocating memory for t
    free(ad->main_view);
    free(ad->cal_view);
    free(ad->settings_view);
-} //END of app_terminate
+} // END of app_terminate
 
 Create the naviframe:
 
 Create the main menu after most of the containers are created. First create a new _build_main_menu function, it takes an appdata_s as a parameter. This function is called by create_base_gui.
  static void _build_main_menu(appdata_s *ad)
 {
-   //Memory allocation for the main menu function.
+   // Memory allocation for the main menu function
    appmenu_s *menu = calloc(1, sizeof(appmenu_s));
-   //Putting the "main" menu in the application data.
+   // Putting the "main" menu in the application data
    ad->menu = menu;
 
    // Creation of the "Menu" toolbar
@@ -318,10 +309,10 @@ ad->settings_view = calloc(1, sizeof(settview_s)); // allocating memory for t
    elm_toolbar_item_append(menu->tb, ICON_DIR"/clock.png", "Date", _menu_item_selected_cb, ad);
    elm_toolbar_item_append(menu->tb, ICON_DIR"/settings.png", "Settings", _menu_item_selected_cb, ad);
 
-   // Showing the widget
+   // Showing the UI component
    evas_object_show(menu->tb);
 
-   // Adding the widget to the "menu/main" SWALLOW container defined in the .edc theme file.
+   // Adding the UI component to the "menu/main" SWALLOW container defined in the .edc theme file.
    elm_object_part_content_set(ad->layout, "menu/main", menu->tb);
 
    // Set the default view 
@@ -337,7 +328,7 @@ ad->settings_view = calloc(1, sizeof(settview_s)); // allocating memory for t
 
 Make the menu items have the same size by setting EINA_TRUE to elm_toolbar_homogeneous_set. This activates the homogeneous mode of the toolbar.
 Add menu items to the toolbar using elm_toolbar_item_append. This function takes 4 parameters:
-
+
 the target toolbar
 the icon path for the menu item
 the item label
@@ -407,14 +398,14 @@ else if (!strcmp(str, "Clock"))
 elm_object_content_set(ad->nf, view);
 
 The menu has views, Calendar, Date, Settings, and Home (main view). The view names are stored in the menu item label, to get the label compare the returned string with the view names. When the name matches, the view is built by calling the correct function. Store the view in the application data and set up a new content to the naviframe before exit.
-This way when the user clicks a menu item, the view changes. The naviframe widget destroys its content on each call of elm_object_content_set. That is why the content must be built again on each item click.
+This way when the user clicks a menu item, the view changes. The naviframe component destroys its content on each call of elm_object_content_set. That is why the content must be built again on each item click.
 Create the functions which create the views.
  static void _build_main_view(appdata_s *ad)
 {
    mainview_s *view = ad->main_view;
    char buf[PATH_MAX];
 
-   //Main box
+   // Main box
    view->box = elm_box_add(ad->nf);
    elm_box_horizontal_set(view->box, EINA_FALSE);
    elm_box_homogeneous_set(view->box, EINA_TRUE);
@@ -446,7 +437,7 @@ _build_calendar_view(appdata_s *ad)
 {
    calview_s *view = ad->cal_view;
 
-   //Main box image = elm_image_add(win);
+   // Main box image = elm_image_add(win);
 
    view->box = elm_box_add(ad->nf);
    elm_box_horizontal_set(view->box, EINA_FALSE);
@@ -468,14 +459,9 @@ _build_calendar_view(appdata_s *ad)
 } // End of_build_calendar_view
 
 Each function creates a view and stores it in the application data.
-

-Hide -

+ +

Add a new function called _build_side_menu to create the side Menu toolbar and add some items to it. This function takes the application data as parameter and stores the built menu in the sidemenu attribute of the structure.

static void _build_side_menu(appdata_s *ad)
 {
@@ -507,7 +493,7 @@ _build_calendar_view(appdata_s *ad)
    Ecore_Event_Key *ev = event;
    if (!strcmp(ev->keyname, KEY_END)) 
    {
-      /* Let window go to hide state. */
+      // Let window go to hide state
       elm_win_lower(ad->win);
    }
 
@@ -526,8 +512,8 @@ if (!strcmp(ev->keyname, "XF86Send"))
    {
       // If the menu is visible send a "hide,sidemenu" signal
       elm_object_signal_emit(ad->layout, "hide,sidemenu", "MenuButton");
-      // Store the new menu status (hidden).
-         ad->sdmenu_up = EINA_FALSE;
+      // Store the new menu status (hidden)
+      ad->sdmenu_up = EINA_FALSE;
    }
 }

@@ -542,11 +528,6 @@ if (ad->sdmenu_up == EINA_TRUE) }

This way the menu disappears when the view is selected by the user.

diff --git a/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm index a174b01..4946ba4 100644 --- a/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/multipoint_touch_tutorial_n.htm @@ -16,56 +16,49 @@ -

This tutorial demonstrates how you can use the Evas_Object to paint on a canvas and track touch events.

Become familiar with the UI API basics by learning about:

Become familiar with the Eina, Elementary, and Evas API basics by learning about:

Initializing Multi-point Touch +
Initializing Multi-point Touch
Initialize multi-point touch for use.
Handling the Canvas +
Handling the Canvas
Paint on a canvas.
Managing Touch Events +
Managing Touch Events
Manage and track different touch events.

Show All
Hide All

-
-
Initializing Multi-point Touch
-Hide -
-

This sample is a fully functional application able to track multiple simultaneous clicks. For every click, a black rectangle spot is drawn on the screen. This way it is easy to test the multi-point touch operation with the application.

Initialization is implemented in the multitouch.c file.
@@ -124,15 +117,10 @@ main(int argc, char *argv[])
The following figure illustrates the Multi-point Touch.

Figure: Multi-point Touch screens
-
-
-

-Hide -

Multi-point Touch screens

+ +

The create_base_gui() function creates base GUI elements including Naviframe and the Naviframe button. Naviframe includes each view screen as an item, which in turn includes the title and a button which clears spots when clicked.

static void
@@ -215,26 +203,21 @@ button_clicked_cb(void *data, Evas *evas, Evas_Object *object, void *event_info)
    appdata_s *ad = data;
    Evas_Object *spot;
 
-   EINA_LIST_FREE(ad->spots, spot)
+   EINA_LIST_FREE(ad->spots, spot)
    {
       evas_object_del(spot);
       spot = NULL;
    }
-   elm_object_text_set(ad->label, "Clear");
+   elm_object_text_set(ad->label, "Clear");
 }

-
-
Managing Touch Events
-Hide -
-
+ +
Managing Touch Events
+
On the bottom of the create_main_view() function, event callbacks are added to the event rectangle. An event callback is added using the evas_object_event_callback_add() function.

The following touch event types are supported:
-
-

diff --git a/org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm similarity index 91% rename from org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm rename to org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm index e329ff9..397e2a1 100644 --- a/org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm @@ -16,51 +16,52 @@ -

Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Naviframe API basics by learning about:

Become familiar with the Eina, Elementary, and Evas API basics by learning about:

Creating Naviframes +
Creating Naviframes
Create a UI with naviframes.

Show All
Hide All

-
-
Creating Naviframes
-Hide -
-
Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.

This tutorial shows a UI with three naviframes. Each naviframe is made of 20 screens, each made up of a label with the text "label @@ -97,7 +98,7 @@ _naviframe_add(Evas_Object *parent) return z; } -
Create buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe widget builds a button for "previous" by default, but allows the programmers to provide their own buttons. It has a specific slot for the "next" button.
+
Create buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe component builds a button for "previous" by default, but allows the programmers to provide their own buttons. It has a specific slot for the "next" button.
```
// Save the element that is popped from the naviframe
 static void
 _naviframe_prev(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
@@ -120,7 +121,7 @@ _naviframe_next(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED
    z->popped = eina_list_remove_list(z->popped, z->popped);
    if (label != NULL) 
    {
-      // The widget is saved inside the naviframe but nothing more; we need
+      // The UI component is saved inside the naviframe but nothing more; we need
       // to create new buttons and set the title text again (copy the one
       // from the label that is saved).
       text = elm_object_text_get(label);
@@ -246,11 +247,6 @@ _app_create(void *data)
    evas_object_show(w);
 }
 
```
-
-

diff --git a/org.tizen.tutorials/html/native/ui/panes_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/panes_tutorial_mn.htm similarity index 78% rename from org.tizen.tutorials/html/native/ui/panes_tutorial_n.htm rename to org.tizen.tutorials/html/native/ui/panes_tutorial_mn.htm index 9b26988..590d75d 100644 --- a/org.tizen.tutorials/html/native/ui/panes_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/panes_tutorial_mn.htm @@ -16,59 +16,59 @@ -

This tutorial explains how to use Panes in the application.

+ + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the Panes API basics by learning about:

Become familiar with the Elementary and Evas API basics by learning about:

Initializing the Application +
Initializing the Application
Initialize the application for use.
Creating a Panes Widget +
Creating a Panes Component
Create panes to the application.
Configuring the Panes +
Configuring the Panes
Change the pane settings and layout.
Handling Signals +
Handling Signals
Handle signals based on user interaction.

Show All
Hide All

-
-
Initializing the Application
-Hide -
-
This is how to start an Appcore application.
```
#include <Elementary.h>
 #include <app.h>
@@ -155,16 +155,11 @@ int main(int argc, char **argv)
    return ret;
 }
 
```
-
The code above creates a window entitled "Panes tutorial", composed of a conformant widget that contains a naviframe widget. To add a new Panes object, use the _create() function.
-
-
-
-
Creating a Panes Widget
-Hide -
-
-
The elm_panes widget adds a draggable bar between two contents. When dragged, this bar resizes the contents' size. To create a new Panes into an Elementary object, use the elm_panes_add() function:
+
The code above creates a window entitled "Panes tutorial", composed of a conformant component that contains a naviframe component. To add a new Panes object, use the _create() function.
+ +
Creating a Panes Component
+ +
The elm_panes component adds a draggable bar between two contents. When dragged, this bar resizes the contents' size. To create a new Panes into an Elementary object, use the elm_panes_add() function:
```
// Add an elm_panes 
 panes = elm_panes_add(naviframe);
 evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
@@ -174,14 +169,9 @@ evas_object_show(panes);
 nav_it = elm_naviframe_item_push (naviframe, "Panes view", NULL, NULL, panes, NULL);
 
```
Here the Panes is created and added in the naviframe.
-
-

-Hide -

+ +

By default, the orientation of the Panes is vertical. To modify the orientation, use the elm_panes_horizontal_set() function.

// Add a horizontal elm_panes 
 panes_h = elm_panes_add(naviframe);
@@ -191,7 +181,7 @@ elm_panes_horizontal_set(panes_h, EINA_TRUE);
 elm_object_part_content_set(panes, "left", panes_h);
 
 
-This is how to set a button object to the "right" side of our vertical Panes widget.
+This is how to set a button object to the "right" side of our vertical Panes component.
 // Create a button object 
 bt = elm_button_add(naviframe);
 elm_object_text_set(bt, "Right");
@@ -231,16 +221,11 @@ elm_panes_content_left_size_set(panes_h, 0.8);
 // Fix the Panes proportion 
 elm_panes_fixed_set(panes_h, EINA_TRUE);
 
-

-Hide -

The Panes widgets emit four different signals, depending on the users' interaction with the draggable bar.

The Panes components emit four different signals, depending on the users' interaction with the draggable bar.

"press" - The pane is pressed.
"unpressed" - The pane is released after being pressed.
"clicked" - The pane is clicked.

For the "unpress" signal, the proportion size of the left content of the Panes widget is printed to the standard output. To do this, use the elm_panes_content_left_size_get() function.

For the "unpress" signal, the proportion size of the left content of the Panes component is printed to the standard output. To do this, use the elm_panes_content_left_size_get() function.

// unpress callback 
 static void
 _unpress_cb(void *data, Evas_Object *obj, void *event_info)
@@ -295,7 +280,7 @@ _unpress_cb(void *data, Evas_Object *obj, void *event_info)
 
 "clicked,double" Signal 
 
-Hide the left part of the Panes widget on the "clicked,double" signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes widget, use the elm_panes_content_left_size_get() and elm_panes_content_left_size_set() functions, and a variable to store the value of the current proportion.
+Hide the left part of the Panes component on the "clicked,double" signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes component, use the elm_panes_content_left_size_get() and elm_panes_content_left_size_set() functions, and a variable to store the value of the current proportion.
 
 // double clicked callback 
 static void
@@ -325,12 +310,7 @@ _clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
 
 
 Figure: Panes tutorial in action 
-  
-

Panes tutorial in action

diff --git a/org.tizen.tutorials/html/native/ui/popup_tutorial_wn.htm b/org.tizen.tutorials/html/native/ui/popup_tutorial_wn.htm new file mode 100644 index 0000000..d3a2ac9 --- /dev/null +++ b/org.tizen.tutorials/html/native/ui/popup_tutorial_wn.htm @@ -0,0 +1,254 @@ + + + + + + + + + + + + + + Popup: Using Popups + + + + + + +

+ + +

This tutorial teaches the basics of the popup component interactions.

+ + + + + + + + + + +

Note
This feature is supported in wearable applications only.

+ +

Become familiar with the Popup API basics by learning about:

Initializing the Popup Application +
Create a base application where popups can be used.
Using Popup Styles +
Create various popup styles to customize the your popup.
Managing Popup Events +
Handle various popup events.

+ +

+ +

This use case creates an application with a window entitled "Popup Basic Tutorial". The window consists of a conformant component, and a popup is placed inside the conformant.

+ +

To create a typical elementary application:

+ +

+static void
+create_base_gui(appdata_s *ad)
+{
+   // Window
+   ad->win = elm_win_util_standard_add("main", "Popup Basic Tutorial");
+   elm_win_autodel_set(ad->win, EINA_TRUE);
+
+   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
+   eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+   // 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);
+
+   create_popup(ad->conform);
+
+   // Show the window after the base GUI is set up
+   evas_object_show(ad->win);
+}
+
+static bool
+app_create(void *data)
+{
+   appdata_s *ad = data;
+   create_base_gui(ad);
+
+   return true;
+}
+
+int
+main(int argc, char **argv)
+{
+   struct app_data ad = {0,};
+   ui_app_lifecycle_callback_s event_callback = {0,};
+
+   event_callback.create = app_create;
+
+   return ui_app_main(&argc, &argv, &event_callback, &ad);
+}

+ +

+ +

To create popups using various styles:

+ +

Create a basic text-only popup: + +

+Evas_Object *popup;
+struct appdata *ad;
+ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad->win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+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_text_set(popup, "This has only texts");
+evas_object_show(popup);
+

Create a popup with a title and text. The title,text attribute is the title area text part that defines the title label. +

+Evas_Object *popup;
+struct appdata *ad;
+ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad->win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+elm_object_part_text_set(popup, "title,text", "Title");
+elm_object_text_set(popup,"This Popup has title area and text");
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+evas_object_show(popup);
+

Create a popup with a title, text, and 2 buttons: +

+Evas_Object *popup;
+Evas_Object *btn;
+struct appdata *ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad->win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+elm_object_part_text_set(popup, "title,text", "Title");
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_text_set(popup, "This is title text 2button popup");
+
+btn = elm_button_add(popup);
+elm_object_style_set(btn, "popup");
+evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(btn, "Cancel");
+elm_object_part_content_set(popup, "button1", btn);
+evas_object_smart_callback_add(btn, "clicked", _response_cb, popup);
+
+btn = elm_button_add(popup);
+elm_object_style_set(btn, "popup");
+evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(btn, "OK");
+elm_object_part_content_set(popup, "button2", btn);
+evas_object_smart_callback_add(btn, "clicked", _response_cb, popup);
+
+evas_object_show(popup);
+

Create a toast popup: +

+Evas_Object *popup;
+struct appdata *ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad->win_main);
+elm_object_style_set(popup, "toast");
+elm_popup_orient_set(popup, ELM_POPUP_ORIENT_BOTTOM);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+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,"elm.text", "Saving Contacts to sim");
+
+evas_object_smart_callback_add(popup, "block,clicked", _block_clicked_cb, NULL);
+elm_popup_timeout_set(popup, 2.0);
+evas_object_smart_callback_add(popup, "timeout", _timeout_cb, NULL);
+
+evas_object_show(popup);
+

+ +

The Elementary popups respond to user interactions with several events.

To manage popup events:

+ +

Handle timeout events: +

The "timeout" event is triggered whenever a popup is closed as a result of timeout.

+static void _timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   evas_object_del(obj);
+}
+elm_popup_timeout_set(popup, 3.0);
+evas_object_smart_callback_add(popup, "timeout", _timeout_cb, NULL);
+

Handle the block,clicked events: +

The "block,clicked" event is triggered whenever the user taps on a blocked event area.

+static void _block_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   evas_object_del(obj);
+}
+evas_object_smart_callback_add(popup, "block,clicked", _block_clicked_cb, NULL);
+

+ + + + + +

+ +

+ + + + + + + diff --git a/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm index 1e06226..e9cd5b5 100644 --- a/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/transit_effect_tutorial_n.htm @@ -16,59 +16,52 @@ -

- -

This tutorial demonstrates how you can implement a variety of EFL animation effects using the Transit API available in the EFL library.

+ +

This tutorial demonstrates how you can implement a variety of EFL animation effects using the APIs available in the EFL library.

Become familiar with the Transit API basics by learning about:

Become familiar with the Ecore, Elementary, and Evas API basics by learning about:

Initializing the Application Layout +
Initializing the Application Layout
Initialize the application layout for use.
Implementing the Rotation Effect +
Implementing the Rotation Effect
Implement the rotation effect to the UI layout.
Implementing the Zoom Effect +
Implementing the Zoom Effect
Implement the zooming effect to the UI layout.

Show All
Hide All

-
-
Initializing the Application Layout
-Hide -
-
-
The application uses widgets, such as elm_conformant and elm_naviframe for view management, layout classes, such as elm_list for the composition of the screen, and widgets, such as elm_button and elm_image for the content inside the view.
+
Initializing the Application Layout
+ +
The application uses UI components, such as elm_conformant and elm_naviframe for view management, layout classes, such as elm_list for the composition of the screen, and UI components, such as elm_button and elm_image for the content inside the view.

The transit is designed to apply various animated transition effects to the Evas_Object. The following transition effects are supported in the Tizen native applications:
-
-
-
-
Implementing the Rotation Effect
-Hide -
-
+
+ +
Implementing the Rotation Effect
+
If the list item named by rotation includes the touch event, the callback function for this event is called.

The data is sent as an Evas_Object. This implements the animation effect.

To implement the rotation effect:
@@ -179,14 +167,9 @@ rotation_cb(void *data, Evas_Object *obj, void *event_info) elm_transit_go(transit); } -
-
-
-
Implementing the Zoom Effect
-Hide -
-
+ +
Implementing the Zoom Effect
+
If the list item named by zoom includes the touch event, the callback function for this event is called.

The data is sent as an Evas_Object. This implements the animation effect.

There are 2 transit functions: one is for the zoom effect and the other is for returning to the original effect:
@@ -220,11 +203,6 @@ zoom_cb(void *data, Evas_Object *obj, void *event_info) elm_transit_go(transit); } -
-

diff --git a/org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm similarity index 62% rename from org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm rename to org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm index 408f9a6..94f4f50 100644 --- a/org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm @@ -11,12 +11,12 @@ - UI Control: Managing UI Elements + UI Components: Managing UI Elements -

+ +

The UI component tutorials demonstrate how to manage user interface-related features in Tizen native applications:

The UI control tutorials demonstrate how you can manage user interface-related features in Tizen mobile native applications:

Basic: Using Basic Interactions
Demonstrates how you can implement an application with basic widgets interactions.
Form: Creating the Basic Application and Layout
Demonstrates how you can create a basic application that provides a form.
Naviframe: Creating Navigation Using Naviframes
Demonstrates how you can use a naviframe container in your application.
Genlist: Managing Large Element Sets
Demonstrates how you can use a genlist widget to manage large element sets in your application.
Menu: Adding Menus to the Application
Demonstrates how you can create menus for your application.
Panes: Using Panes
Demonstrates how you can use a panes widget in your application.
UI Layout: Creating a UI Screen Layout
Demonstrates how you can compose a UI screen using the layout classes available in the EFL widget library.
Basic: Using Basic Interactions
Demonstrates how you can implement an application with basic UI component interactions.
Form: Creating the Basic Application and Layout
Demonstrates how you can create a basic application that provides a form.
Naviframe: Creating Navigation Using Naviframes
Demonstrates how you can use a naviframe container in your application.
Genlist: Managing Large Element Sets
Demonstrates how you can use a genlist component to manage large element sets in your application.
Menu: Adding Menus to the Application
Demonstrates how you can create menus for your application.
Panes: Using Panes
Demonstrates how you can use a panes component in your application.
UI Layout: Creating a UI Screen Layout
Demonstrates how you can compose a UI screen using the layout classes available in the EFL UI component library.

- diff --git a/org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm new file mode 100644 index 0000000..3b6e88f --- /dev/null +++ b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm @@ -0,0 +1,42 @@ + + + + + + + + + + + + + UI Components: Managing UI Elements + + +

+ +

Click the profile you want:

+ + + +

+ + + + + + + \ No newline at end of file diff --git a/org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm new file mode 100644 index 0000000..59ba0f7 --- /dev/null +++ b/org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + UI Components: Managing UI Elements + + + + + + +

+ +

The UI component tutorials demonstrate how to manage user interface-related features in Tizen native applications:

+ +

Button: Using Buttons
Demonstrates how you can create various button component styles and handle button events.
Datetime: Using Datetime
Demonstrates how you can create UI components that allow the user to select a date or time.
Genlist: Managing Large Element Sets
Demonstrates how you can use a genlist component to manage large element sets in your application.
Popup: Using Popups
Demonstrates how you can create various popup component styles and handle popup events.
Circle Components: Creating a Circular View
Demonstrates how you can create various UI components for a circular screen.

+ + + + +

+ +

+ + + + + + + diff --git a/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_n.htm b/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_mn.htm similarity index 80% rename from org.tizen.tutorials/html/native/ui/ui_layout_tutorial_n.htm rename to org.tizen.tutorials/html/native/ui/ui_layout_tutorial_mn.htm index 8d8629e..16e8409 100644 --- a/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/ui/ui_layout_tutorial_mn.htm @@ -16,20 +16,22 @@ -

+ @@ -37,36 +39,35 @@

+ -

This tutorial demonstrates how you can compose a UI screen using the layout classes available in the EFL widget library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).

This tutorial demonstrates how you can compose a UI screen using the layout classes available in the EFL UI component library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).

+ + + + + + + + + + +

Note
This feature is supported in mobile applications only.

Become familiar with the UI API basics by learning about:

Become familiar with the Ecore, Elementary, and Evas API basics by learning about:

Creating the UI Layout +
Creating the UI Layout
Create an application layout.
Adding Content to the Screen +
Adding Content to the Screen
Add content to UI screens.

Show All
Hide All

-
-
Creating the UI Layout
-Hide -
-
-
The sample application uses widgets, such as elm_naviframe and elm_toolbar for the view management, layout classes, such as elm_table, elm_box, and elm_grid for the composition of the screen, and widgets, such as elm_label and elm_image for the content inside the view.
+
The sample application uses UI components, such as elm_naviframe and elm_toolbar for the view management, layout classes, such as elm_table, elm_box, and elm_grid for the composition of the screen, and UI components, such as elm_label and elm_image for the content inside the view.
-
The create_base_gui() function creates the application layout. It starts by creating a window, then adds the elm_conformant widget to it to decorate the window with an indicator. It then adds the elm_naviframe widget which acts as a view manager for the window and provides the window title functionality. After this it creates the toolbar using the create_toolbar() function and adds it to naviframe.
+
The create_base_gui() function creates the application layout. It starts by creating a window, then adds the elm_conformant component to it to decorate the window with an indicator. It then adds the elm_naviframe component which acts as a view manager for the window and provides the window title functionality. After this it creates the toolbar using the create_toolbar() function and adds it to naviframe.
```
 static void
 create_base_gui(appdata_s *ad)
@@ -99,7 +100,7 @@ create_base_gui(appdata_s *ad)
    tabbar_it = elm_toolbar_first_item_get(ad->tabbar);
    elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);
 
-   // Show window after base gui is set up
+   // Show the window after the base GUI is set up
    evas_object_show(ad->win);
 
    ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
@@ -129,15 +130,10 @@ create_toolbar(appdata_s *ad)
 The following figure illustrates the UI Layout.
 
   Figure: UI Layout screen 
-   
-	
```
-
-
-
Adding Content to the Screen
-Hide -
-
+
+ +
Adding Content to the Screen
+
The create_box_view() function creates the screen using a recursive composition of the box layout.
```
static Evas_Object*
@@ -269,12 +265,6 @@ create_grid_view(Evas_Object *parent)
 }
 
```
-
-

- diff --git a/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm b/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm index d330718..a013859 100644 --- a/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm @@ -11,38 +11,40 @@ - UI: Creating the Application UI + UI Framework: Creating the Application UI -

The UI tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen mobile native applications:

The UI framework tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen native applications:

EFL: Using EFL Features for Designing the UI
Demonstrates how you can use EFL to create your application UI.
Evas: Creating and Managing Image Objects
Demonstrates how you can create and manage image objects.
Event and Effect: Using Animations and Effects
Demonstrate how you can create and implement a variety of animation effects and use gestures in applications.
UI Control: Managing UI Elements
Demonstrate how you can manage user interface-related features.
Event and Effect: Using Animations and Effects
Demonstrates how you can create and implement a variety of animation effects and use gestures in applications.
UI Components: Managing UI Elements
Demonstrates how you can manage user interface-related features.
Efl Extension: Creating a Naviframe Window
Demonstrates how you can register the EFL Extension Menu and Back key events.
Font Setting: Using Various Fonts in the Application
Demonstrates how you can modify the fonts and text size of your application, or set your own font.
EFL UTIL: Adjusting the Notification Window Level
Demonstrates how you can create a notification window and adjust its position.
EFL Optimization: Optimizing Tizen Native Applications
Demonstrates how you can optimize your Tizen native application.
EOM: Using External Output by EOM
Demonstrates how you can use external output devices.
EOM: Using External Output Devices
Demonstrates how you can use external output devices.

diff --git a/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm index 35b4cc8..a95b3ea 100644 --- a/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm @@ -16,9 +16,9 @@ -

Show All
Hide All

- -

-
-
Creating and Destroying STT Handles
- Hide -
-
+
Creating and Destroying STT Handles
+
To create and destroy STT handles:
-
1. To use the features of the STT (speech-to-text) API, include the <stt.h> header file in your application: +
  1. To use the features of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> header file in your application:
```
 #include <stt.h>
```
  -
-
-
-
Setting and Unsetting Callbacks
- Hide -
-
+
Setting and Unsetting Callbacks
+
To set and unset callbacks:
-
1. To use the features of the STT (speech-to-text) API, include the <stt.h> header file in your application. The enum values for the callback function parameter are defined in the header file, as well as the parameter details. +
  1. To use the features of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> header file in your application. The enum values for the callback function parameter are defined in the header file, as well as the parameter details.
```
 #include <stt.h>
```
  2. The STT API provides various callback functions used to get the information including the recognition result, state changes, language changes, and errors. Call the callback functions in the STT_STATE_CREATED state.
    
    You can use the following callbacks:
    -
  -
-
-
-
Getting Information
- Hide -
-
+ +
Getting Information
+
To get information of the current STT state and the languages used:
-
1. To use the features of the STT (speech-to-text) API, include the <stt.h> header file in your application: +
  1. To use the features of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> header file in your application:
```
 #include <stt.h>
```
  2. You can obtain the current STT state, the list of supported languages, and the current language:
    -
  -
-
-
-
Connecting and Disconnecting the STT
- Hide -
-
+ +
Connecting and Disconnecting the STT
+
To operate the STT:
-
1. To use the features of the STT (speech-to-text) API, include the <stt.h> header file in your application: +
  1. To use the features of the STT (speech-to-text) API (in mobile and wearable applications), include the <stt.h> header file in your application:
```
 #include <stt.h>
```
  2. After you create the STT handle, connect the background STT daemon:
    -
  -
-

- Hide -

+ +

To set the STT options and control recording:

To use the features of the STT (speech-to-text) API, include the <stt.h> header file in your application: +

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

You can set the following STT options:

Set silence detection.
After the STT starts recognizing sound, some STT engines can detect silence when the sound input from the user ends. If silence detection is enabled, the STT library stops recognition automatically and sends the result. Otherwise, you can manually stop it using the stt_stop() function.

If you set the silence detection as automatic, STT works as a global STT setting. This option must be set in the STT_STATE_READY state.
@@ -583,7 +547,7 @@ void unset_stop_sound(stt_h stt)

Start, stop, and cancel recognition: -

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

@@ -592,7 +556,7 @@ void unset_stop_sound(stt_h stt)

If the stt_start() function fails, check the error code. You can get the following error codes: -

STT_ERROR_RECORDER_BUSY
STT_ERROR_OUT_OF_NETWORK
STT_ERROR_INVALID_STATE

- - - - - - diff --git a/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm b/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm index f501e30..5be326b 100644 --- a/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm +++ b/org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm @@ -16,37 +16,38 @@ -

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

@@ -79,22 +80,10 @@

Start TTS playback, stop, and pause it.

Show All
Hide All

- -

-
-
Creating and Destroying TTS Handles
- Hide -
-
+
Creating and Destroying TTS Handles
+
To create and destroy TTS handles:
-
1. To use the features of the TTS (text-to-speech) API, include the <tts.h> header file in your application: +
  1. To use the features of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application:
```
 #include <tts.h>
```
  -
-
-
-
Setting and Unsetting Callbacks
- Hide -
-
+ +
Setting and Unsetting Callbacks
+
To set and unset callbacks:
-
1. To use the features of the TTS (text-to-speech) API, include the <tts.h> header file in your application. The enum values for the parameters of the callback functions are defined there. You can also find the parameter details in the header file. +
  1. To use the features of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application. The enum values for the parameters of the callback functions are defined there. You can also find the parameter details in the header file.
```
 #include <tts.h>
```
  2. The TTS API provides various callback functions used to get information, such as changing states and starting a completing utterance. Call the setting and unsetting callback functions in the TTS_STATE_CREATED state.
    
    You can use the following callbacks:
    -
  -
-
-
-
Getting Information
- Hide -
-
+ +
Getting Information
+
To get information of the current TTS state and the voices used:
-
1. To use the features of the TTS (text-to-speech) API, include the <tts.h> header file in your application: +
  1. To use the features of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application:
```
 #include <tts.h>
```
  2. You can obtain the current state, the supported voice list, and the current voice:
    -
  -
-
-
-
Getting and Setting the Mode
- Hide -
-
+ +
Getting and Setting the Mode
+
To get and set the mode:
-
1. To use the features of the TTS (text-to-speech) API, include the <tts.h> header file in your application: +
  1. To use the features of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application:
```
 #include <tts.h>
```
  -
-
-
-
Connecting and Disconnecting TTS
- Hide -
-
+ +
Connecting and Disconnecting TTS
+
To operate the TTS:
-
1. To use the features of the TTS (text-to-speech) API, include the <tts.h> header file in your application: +
  1. To use the features of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application:
```
 #include <tts.h>
```
  2. After you create the TTS handle, connect the background TTS daemon. The daemon synthesizes the text with the engine and plays the resulting sound data:
    -
    - The tts_prepare() API is asynchronous, and the state of the TTS is changed to TTS_STATE_READY.
      +
      +
      The tts_prepare() function is asynchronous, and the state of the TTS is changed to TTS_STATE_READY.
      
      void prepare_for_tts(tts_h tts) @@ -459,7 +424,7 @@ void prepare_for_tts(tts_h tts)

The tts_unprepare() API is used for disconnection, and the state is changed back to TTS_STATE_CREATED.
+
The tts_unprepare() function is used for disconnection, and the state is changed back to TTS_STATE_CREATED.
```
void unprepared_for_tts(tts_h tts)
 {
@@ -474,22 +439,16 @@ void prepare_for_tts(tts_h tts)
 
```

-
-
Adding Text
- Hide -
-
+ +
Adding Text
+
To add text:
-
1. To use the features of the TTS (text-to-speech) API, include the <tts.h> header file in your application. There are defined values, TTS_VOICE_TYPE_AUTO and TTS_VOICE_SPEED_AUTO for following the default TTS setting. The minimum and maximum limits for the speed are also defined in the header file. +
  1. To use the features of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application. There are defined values, TTS_VOICE_TYPE_AUTO and TTS_VOICE_SPEED_AUTO for following the default TTS setting. The minimum and maximum limits for the speed are also defined in the header file.
```
 #include <tts.h>
```
  2. To manage text: -
  -
-
-
-
Starting, Stopping, and Pausing Playback
- Hide -
-
+ +
Starting, Stopping, and Pausing Playback
+
To start, pause, and stop playback:
-
1. To use the features of the TTS (text-to-speech) API, include the <tts.h> header file in your application: +
  1. To use the features of the TTS (text-to-speech) API (in mobile and wearable applications), include the <tts.h> header file in your application:
```
 #include <tts.h>
```
  -
-

diff --git a/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm b/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm index a2f449a..85639c1 100644 --- a/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm @@ -16,22 +16,23 @@ -

The UIX tutorials demonstrate how to use the following features in creating Tizen mobile native applications:

The UIX tutorials demonstrate how to use the following features in creating Tizen native applications:

TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data
Demonstrates how you can synthesize text into sound data and play it.
diff --git a/org.tizen.tutorials/html/native/web/web_tutorials_n.htm b/org.tizen.tutorials/html/native/web/web_tutorials_n.htm index 5e1491c..0e15713 100644 --- a/org.tizen.tutorials/html/native/web/web_tutorials_n.htm +++ b/org.tizen.tutorials/html/native/web/web_tutorials_n.htm @@ -16,36 +16,37 @@ -
+
-
+
Content

-
Initializing the EWK WebKit +
Initializing the EWK WebKit
-
Creating and Deleting a Window Object +
Creating and Deleting a Window Object
-
Setting the Window Layout +
Setting the Window Layout
-
Setting the Window View +
Setting the Window View
-
Handling Key and Mouse Events +
Handling Key and Mouse Events
-
Showing a Window and Setting the Focus +
Showing a Window and Setting the Focus
-
Setting the Page URL +
Setting the Page URL
-
Finding a Window +
Finding a Window
-
Finalizing the Application +
Finalizing the Application

Related Info

Web Guide
-
Web API
+
Web API for Mobile Native
+
Web API for Wearable Native
@@ -53,48 +54,38 @@
Web: Managing Web Pages and Web Content
-
-
This tutorial demonstrates how to create a simple Web browser.
+ +
This tutorial demonstrates how you can create a simple Web browser.

Warm-up

Become familiar with the Web API basics by learning about:

-
Initializing the EFL WebKit +
Initializing the EFL WebKit
Initialize the EFL WebKit (EWK) for use.
-
Creating and Deleting a Window Object +
Creating and Deleting a Window Object
Create and delete a window object.
-
Setting the Window Layout +
Setting the Window Layout
Create the window layout.
-
Setting the Window View +
Setting the Window View
Set the window smart view and settings.
-
Handling Key and Mouse Events +
Handling Key and Mouse Events
Handle the key and mouse event.
-
Showing a Window and Setting the Focus +
Showing a Window and Setting the Focus
Show a window and set the focus.
-
Setting the Page URL +
Setting the Page URL
Set the page URL.
-
Finding a Window +
Finding a Window
Use the helper functions to find a window.
-
Finalizing the Application +
Finalizing the Application
Finalize the application.

-
-
-
Show All
-
Hide All
-
-
- -
-
-
-
Initializing the EWK WebKit
-Hide -
-
+ + +
Initializing the EWK WebKit
+
To initialize the EWK WebKit:
-
To use the functions and data types of the WebView API, include the <Ecore.h>, <Ecore_Evas.h>, <Ecore_Getopt.h>, <Eet.h>, <Eina.h>, <Elementary.h>, <Evas.h>, and <EWebKit.h> header files in your application: +
To use the functions and data types of the WebView API (in mobile and wearable applications), include the <Ecore.h>, <Ecore_Evas.h>, <Ecore_Getopt.h>, <Eet.h>, <Eina.h>, <Elementary.h>, <Evas.h>, <EWebKit.h>, and <app.h> header files in your application:
#include <Ecore.h> #include <Ecore_Evas.h> @@ -104,6 +95,7 @@ #include <Elementary.h> #include <Evas.h> #include <EWebKit.h> +#include <app.h>

To use the EWK API, an application needs the following privileges: @@ -170,14 +162,14 @@ main(int argc, char *argv[]) {    int args = 1;    Browser_Window window; -   memset(&window, 0x00, sizeof(struct Browser_Window)); +   memset(&window, 0x00, sizeof(Browser_Window)); ui_app_lifecycle_callback_s ops; memset(&ops, 0x00, sizeof(ui_app_lifecycle_callback_s));    ops.create = br_app_create; -   return ui_app_main(&argc, &argv, &ops, &window); +   return ui_app_main(argc, argv, &ops, &window); }
@@ -186,14 +178,9 @@ main(int argc, char *argv[])
window = window_create(NULL, 0, 0, EINA_FALSE);
-
-
-
-
-
Creating and Deleting a Window Object
-Hide -
-
+ +
Creating and Deleting a Window Object
+
To create and delete a window object:

To create a window object, use the elm_win_add(Evas_Object* parent, const char* name, Elm_Win_Type) type function.
@@ -226,24 +213,20 @@ static void on_window_deletion(void *user_data, Evas_Object *elm_window, void *e    window_close(window_find_with_elm_window(elm_window)); }
-
-
-
-
-
Setting the Window Layout
-Hide -
-
+ + +
Setting the Window Layout
+
Create the window layout.

Figure: Window layout
-

+

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

// Create vertical layout -Evas_Object *vertical_layout = elm_box_add(window->elm_window); +Evas_Object *vertical_layout = elm_box_add(window->elm_window); elm_box_padding_set(vertical_layout, 0, 2); evas_object_size_hint_weight_set(vertical_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); elm_win_resize_object_add(window->elm_window, vertical_layout); @@ -266,14 +249,9 @@ adds a subobj as the resize object of obj. evas_object_show(Evas_Object* obj) makes an obj visible. The elm_box_pack_end (Evas_Object* obj, Evas_Object* subobj) function adds a subobject at the end of the pack list.
-
-
-
-
-
Setting the Window View
-Hide -
-
+ +
Setting the Window View
+
Create a window view and set the user agent. To create the view, use the _ewk_view_add() function. The view is an object that displays pages in the browser. To set the user agent, use the ewk_view_user_agent_set() function.

@@ -284,14 +262,10 @@ static Browser_Window *window_create(Evas_Object *opener, int width, int height,    ewk_view_user_agent_set(window->ewk_view, user_agent_string); }
-
-
-
-
-
Handling Key and Mouse Events
-Hide -
-
+ + +
Handling Key and Mouse Events
+
To handle mouse or key events, corresponding callbacks need to be set by calling the evas_object_event_callback_add() function.

@@ -391,14 +365,9 @@ static void on_mouse_down(void *user_data, Evas *e, Evas_Object *ewk_view, void       view_focus_set(window, EINA_TRUE); }
-
-
-
-
-
Showing a Window and Setting the Focus
-Hide -
-
+ +
Showing a Window and Setting the Focus
+
In EFL, the UI focus control is implemented in an Elementary object, not an Evas_object. Therefore, the application using EWK derived from an Evas_object must control the focus itself. For example, steal focus away from the elm_window object and give it to the ewk_view.

To set the focus to a ewk_view, use the void elm_object_focus_set (Evas_Object *obj, Eina_Bool focus) and void evas_object_focus_set (Evas_Object *obj, Eina_Bool focus) functions. Example code:
@@ -407,7 +376,7 @@ static void view_focus_set(Browser_Window *window, Eina_Bool focus) {    // We steal focus away from elm focus model and start to do things    // manually here, so elm now has no clue what is up. Tell elm that its -   // top level widget is to be unfocused so elm gives up the focus +   // top level UI component is to be unfocused so elm gives up the focus    elm_object_focus_set(elm_object_top_widget_get(window->elm_window), EINA_FALSE);    evas_object_focus_set(window->ewk_view, focus); }; @@ -430,14 +399,9 @@ window_create()
The void evas_object_show (Evas_Object *obj) function makes the given Evas object visible.
-
-
-
-
-
Setting the Page URL
-Hide -
-
+ +
Setting the Page URL
+
This example uses 2 helper functions for finding window structures. The first one, the window_find_with_elm_window() function, takes elm_window as an argument and returns a pointer to the Browser_Window object that the window is part of. The second one, the window_find_with_ewk_view() function, does the same with ewk_view passed as an argument. Both of them use the EINA_LIST_FOREACH macro to iterate over the windows list.

@@ -478,14 +442,9 @@ Eina_Bool has_scheme(const char *url)    return !!strstr(url, "://"); }
-
-
-
-
-
Finding a Window
-Hide -
-
+ +
Finding a Window
+
This example uses 2 helper functions for finding window structures. The first one, the window_find_with_elm_window() function, takes elm_window as an argument and returns a pointer to the Browser_Window object that the window is part of. The second one, the window_find_with_ewk_view() function, does the same for ewk_view. Both of them use the EINA_LIST_FOREACH macro to iterate over the windows list.

@@ -524,14 +483,9 @@ static Browser_Window *window_find_with_ewk_view(Evas_Object *ewk_view)    return NULL; }
-
-
-
-
-
Finalizing the Application
-Hide -
-
+ +
Finalizing the Application
+
To close the application correctly, use the ewk_shutdown() function. This function cleans up any resources your application has allocated.

@@ -548,15 +502,9 @@ main()    ops.create = br_app_create;    ops.terminate = br_app_terminate; -   return ui_app_main(&argc, &argv, &ops, &window); +   return ui_app_main(argc, argv, &ops, &window); }
- -
-
-
-
-
diff --git a/org.tizen.tutorials/html/scripts/showhide.js b/org.tizen.tutorials/html/scripts/showhide.js index 7b3255f..2e85407 100644 --- a/org.tizen.tutorials/html/scripts/showhide.js +++ b/org.tizen.tutorials/html/scripts/showhide.js @@ -118,9 +118,8 @@ $(document).ready(function(){ } $('#contents').scroll(); - - var updateH = function(){ + var checkBreadCrumbs = function() { if (!isScrolledIntoView($('#contents .content h1'))) { $('a.top.sms').show(); @@ -130,13 +129,12 @@ $(document).ready(function(){ $('.help_breadcrumbs').show(); } $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6)); + } + + var updateH = function(){ + checkBreadCrumbs(); $('a.top').css('bottom', $('#footer').outerHeight()); - - if($('#navigation').length) { - $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2)); - } else { - $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2)); - } + $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2)); $('#toc').css('top', $('#toc_border').position()['top'] + 7); @@ -152,18 +150,13 @@ $(document).ready(function(){ $('#container #contents').css('margin-bottom', $('#footer').outerHeight()); //$('#toc').css('top', $('#toc_border').position()['top'] + 2); $('#toc').css('top', $('#toc_border').position()['top'] + 7); - - if($('#navigation').length) { - $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5); + $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5); //$('#toc').css('width', $('#toc_border').width() - 40); - } else { - $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5); - } - $('#toc').css('width', $('#toc_border').width() - 49); }; var updateH_no_toc = function() { + checkBreadCrumbs(); if (!isScrolledIntoView($('#contents .content h1'))) { $('a.top.sms').show(); diff --git a/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm index d8fbb48..1e66faa 100644 --- a/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/application/alarm_tutorial_w.htm @@ -16,7 +16,7 @@ -
+

@@ -39,7 +39,6 @@

Alarm: Scheduling an Application to Be Launched at a Specific Time
-

This tutorial demonstrates how you can manage alarms in the device to automatically launch applications when an alarm is triggered.
@@ -58,27 +57,12 @@
Warm-up

Become familiar with the Alarm API basics by learning about:

-
Managing Alarms
Create an absolute and relative alarm, retrieve a list of alarms and delete an alarm.
-
Launching Applications with Alarms
Launch an application or application service when an alarm is triggered.
-
Checking for Alarm Events
Check when the next absolute or relative alarm is going to be triggered.
+
Managing Alarms
Create an absolute and relative alarm, retrieve a list of alarms and delete an alarm.
+
Launching Applications with Alarms
Launch an application or application service when an alarm is triggered.
+
Checking for Alarm Events
Check when the next absolute or relative alarm is going to be triggered.

- -
-
-
Show All
-
Hide All
-
-
- -
- -
-
-
Managing Alarms
- hide -
-
+
Managing Alarms

Learning how to create and delete alarms is a basic alarm management skill:

@@ -127,15 +111,8 @@ tizen.alarm.add(alarm1, "tizen.internet"); tizen.alarm.remove(alarm1.id);
To delete all alarms at once, use the removeAll() method.

-
-
- -
-
-
Launching Applications with Alarms
- hide -
-
+ +
Launching Applications with Alarms

Learning how to launch application with alarms is a basic alarm management skill:

@@ -154,15 +131,8 @@ var appControl = new tizen.application.ApplicationControl("http://tizen.org tizen.alarm.add(alarm, "org.tizen.browser", appControl);
-
-
-
-
-
Checking for Alarm Events
- hide -
-
+
Checking for Alarm Events

Learning how to check for the next alarm to be triggered is a basic alarm management skill:

@@ -184,13 +154,7 @@ tizen.alarm.add(alarm, "org.tizen.browser"); console.log("The alarm triggers " + alarm.getRemainingSeconds() + " seconds later");
-
-
- -
-
-
- + diff --git a/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm index 1ae3ad4..a92eba2 100644 --- a/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm @@ -16,7 +16,7 @@ -
+

diff --git a/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm index f5f8a44..4539ab4 100644 --- a/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/application/application_tutorial_w.htm @@ -16,7 +16,7 @@ -
+

@@ -47,7 +47,6 @@

Application: Providing Information about Applications and Controlling Applications
-

This tutorial demonstrates how you can manage and launch applications.
@@ -66,27 +65,15 @@
Warm-up

Become familiar with the Application API basics by learning about:

-
Retrieving Application Information
Display a list of applications that are currently installed or running on the device, and retrieve application information, such as application name, application ID, and context ID.
-
Managing Applications
Launch, stop, hide, or exit applications.
-
Receiving Notifications on Application List Changes
Receive notifications when applications are installed, updated, or uninstalled.
-
Launching Applications with the Application Control
Launch applications by a request based on their functionality.
-
Handling Application Control Requests
Handle requests from other applications and reply with a result.
+
Retrieving Application Information
Display a list of applications that are currently installed or running on the device, and retrieve application information, such as application name, application ID, and context ID.
+
Managing Applications
Launch, stop, hide, or exit applications.
+
Receiving Notifications on Application List Changes
Receive notifications when applications are installed, updated, or uninstalled.
+
Launching Applications with the Application Control
Launch applications by a request based on their functionality.
+
Handling Application Control Requests
Handle requests from other applications and reply with a result.

- -
-
-
Show All
-
Hide All
-
-
- -
-
-
-
Retrieving Application Information
- Hide -
-
+ + +
Retrieving Application Information

Learning how to retrieve information about installed and running applications allows you to manage all the device applications from your application:

@@ -107,14 +94,8 @@ console.log("The application name :" + appinfo.name);
To retrieve application context information, use the getAppContext() method of the ApplicationManager interface.

Provide the context ID of the application whose context information you want as a parameter for the method. If no context ID is set, the method retrieves the information about the application calling the method.

var appContext = tizen.application.getAppContext(); console.log("Application context retrieved for app " + appContext.id);

-
-
-
-
-
Managing Applications
- Hide -
-
+ +
Managing Applications

Learning how to launch and stop other applications, and hide or exit applications running on the device, allows you to manage all the device applications from your application:

@@ -146,14 +127,8 @@ currApp.hide(); currApp.exit();
-
-
-
-
-
Receiving Notifications on Application List Changes
- Hide -
-
+ +
Receiving Notifications on Application List Changes

Learning to receive notifications when the list of installed applications changes allows you to manage all the device applications from your application:

@@ -183,14 +158,8 @@ currApp.exit();

To stop receiving the notifications, use the removeAppInfoEventListener() method of the ApplicationManager interface (in mobile and wearable applications):

tizen.application.removeAppInfoEventListener(listenerID);

-
-
-
-
-
Launching Applications with the Application Control
- Hide -
-
+ +
Launching Applications with the Application Control

Learning to use the application controls to launch applications allows you to take advantage of all the device applications from your application:
@@ -216,15 +185,8 @@ tizen.application.removeAppInfoEventListener(listenerID);
                                   function(e){/* Error handling */},                                    appControlReplyCB); -
-
-
-
Handling Application Control Requests
- Hide -
-
+ +
Handling Application Control Requests

Learning how to handle requests from other applications allows you to create Web applications that can be called from other applications to perform specific actions.

Web applications can provide a service which is identified by the operation name. Other applications can request it and use the provided feature of the service application @@ -233,7 +195,7 @@ tizen.application.removeAppInfoEventListener(listenerID);

To enable the application to receive Application Control requests, open the widget configuration editor and +
To enable the application to receive Application Control requests, open the Web application configuration editor and add an operation in the app-control section.

In this example, the name of the operation is http://example.tizen.org/operation/get_time. The config.xml file contains a <tizen:app-control> element:
@@ -277,12 +239,7 @@ try

For more information on launching an application, see Launching Applications with the Application Control.

- - -

- + diff --git a/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm index 4c46d78..3e06c1b 100644 --- a/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/application/data_tutorial_w.htm @@ -16,7 +16,7 @@ -

@@ -37,7 +37,6 @@

This tutorial demonstrates how you can share data between applications.

@@ -55,24 +54,11 @@

Become familiar with the Data Control API basics by learning about:

Managing Data in Key-value Pairs
Get, add, update, and remove values assigned to a key.
Managing SQL-type Data
Select, insert, update, and remove SQL-type data.
Managing Data in Key-value Pairs
Get, add, update, and remove values assigned to a key.
Managing SQL-type Data
Select, insert, update, and remove SQL-type data.

Show All
Hide All

- -

- Hide -

Learning how to manage map-type data allows you to use key-value pairs exposed by a DataControl provider:

You need a running DataControl provider application, which uses the "http://tizen.org/datacontrol/provider/DictionaryDataControlProvider" provider ID.

-// Get the map-type DataControlConsumerObject
+/* Get the map-type DataControlConsumerObject */
 try 
 {
    var globalMappedConsumer = tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider", "Dictionary", "MAP");
@@ -106,12 +92,12 @@ function onRequestError(id, error)
 }

To manage key-value pairs: -

To add a key-value pair, use the addValue() method of the MappedDataControlConsumer:

 try 
 {
-   // Increase globalReqId for uniqueness
+   /* Increase globalReqId for uniqueness */
    globalReqId++;
    globalMappedConsumer.addValue(globalReqId, "tizen", "Foo", onRequestSuccess, onRequestError);
 }
@@ -146,14 +132,8 @@ try
 }

- Hide -

+ +

Learning how to manage SQL-type data allows you to use databases exposed by a DataControl provider:

You need a running DataControl provider application, which uses the "http://tizen.org/datacontrol/provider/DictionaryDataControlProvider" provider ID.

-// Get SQL type DataControlConsumerObject
+/* Get SQL type DataControlConsumerObject */
 try 
 {
    var globalSQLConsumer = tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider", "Dictionary", "SQL");
@@ -188,7 +168,7 @@ function onRequestError(id, error)

To manage the data: -

To insert data, use the insert() method of the SQLDataControlConsumer interface:

 function onInsertSuccess(reqId, rowId)
@@ -203,7 +183,7 @@ try
       columns: ["WORD", "WORD_DESC"] ,
       values: ["'tizen1'", "'tizen2'"]
    };
-   // Increases globalReqId for uniqueness
+   /* Increases globalReqId for uniqueness */
    globalReqId++;
    globalSQLConsumer.insert(globalReqId, rowData, onInsertSuccess, onRequestError);
 }
@@ -252,12 +232,7 @@ try
 }

- -

+ diff --git a/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm index 2ebae10..7be5286 100644 --- a/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/application/package_tutorial_w.htm @@ -16,7 +16,7 @@ -

@@ -46,7 +46,6 @@

This tutorial demonstrates how you can manage packages and retrieve information about them.

@@ -64,25 +63,12 @@

Become familiar with the Package API basics by learning about:

Retrieving Package Information
Display a list of installed packages on the device, and retrieve package information, such as name, ID, icon path, and version.
Managing Packages
Install or uninstall packages.
Receiving Package Change Notifications
Receive notifications if packages are installed, updated, or uninstalled.
Retrieving Package Information
Display a list of installed packages on the device, and retrieve package information, such as name, ID, icon path, and version.
Managing Packages
Install or uninstall packages.
Receiving Package Change Notifications
Receive notifications if packages are installed, updated, or uninstalled.

Show All
Hide All

- -

-
-
Retrieving Package Information
- Hide -
-
+
Retrieving Package Information

Learning how to retrieve information about installed packages allows you to manage device packages from your application:
1. To retrieve basic package information, use the getPackageInfo() method of the PackageManager interface, specifying the package ID. If no package ID is set, the method retrieves information of the application package calling the method.
```
var packageInfo = tizen.package.getPackageInfo("org.tizen.calculator");
```
-
-
-
-
Managing Packages
- Hide -
-
+ +
Managing Packages

Learning how to install and uninstall packages is a basic package management skill:
-
-
-
-
Receiving Package Change Notifications
- Hide -
-
+ +
Receiving Package Change Notifications

Learning to receive notifications when the list of installed packages changes allows you to manage device packages from your application:
1. Register the listener to use the defined event handlers with the setPackageInfoEventListener() method of the PackageManager interface (in mobile and wearable applications):
```
tizen.package.setPackageInfoEventListener(packageEventCallback);
```
2. To stop receiving notifications, use the unsetPackageInfoEventListener() method of the PackageManager interface:
```
tizen.package.unsetPackageInfoEventListener();
```
-
-

- -

+ diff --git a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm index e74aad9..d0841c5 100644 --- a/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm @@ -16,7 +16,7 @@ -

@@ -40,7 +40,6 @@

This tutorial demonstrates how you can manage Bluetooth and exchange data with a peer device.

@@ -52,7 +51,8 @@ The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. -

The Bluetooth API is not supported on any Tizen Emulators.

+ @@ -68,25 +68,13 @@

In the Bluetooth Chat task, we will walk through how to use the device as a Bluetooth server or client in a chat application.

- -

Show All
Hide All

- -

-
-
Managing the Local Bluetooth Adapter
- Hide -
-
+ +
Managing the Local Bluetooth Adapter

Learning how to enable or disable the local Bluetooth adapter, and set the device name is a basic Bluetooth management skill:

The Bluetooth API does not provide a method to enable or disable the Bluetooth adapter of the device directly. Whenever Bluetooth is required, request a built-in Settings application to present the relevant switch to the user so that they can enable or disable the Bluetooth.
-
+
Figure: Bluetooth setting screen
+
1. Retrieve a BluetoothAdapter object (in mobile and wearable applications) with the getDefaultAdapter() method and prepare the ApplicationControl object (in mobile and wearable applications) to request the Bluetooth switching operation:
```
var bluetoothSwitchAppControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit", null, "application/x-bluetooth-on-off");
@@ -159,20 +147,14 @@ tizen.application.launchAppControl(bluetoothVisibilityAppControl, null, null, la
 
    Set a friendly name for the device using the setName() method.
 The name helps to recognize the device in a list of retrieved devices.
 adapter.setName(chatServerName); 
   
```
-
-

- Hide -

+ +

Learning how to search for remote devices and get the known devices is a basic Bluetooth management skill:

Retrieve a BluetoothAdapter object (in mobile and wearable applications) with the getDefaultAdapter() method:

var adapter = tizen.bluetooth.getDefaultAdapter();
+   Retrieve a BluetoothAdapter object (in mobile and wearable applications) with the getDefaultAdapter() method:
 var adapter = tizen.bluetooth.getDefaultAdapter();
 
-   To search for remote devices, use the discoverDevices() method.
 The results of the search are returned in the BluetoothDiscoverDevicesSuccessCallback (in mobile and  wearable applications).
 +   To search for remote devices, use the discoverDevices() method.
 The results of the search are returned in the BluetoothDiscoverDevicesSuccessCallback (in mobile and wearable applications).
  var discoverDevicesSuccessCallback =
 {
    /* When a device is found */
@@ -195,7 +177,7 @@ adapter.discoverDevices(discoverDevicesSuccessCallback, null);
       
      
      
-   To retrieve known devices (which have been previously paired or searched for), use the getKnownDevices() method.
 The results of the search are returned in the BluetoothDeviceArraySuccessCallback (in mobile and  wearable applications).
 +   To retrieve known devices (which have been previously paired or searched for), use the getKnownDevices() method.
 The results of the search are returned in the BluetoothDeviceArraySuccessCallback (in mobile and wearable applications).
  /* When a known device is found */
 function onGotDevices(devices)
 {
@@ -207,18 +189,11 @@ adapter.getKnownDevices(onGotDevices);

- Hide -

Learning how to create a bonding with other devices is a basic Bluetooth management skill:

Retrieve a BluetoothAdapter object (in mobile and wearable applications) with the getDefaultAdapter() method:

var adapter = tizen.bluetooth.getDefaultAdapter();
+   Retrieve a BluetoothAdapter object (in mobile and wearable applications) with the getDefaultAdapter() method:
 var adapter = tizen.bluetooth.getDefaultAdapter();
 
    To create a bonding with another device, use the createBonding() method:
  function onBondingSuccessCallback(device)
@@ -240,26 +215,20 @@ adapter.createBonding("35:F4:59:D1:7A:03", onBondingSuccessCallback, o
       Note
      
      
-      The MAC address of the Bluetooth device is a BluetoothAddress object (in mobile and  wearable applications). You can get the MAC address of the peer device from the BluetoothDevice object (in mobile and  wearable applications), which is returned in the success callback of the BluetoothAdapter's getKnownDevices() and discoverDevices() methods.
+      The MAC address of the Bluetooth device is a BluetoothAddress object (in mobile and wearable applications). You can get the MAC address of the peer device from the BluetoothDevice object (in mobile and wearable applications), which is returned in the success callback of the BluetoothAdapter's getKnownDevices() and discoverDevices() methods.
      
     
    
 
    To end the bonding with a remote device, use the destroyBonding() method:
 adapter.destroyBonding("35:F4:59:D1:7A:03");

-Hide -

+ +

The Radio Frequency Communication (RFCOMM) is a set of transport protocols which allows multiple simultaneous connections to a device. The device that provides a service is called a server device, and devices that request the service are called client devices.

Learning how to connect to services provided by a server device to the client devices is a basic Bluetooth management skill:

Retrieve a BluetoothAdapter object (in mobile and wearable applications) with the getDefaultAdapter() method:

var adapter = tizen.bluetooth.getDefaultAdapter();
+   Retrieve a BluetoothAdapter object (in mobile and wearable applications) with the getDefaultAdapter() method:
 var adapter = tizen.bluetooth.getDefaultAdapter();
  
    To register a service and allow client devices to connect to it, use the registerRFCOMMServiceByUUID() method on the server device:
 adapter.registerRFCOMMServiceByUUID(serviceUUID, "My service"); 
      
@@ -268,10 +237,10 @@ adapter.createBonding("35:F4:59:D1:7A:03", onBondingSuccessCallback, o
         
-       
+        
-    Note 
        
       For P2P communication between 2 instances of the same application, the UUID can be hard-coded in your application. To retrieve the UUID of a Bluetooth device, use the BluetoothDevice object (in mobile and  wearable applications). The object has an array of UUIDs available for the device. For P2P communication between 2 instances of the same application, the UUID can be hard-coded in your application. To retrieve the UUID of a Bluetooth device, use the BluetoothDevice object (in mobile and wearable applications). The object has an array of UUIDs available for the device. 
        
      
 When the service has been successfully registered, the BluetoothServiceSuccessCallback interface (in mobile and  wearable applications) is triggered.
 
+     When the service has been successfully registered, the BluetoothServiceSuccessCallback interface (in mobile and wearable applications) is triggered.

Before establishing a connection, your device must be bonded with a peer device. For more information, see Creating a Bonding with a Bluetooth Device.

When a connection between 2 devices is established, the BluetoothSocketSuccessCallback interface (in mobile and wearable applications) on the client device and the onconnect event handler in the BluetoothServiceHandler interface (in mobile and wearable applications) on the server device are triggered.

To send data to the peer device, use the writeData() method:
```
 var somemsg = [3, 2, 1];
 var length = socket.writeData(somemsg);
 
```
-
To send data between the devices, use a socket mechanism with the BluetoothSocket interface (in mobile and wearable applications). The proper socket is received when the devices are connected.

To send data between the devices, use a socket mechanism with the BluetoothSocket interface (in mobile and wearable applications). The proper socket is received when the devices are connected.

To read the data in the server device, use the readData() method:
@@ -303,18 +272,13 @@ var length = socket.writeData(somemsg);
When an incoming message is received from the peer device, the onmessage event handler in the BluetoothSocket interface is triggered.

-
-
Communicating with a Health Source Device
- Hide -
-
+ +
Communicating with a Health Source Device

To increase the communication capabilities of your application, you must learn to communicate with a health source device:
1. Retrieve a BluetoothHealthProfileHandler object (in mobile and wearable applications):
```
var adapter = tizen.bluetooth.getDefaultAdapter();
+   Retrieve a BluetoothHealthProfileHandler object (in mobile and wearable applications): 
+   var adapter = tizen.bluetooth.getDefaultAdapter();
 var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
 var healthApplication = null, healthChannel = null;
  
@@ -328,9 +292,9 @@ function onSinkApp(app)
 
 healthProfileHandler.registerSinkApplication(4100, "testSinkApp", onSinkApp);
 
```
  -
  When the sink application is registered successfully, the BluetoothHealthApplicationSuccessCallback interface (in mobile and wearable applications) is invoked and you can get the registered sink application object.
2. Before establishing a connection, your device must be bonded with a health source device. For more information, see Creating a Bonding with a Bluetooth Device.
3. To connect to the health source device, use the connectToSource() method of the BluetoothHealthProfileHandler interface (in mobile and wearable applications):
  +
4. To connect to the health source device, use the connectToSource() method of the BluetoothHealthProfileHandler interface (in mobile and wearable applications):
```
 function onConnect(channel) 
 {
@@ -343,23 +307,19 @@ adapter.getDevice("35:F4:59:D1:7A:03", function(device)
                      healthProfileHandler.connectToSource(device, healthApplication, onConnect); 
                   });
 
```
  -
  When a connection between 2 devices is established, the success callback of the connectToSource() method is called. In addition, the onconnect event handler of the BluetoothHealthApplication instance (in mobile and wearable applications) is called, if the success callback attribute is set. You can get the connected BluetoothHealthChannel object (in mobile and wearable applications) from the callbacks.
5. To send data to the source device, use the sendData() method:
```
 var dataToSend = [0, 0, 0];
 var length = healthChannel.sendData(dataToSend);
```
  -
  The onmessage event handler in the BluetoothHealthChannelChangeCallback interface (in mobile and wearable applications) is called when the data is received, if you set a listener on the connected channel by using the setListener() method.
6. Disconnect from the health source device:
```
 healthChannel.close();
 
```
  When the channel is disconnected, the onclose event handler in the BluetoothHealthChannelChangeCallback interface is called.
-
-

+ @@ -384,4 +344,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - + \ No newline at end of file diff --git a/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm index cbda43b..bfc0da9 100644 --- a/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm @@ -16,15 +16,16 @@ -

+ @@ -32,26 +33,19 @@

- - - - - - - - - -

Note
The Communication API domain is supported in mobile applications only.

The communication tutorials demonstrate how to use the following features in creating Tizen Web applications:

Bluetooth: Managing a Bluetooth Device and Supporting RFCOMM and HDP
Demonstrates how you can manage Bluetooth and exchange data with a peer device.
Messaging: Managing and Receiving SMS, MMS, and Email Messages
Demonstrates how you can create, send, and read messages as well as manage messages in the message storage.
NFC: Managing an NFC Device and Detecting NFC Tags and Peers
Demonstrates how you can use NFC connectivity to exchange data with NFC tags and NFC-enabled devices.
Push: Receiving Push Notifications from a Push Server
Demonstrates how you can register your application, connect to the push service, and start receiving push notifications.
Secure Element: Accessing Secure Elements
Demonstrates how you can access and manage secure elements in a device.

The following tutorials apply in mobile applications only:

Messaging: Managing and Receiving SMS, MMS, and Email Messages
Demonstrates how you can create, send, and read messages as well as manage messages in the message storage.

diff --git a/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm index 37eddbc..2224f9a 100644 --- a/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm @@ -16,7 +16,7 @@ -

@@ -43,7 +43,6 @@

This tutorial demonstrates how you can create, send, and read messages as well as manage messages in the message storage.

@@ -74,21 +73,8 @@

In the Chatter task, we will walk through how to send, receive, and manage messages in your application.

- -

Show All
Hide All

- -

-
-
Creating and Sending Messages
- Hide -
-
+ +
Creating and Sending Messages

To create engaging applications with various messaging features, you must learn to create and send messages:
-
-
-
-
Selecting the SIM Card for Sending Messages
- Hide -
-
+ +
Selecting the SIM Card for Sending Messages

To add the dual SIM feature to your messaging application, you must learn to retrieve information on available SIM cards and select the SIM card to send SMS and MMS messages:
-
-
-
-
Managing Messages
- Hide -
-
+ +
Managing Messages

To create engaging applications with various messaging features, you must learn to work with messages in the message store:
-
-
-
-
Finding Folders
- Hide -
-
+ +
Finding Folders

To create engaging applications with various messaging features, you must learn how to find message folders:
1. To get all message folders, use the findFolders() method of the MessageStorage interface:
```
service.messageStorage.findFolders(filter, onFindFolders, onFindFoldersFail);
```
-
-
-
-
Synchronizing with the Server
- Hide -
-
+ +
Synchronizing with the Server

To create engaging applications with various messaging features, you must learn to load email messages and attachments and synchronize email:
1. To synchronize email with an external server:
  -
  -
-
-
-
Receiving Notifications on Message Storage Changes
- Hide -
-
+ +
Receiving Notifications on Message Storage Changes

To create engaging applications with various messaging features, you must learn to receive notifications when messages and message folders are added, updated, or removed:
-

+ diff --git a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm index 615b42a..8754265 100644 --- a/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm @@ -16,9 +16,9 @@ -

This tutorial demonstrates how you can use NFC connectivity to exchange data with NFC tags and NFC-enabled devices.

This tutorial demonstrates how you can use NFC connectivity to detect NFC tags and exchange data with NFC-enabled devices.

@@ -53,7 +54,8 @@ - +

Note
This feature is supported in mobile applications only.	The NFC API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. + The NFC API is supported on all Tizen Emulators.

@@ -70,23 +72,13 @@

Exchanging NDEF Data with Tags

Read NDEF messages and exchange them with tags.

Using NFC Card Emulation

Enable NFC card emulation and monitor the transaction taking place.

Using NFC Host-based Card Emulation

Handle NFC host-based card emulation events.

In the Contacts Exchanger task, we will walk through how to exchange contacts between devices over the NFC connection.

In the Contacts Exchanger task, we will walk through how to exchange contacts between devices over an NFC connection.

Show All
Hide All

Hide -

Learning how to enable or disable the NFC service is a basic NFC management skill:

@@ -95,32 +87,41 @@ - +

Note
The NFC API does not provide methods to directly enable or disable the NFC adapter of the device. When NFC is required, you must request a built-in Settings application to let the user enable or disable the NFC.	The NFC API does not provide methods to directly enable or disable the NFC adapter of the device. When NFC is required, you must request the built-in Settings application to let the user enable or disable the NFC.

To get the default NFC adapter, use the getDefaultAdapter() method and prepare the ApplicationControl object to request the NFC switching operation:
+

To get the default NFC adapter, use the getDefaultAdapter() method and prepare an ApplicationControl object (in mobile and wearable applications) to request the NFC switching operation:

var nfcSwitchAppControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/nfc", null, null, null,
                                                        [new tizen.ApplicationControlData("type", "nfc")]);
 var adapter = tizen.nfc.getDefaultAdapter();

Define the event listener for the launchAppControl() method:

function launchSuccess()
 {
-   console.log("NFC Settings application is successfully launched.");
+   console.log("NFC Settings application has successfully launched.");
+}
+function launchError(error) 
+{
+   alert("An error occurred: " + error.name + ". Please enable NFC through the Settings application.");
 }

Define the event handler for an application control, which implements the ApplicationControlDataArrayReplyCallback interface: +

Define the event handler for an application control, which implements the ApplicationControlDataArrayReplyCallback interface (in mobile and wearable applications):

var serviceReply =
 {
+   /* onsuccess is called when the launched application reports success */
    onsuccess: function(data)
    {
       if (adapter.powered)
       {
          console.log("NFC is successfully turned on.");
       }
-      /* Error handling */
    }
-};

If necessary, request launching the NFC Settings with nfcSwitchAppControl as parameter:

if (adapter.powered)
 {
@@ -132,18 +133,13 @@ else
    tizen.application.launchAppControl(nfcSwitchAppControl, null, launchSuccess, launchError, serviceReply);
 }

Hide -

+ +

Learning how to detect NFC tags and peer devices is a basic NFC management skill:

To get the default NFC adapter, use the getDefaultAdapter() method:
```
var nfcAdapter = tizen.nfc.getDefaultAdapter();
```

Define the event handlers for NFC tag detection using the NFCTagDetectCallback listener interface:

var setTagDetect =
+   Define the event handlers for NFC tag detection using the NFCTagDetectCallback listener interface (in mobile and wearable applications):
 var setTagDetect =
 {
    /* When an NFC tag is detected */
    onattach: function(nfcTag)
@@ -166,35 +162,25 @@ nfcAdapter.setTagListener(setTagDetect, tagFilter);
 
    To stop the tag detection, use the unsetTagListener() method:
  nfcAdapter.unsetTagListener();

NFC peers are detected similarly as NFC tags, except that the setPeerListener() method is used to register the NFCPeerDetectCallback listener interface, and the unsetPeerListener() method is used to stop the peer detection.

Hide -

NFC peers are detected similarly as NFC tags, except that the setPeerListener() method is used to register the NFCPeerDetectCallback listener interface (in mobile and wearable applications), and the unsetPeerListener() method is used to stop the peer detection.

+ +

Learning how to create NDEF messages is a basic NFC management skill:

To create an NDEF URI record, create an NDEFRecordURI interface instance and specify the URI parameter.

Additionally, you can create instances of the NDEFRecord, NDEFRecordText, or NDEFRecordMedia interfaces based on the record type to be created.
```
var newRecord = new tizen.NDEFRecordURI("https://www.tizen.org/");
```

Create an NDEFMessage interface instance:

+   To create an NDEF URI record, create an NDEFRecordURI interface instance (in mobile and wearable applications) and specify the URI parameter.
 Additionally, you can create instances of the NDEFRecord (in mobile and wearable applications), NDEFRecordText (in mobile and wearable applications), or NDEFRecordMedia (in mobile and wearable applications) interfaces based on the record type to be created.
 var newRecord = new tizen.NDEFRecordURI("https://www.tizen.org/");
+   Create an NDEFMessage interface instance (in mobile and wearable applications):
  var newMessage = new tizen.NDEFMessage(); 
    To add an NDEF record to an NDEF message, use the records attribute of the NDEFMessage interface:
  newMessage.records[0] = newRecord;

Hide -

+ +

Learning how to exchange NDEF data with peer devices is a basic NFC management skill:

Learning how to exchange NDEF messages is a basic NFC management skill:

To receive NDEF messages from a peer device, use the setReceiveNDEFListener() method of the NFCPeer interface.

The setReceiveNDEFListener() method registers the NDEFMessageReadCallback listener interface, which is invoked when an NDEF message from a peer device is read.

+   To receive NDEF messages from a peer device, use the setReceiveNDEFListener() method of the NFCPeer interface (in mobile and wearable applications).
The setReceiveNDEFListener() method registers the NDEFMessageReadCallback listener interface (in mobile and wearable applications), which is invoked when an NDEF message from a peer device is read.
  /* NDEFMessageReadCallback listener */
 function readMessage(message)
 {
@@ -208,17 +194,12 @@ var newMessage = new tizen.NDEFMessage();
 
 Peer.sendNDEF(newMessage);

Hide -

+ +

Learning how to exchange NDEF data with tags is a basic NFC management skill:

To read data from an NFC tag, use the readNDEF() method of the NFCTag interface.

The readNDEF() method registers the NDEFMessageReadCallback listener interface, which is invoked when an NDEF message is read.

+   To read data from an NFC tag, use the readNDEF() method of the NFCTag interface (in mobile and wearable applications).
 The readNDEF() method registers the NDEFMessageReadCallback listener interface (in mobile and wearable applications), which is invoked when an NDEF message is read.
  /* NDEFMessageReadCallback listener */
 function readMessage(message)
 {
@@ -237,21 +218,14 @@ function writeCallback()
 {
    console.log("Success!");
 }
-Tag.writeNDEF(newMessage, writeCallback);
 You can use the transceive() method to transfer raw data, as a byte array, to an NFC tag without knowing the underlying details of the tag.
+Tag.writeNDEF(newMessage, writeCallback);

You can use the transceive() method to transfer raw data as a byte array to an NFC tag without knowing the underlying details of the tag.

- Hide -

+ +

Learning how to enable or disable the NFC card emulation and detect Secure Element transactions is a basic NFC management skill:

Declare the required variables and obtain the NFCAdapter object using the getDefaultAdapter() method of the NFCManager interface: +

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

 var adapter = tizen.nfc.getDefaultAdapter();
 var modeListenerId = 0, aseListenerId = 0, transListenerId = 0;
@@ -260,7 +234,7 @@ var modeListenerId = 0, aseListenerId = 0, transListenerId = 0;
  modeListenerId = adapter.addCardEmulationModeChangeListener(function(mode)
 {
-   if(mode === "ALWAYS_ON")
+   if (mode === "ALWAYS_ON")
    {
       console.log("We are ready to go now");
    }
@@ -293,13 +267,105 @@ adapter.removeCardEmulationModeChangeListener(modeListenerId);
 adapter.cardEmulationMode = "OFF";

- +

Learning how to detect NFC HCE (host-based card emulation) events and manage AID (Application ID) is a basic NFC management skill:

Declare the required variables and obtain the NFCAdapter object (in mobile and wearable applications) using the getDefaultAdapter() method of the NFCManager interface (in mobile and wearable applications).
+
To enable NFC card emulation, change the value of the cardEmulationMode attribute.
+
```
+var hceListenerId = 0;
+var adapter = tizen.nfc.getDefaultAdapter();
+
+adapter.cardEmulationMode = "ALWAYS_ON";
+
```

Use the addHCEEventListener() method of the NFCAdapter interface to register a listener to detect the HCE event: +

+hceListenerId = adapter.addHCEEventListener(function(event_data)
+{
+   if (event_data.eventType =="ACTIVATED")
+   {
+     console.log("HCE activated");
+   }
+   else if (event_data.eventType =="DEACTIVATED")
+   {
+     console.log("HCE deactivated");
+   }
+   else if (event_data.eventType =="APDU_RECEIVED")
+   {
+     console.log("APDU received");
+   }
+});
+

Use the sendHostAPDUResponse() method of the NFCAdapter interface to send a host APDU (Application Protocol Data Unit is defined in the ISO/IEC 7816-4 specification) response to a Contactless Front-end: +

+try 
+{
+   var successCB = function() 
+   {
+     console.log("Sending APDU response was successful.");
+   };
+
+   var errorCB = function() 
+   {
+     console.log("Sending APDU response failed.");
+   };
+
+   var apdu_response= [0x00,0xA4,0x04,0x00,0x04,0x11,0x12, 0x13, 0x14];
+   adapter.sendHostAPDUResponse(apdu_response, successCB, errorCB);
+} 
+catch (err) 
+{
+   console.log(err.name + ":" + err.message);
+}
+

To register an AID for a specific category and secure element type, use the registerAID() method of the NFCAdapter interface: +

+try 
+{
+   var aid = "ABC0012345";
+   adapter.registerAID("HCE", aid, "PAYMENT")
+} 
+catch (err) 
+{
+   console.log(err.name + ":" + err.message);
+}
+

To retrieve the registered AIDs for a specific category and secure element type, use the getAIDsForCategory() method of the NFCAdapter interface: +

+try 
+{
+   var successCallback = function(aid_datas) 
+   {
+      for (var i = 0 ; i < aid_datas.length ; i++)
+      {
+         console.log("SE Type is " + aid_datas[i].type);
+         console.log("AID is " + aid_datas[i].aid);
+         console.log("readonly : " + aid_datas[i].readOnly);
+      }
+   };
+
+   var errorCallback = function(error) 
+   {
+     console.log("getAIDsForCategory failed.");
+   };
+
+   adapter.getAIDsForCategory("PAYMENT", successCallback, errorCallback);
+} 
+catch (err) 
+{
+   console.log(err.name + ":" + err.message);
+}
+

Remove the registered listeners when they are no longer necessary, and disable NFC card emulation: +
```
+adapter.removeHCEEventListener(hceListenerId);
+adapter.cardEmulationMode = "OFF";
+
```

+ + diff --git a/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm index c222612..4eb8064 100644 --- a/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm @@ -16,9 +16,9 @@ -

This tutorial demonstrates how you can register your application, connect to the push service, and start receiving push notifications.

@@ -46,7 +46,9 @@ Note - This feature is supported in mobile applications only. + The Push API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. +

The Push API is supported on all Tizen Emulators.

+ @@ -58,20 +60,7 @@

Receiving Push Notifications

Connect to the push service and start receiving push notifications.

Show All
Hide All

- -

-
-
Registering to the Push Service
- Hide -
-
+
Registering to the Push Service

To receive push notifications, you must learn how to register your application to the push service:
1. Register the application for the service with the registerService() method:
```
tizen.push.registerService(service, registerSuccessCallback, errorCallback);
```
  If the registration is successful, the registerSuccessCallback() event handler returns the registration ID.
-
-
-
-
Receiving Push Notifications
Hide -
-
+ +
Receiving Push Notifications

To take advantage of the push technology, you must learn how to connect to the push service and receive push notifications:
1. Request the push service connection with the connectService() method:
```
tizen.push.connectService(notificationCallback, errorCallback);
```
  If the connection is established, you start receiving push notifications.
-
-

+ diff --git a/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm index a1b8f78..c5f04ca 100644 --- a/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm @@ -16,9 +16,10 @@ -

This tutorial demonstrates how you can access and manage secure elements in a device.

@@ -48,7 +49,8 @@ Note - This feature is supported in mobile applications only. + The Secure Element API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices. +

The Secure Element API is supported on all Tizen Emulators.

@@ -62,24 +64,11 @@

Closing Sessions and Channels

Close specific channels and sessions, or all channels and sessions.

Show All
Hide All

- -

-
-
Managing Secure Elements
-Hide -
-
+
Managing Secure Elements

To use secure elements in your application, you must learn to retrieve them and track changes in them:
1. To retrieve all the available secure element readers, use the getReaders() method of the SEService interface. The method registers the ReaderArraySuccessCallback interface, which is invoked when the list of available secure element readers has been successfully retrieved. +
2. To retrieve all the available secure element readers, use the getReaders() method of the SEService interface (in mobile and wearable applications). The method registers the ReaderArraySuccessCallback interface (in mobile and wearable applications), which is invoked when the list of available secure element readers has been successfully retrieved.
```
 function success(readers)
 {
@@ -93,8 +82,8 @@ tizen.seService.getReaders(success, function(err) {/* Error handling */});
 
```
3. To receive reader change notifications, use the registerSEListener() method of the SEService interface:
  -
  1. Define a listener using the SEChangeListener interface:
```
+   
+      Define a listener using the SEChangeListener interface (in mobile and wearable applications):
  var setSEChange =
 {
    onSEReady: function(reader)
@@ -116,18 +105,12 @@ var seListener = tizen.seService.registerSEListener(setSEChange);
 tizen.seService.unregisterSEListener(seListener);
 
    
    
-  
```
-

- Hide -

- + +

To use secure elements in your application, you must learn to open sessions and channels:

To open a session, use the openSession() method of the Reader interface. The method registers the SessionSuccessCallback interface, which is invoked when a session on a specific reader is opened.

+   To open a session, use the openSession() method of the Reader interface (in mobile and wearable applications). The method registers the SessionSuccessCallback interface (in mobile and wearable applications), which is invoked when a session on a specific reader is opened.
  function successCB(session)
 {
    console.log("A session is open successfully");
@@ -140,8 +123,8 @@ function errorCB(err)
 reader.openSession(successCB, errorCB);
 
  
    To open a channel within a session:
-   
-      Open a basic channel with the openBasicChannel() method of the Session interface. The method registers the ChannelSuccessCallback interface, which is invoked when a channel is opened to communicate with a specific applet.
 +   
+      Open a basic channel with the openBasicChannel() method of the Session interface (in mobile and wearable applications). The method registers the ChannelSuccessCallback interface (in mobile and wearable applications), which is invoked when a channel is opened to communicate with a specific applet.
  function successCB(channel)
 {
    if (channel.isBasicChannel)
@@ -164,22 +147,16 @@ session.openLogicalChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0x
       
     
   
-

- Hide -

+ +

To use secure elements in your application, you must learn to transmit application protocol data units (APDU) to secure elements:

To transmit an APDU command to a secure element, use the transmit() method of the Channel interface.

+   To transmit an APDU command to a secure element, use the transmit() method of the Channel interface (in mobile and wearable applications).
  /* The APDU command is defined in ISO7816-4 */  
 channel.transmit(command, successCB, errorCB);
 
  
-   The transmit() method registers the TransmitSuccessCallback interface, which is invoked when a command has been successfully transmitted:
 +   The transmit() method registers the TransmitSuccessCallback interface (in mobile and wearable applications), which is invoked when a command has been successfully transmitted:
  function successCB(response)
 {
    console.log("An APDU is transmitted successfully. The response is " + response);
@@ -190,35 +167,25 @@ function errorCB(err)
 }

- Hide -

+ +

To use secure elements in your application, you must learn to close sessions and channels:

To close a specific channel, use the close() method of the Channel interface:

+   To close a specific channel, use the close() method of the Channel interface (in mobile and wearable applications):
  channel.close();
 
  
-   To close all channels within a specific session, use the closeChannels() method of the Session interface:
 +   To close all channels within a specific session, use the closeChannels() method of the Session interface (in mobile and wearable applications):
  session.closeChannels();
 
  
      To close a specific session, use the close() method of the Session interface:
  session.close();
 
  
-   To close all session for a specific reader, use the closeSessions() method of the Reader interface:
 +   To close all session for a specific reader, use the closeSessions() method of the Reader interface (in mobile and wearable applications):
  reader.closeSessions();

+ diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm index e19ec52..bdc3def 100644 --- a/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm +++ b/org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm @@ -16,7 +16,7 @@ -

@@ -41,9 +41,9 @@

This task, based on the BluetoothChat sample delivered with the Tizen SDK, demonstrates how you can use the Bluetooth API (in mobile and wearable applications) to create a chat between 2 devices. For more information on the sample functionality and creating the sample with the full source code, see BluetoothChat.

This task consists of the following parts:

Defining the Application Layout defines how to create the application screens.
Initializing the Application defines how to initialize the application.
Creating the Connection defines how to set up a bluetooth adapter, register a chat server, and connect devices to the server.

The following figure shows the main screens of the application.

Figure: BluetoothChat screens

BluetoothChat screens

index.html Source File -

The main screen displays option buttons. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.
```
@@ -120,7 +120,7 @@ $('#clientButton').on('click', function(event)
 
```

templates/keyboard_page.tpl Source File -

When the user taps the Create server or Join server button, a keyboard is displayed and the user can enter the server or client name.

@@ -176,7 +176,7 @@ $('#keyboard-ok-button').on('click', function(event)
 Defining the Choose Your Server Screen 
 
 templates/choose_page.tpl Source File
-The content section of the Choose your server screen displays a list (in mobile or wearable applications) of available servers.
+The content section of the Choose your server screen displays a list (in mobile or wearable applications) of available servers.
  <div data-role="page" id="choose">
    <!--Header section-->
@@ -280,7 +280,7 @@ checkSendButtonState: function Ui_checkSendButtonState()
   
   
   app.server.js Source File
-  Before pairing devices, you must check whether Bluetooth is enabled. The default Bluetooth adapter is retrieved using the getDefaultAdapter() method.
+  Before pairing devices, you must check whether Bluetooth is enabled. The default Bluetooth adapter is retrieved using the getDefaultAdapter() method.
  this.adapter = tizen.bluetooth.getDefaultAdapter();
 
@@ -327,7 +327,7 @@ registerServer: function Server_registerServer()
   Connecting Devices 
   
   app.client.model.js Source File
-  
+  
   
   After defining the default Bluetooth adapter and setting up the server, you can select the requested server and bond the devices using the connectToService() method.
   @@ -407,4 +407,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 
 
 
-
+
\ No newline at end of file
diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm
index 0f90b38..9ac33ae 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		
 	
@@ -43,7 +43,7 @@
   Task: Chatter 
   This task, based on the Chatter sample delivered with the Tizen SDK, demonstrates how you can use the Messaging API to send, receive, and manage your messages. For more information on the sample functionality and creating the sample with the full source code, see Chatter. 
   This task consists of the following parts: 
-   
+   
    Defining the Application Layout defines how to create the application screens.
    Initializing the Application defines how to initialize the application.
    Managing Messages defines how to retrieve message recipient information and group it into a single list.
@@ -57,7 +57,7 @@
 
   The following figure shows the main screens of the application. 
   Figure: Chatter screens 
-   
+   
 
   
   Defining the Main Screen 
@@ -253,7 +253,7 @@ prepareMessages: function(callback)
   The message grouping functionality is implemented in the app.model.js file.
    
   Creating the Group
-  
+  
   
   The groupMessages() method is used to filter the messages according to their status.
   @@ -347,7 +347,7 @@ getGroupObject: function()
   Getting the Contact List
    
    app.model.js Source File
-   To get the contact list from the device memory, get the default address book using the getDefaultAddressBook() method.
+   To get the contact list from the device memory, get the default address book using the getDefaultAddressBook() method.
 	  this.addressBook = tizen.contact.getDefaultAddressBook();
  
diff --git a/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm b/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm
index 967e466..fd4511b 100644
--- a/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		
 	
@@ -44,7 +44,7 @@
   This task, based on the ContactsExchanger sample delivered with the Tizen SDK, demonstrates how you can use the NFC API to exchange contacts between devices. For more information on the sample functionality and creating the sample with the full source code, see ContactsExchanger.
  
   This task consists of the following parts: 
-   
+   
    Defining the Application Layout defines how to create the application screens.
    Initializing the Application defines how to initialize the application.
    Setting up the NFC Connection defines how to set up and manage the NFC connection.
@@ -59,12 +59,12 @@
   
   The following figure shows the main screens of the application. 
   Figure: ContactsExchanger screens 
-   
+   
   
 Defining the Main Screen 
    
    index.html Source File
-   
+   
 The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.
  <!--Main screen layout-->	
@@ -78,7 +78,7 @@
     <!--Content section-->	
    <div data-role="content" id="content-start">
-      <!-- Dynamic content -->
+      <!--Dynamic content-->
    </div>
 </div>
 
@@ -86,7 +86,7 @@
  
  
    app.ui.js Source File
-   The loadStartPage() method is called to start the screen initialization. The method handles 2 scenarios: if the user has defined the default contact, the loadStartContent() method is executed, and the user gets access to the application. Otherwise, the user is prompted to define the default contact.
+   The loadStartPage() method is called to start the screen initialization. The method handles 2 scenarios: if the user has defined the default contact, the loadStartContent() method is executed, and the user gets access to the application. Otherwise, the user is prompted to define the default contact.
  loadStartPage: function ui_loadStartPage() 
 {
@@ -158,7 +158,7 @@ loadStartPage: function ui_loadStartPage()
   Defining the Transfer Screen
   The transfer screen is simply a countdown screen to give the user 10 seconds to communicate with another device or a tag.
   app.ui.js Source File
-  
+  
 The transfer page is displayed shortly when the user taps the Read from card, Write to card, or Communicate with another device button on the main screen.
  $.mobile.changePage('#transfer');
@@ -331,7 +331,7 @@ startNFC: function nfc_startNFC()
 Reading an NDEF Message from an NFC Tag
   
   app.nfc.card.js Source File
-  
+  
 When the user taps the Read from card button on the main screen, the transfer page is displayed. The setTagListener() method  of the NFCAdapter interface adds an event listener to detect whether the tag is properly attached and the NDEF message valid.
  setTagDetectRead: function nfc_card_setTagDetectRead() 
@@ -387,7 +387,7 @@ fillRecordInfo: function nfc_fillRecordInfo(record)
 Writing an NDEF Message to the NFC Tag 
   
   app.nfc.card.js Source File
-  
+  
   When the user taps the Write to card button on the main screen, the transfer page is displayed, and the setTagDetectWrite() method is called. The setTagListener() method adds an event listener to detect whether the tag is successfully attached.
  setTagDetectWrite: function nfc_card_setTagDetectWrite() 
@@ -431,7 +431,7 @@ sucTagWriteAttach: function nfc_card_sucTagWriteAttach(tag)
 The data exchange functionality is implemented in the app.nfc.peer.js file.
   
   Sending Information
-When the user taps the Communicate with another device button on the main screen, the transfer page  is displayed. The setPeerListener() method of the NFCAdapter interface adds an event listener to detect whether the peer is properly attached.
+When the user taps the Communicate with another device button on the main screen, the transfer page  is displayed. The setPeerListener() method of the NFCAdapter interface adds an event listener to detect whether the peer is properly attached.
  setTargetDetect: function nfc_peer_setTargetDetect() 
 {
diff --git a/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm
index 0e2e714..113b828 100644
--- a/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
     
          
     
@@ -48,7 +48,6 @@
 
 
 Content: Discovering Multimedia Content (Such as Images, Videos, or Music)
-
 
 This tutorial demonstrates how you can retrieve content and manage items in your device local storage.
 
@@ -67,34 +66,21 @@
   Warm-up
   Become familiar with the Content API basics by learning about:
   
-   Browsing Content Browse and search for directories and items in directories.
-   Managing Content View and update item details.
-   Receiving Notifications on Content Changes Receive notifications when a content item is added, updated, or deleted.
+   Browsing Content Browse and search for directories and items in directories.
+   Managing Content View and update item details.
+   Receiving Notifications on Content Changes Receive notifications when a content item is added, updated, or deleted.
    Playlist
    
-   Creating a Playlist Create a new playlist and add items. Create a new playlist based on an existing playlist.
-	Managing Playlists Retrieve all playlists. Remove a playlist.
-	Managing Playlist Items Add, retrieve, and remove items. Change item position and order.
+   
Creating a Playlist Create a new playlist and add items. Create a new playlist based on an existing playlist.
+	Managing Playlists Retrieve all playlists. Remove a playlist.
+	Managing Playlist Items Add, retrieve, and remove items. Change item position and order.
 	
   
   
   Task
   In the Media Content task, we will walk through how to browse and manage the media directories in your application.
-            
- 
-        
-            Show All
-            Hide All
-        
-    
-
-    
-        
-            
- Browsing Content
- Hide
-            
-            
+     
+ Browsing Content
 			
   Learning how to browse and search for content directories and content items in directories is a basic content management skill:
   
@@ -126,19 +112,13 @@ manager.find(onContentItemArraySuccess, null, null, filter);
        Note
       
       
-       To retrieve a specific set of content items, you can specify a content directory (with the directory ID), filter, and sorting order for the search operation through the directoryId, filter and sortMode parameters (for attributes supported in the filter, see Content Filter Attributes). In this example, the directory ID is set to null (which means that all directories are searched), the filter retrieves all content items whose type is VIDEO, and no sorting order is defined (which means that the default sorting order is used). 
+       To retrieve a specific set of content items, you can specify a content directory (with the directory ID), filter, and sorting order for the search operation through the directoryId, filter and sortMode parameters (for attributes supported in the filter, see Content Filter Attributes). In this example, the directory ID is set to null (which means that all directories are searched), the filter retrieves all content items whose type is VIDEO, and no sorting order is defined (which means that the default sorting order is used). 
       
      
      
   
-  
-        
-        
-            
- Managing Content
- Hide
-            
-            
+  
+ Managing Content
 
   Learning how to view content details and update them is a basic content management skill:
   
@@ -182,14 +162,8 @@ tizen.filesystem.resolve("images/photo.jpg", function(file)
                          });
 
   
-  
-        
-        
-            
- Receiving Notifications on Content Changes
- Hide
-            
-            
+ 
+ Receiving Notifications on Content Changes
 
   To create engaging applications with various content features, you must learn to receive notifications when content items are added, updated, or removed:
   
@@ -222,18 +196,12 @@ tizen.content.setChangeListener(listener);
 tizen.content.unsetChangeListener();
 
 
   
-

To add items to a playlist: @@ -352,7 +308,7 @@ tizen.content.getPlaylists(function(playlists)

function getSuccess(items)
 {
    console.log("Playlist items:");
-   for(var i = 0; i < items.length; ++i)
+   for (var i = 0; i < items.length; ++i)
    {
       console.log("[" + i + "]: name:" + items[i].name);
    }
@@ -406,12 +362,7 @@ myPlaylist.setOrder(newOrder, setOrderSuccess);

- - -

+ diff --git a/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm index 0aa2148..288e265 100644 --- a/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm @@ -16,14 +16,14 @@ -

Related Info

@@ -37,12 +37,9 @@

Content: Discovering Multimedia Content (Such as Images, Videos, or Music)
Demonstrates how you can receive information about content folders and items stored on external and internal storages and find and update the content of a media item.
Download: Downloading Remote Objects by HTTP Request
Demonstrates how you can manage and monitor downloads.
Exif: Manipulating EXIF Data from JPEG Files
Demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.

The following tutorials apply in mobile applications only:

Exif: Manipulating EXIF Data from JPEG Files
Demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.

diff --git a/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm index 012f09e..aa5aa77 100644 --- a/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm @@ -16,7 +16,7 @@ -

@@ -39,7 +39,6 @@

This tutorial demonstrates how you can manage and monitor downloads.

@@ -59,33 +58,20 @@

Become familiar with the Download API basics by learning about:

Managing Downloads
Start, pause, and cancel downloading a file.
Checking the Download State and Information
Check whether a download is currently ongoing, failed, paused, or completed, and retrieve the download information.
Managing Downloads
Start, pause, and cancel downloading a file.
Checking the Download State and Information
Check whether a download is currently ongoing, failed, paused, or completed, and retrieve the download information.

In the Download Manager task, we will walk through how to download URL content to the device storage.

Show All
Hide All

- -

-
-
Managing Downloads
-Hide -
-
+
Managing Downloads

To provide the user access to Internet resources, you must learn how to manage download operations:
1. Create an instance of the DownloadRequest interface (in mobile and wearable applications) that defines the URL of the file to be downloaded:
```
 var downloadRequest = new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt", "downloads");
-
```
  The final parameter (downloads) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in the Filesystem API (in mobile and wearable applications). The folder is not an absolute folder location, but instead uses a virtual root location (downloads is the default download location in the virtual root).
2. It is not possible to download anything when the device is not connected to a network. To check whether any connection is available, use the getPropertyValue() method of the SystemInfo interface (in mobile and wearable applications):
```
 tizen.systeminfo.getPropertyValue("NETWORK", function(networkInfo)
@@ -134,7 +120,7 @@ var listener =
 downloadId = tizen.download.start(downloadRequest, listener);
 
```
  The start() method returns a unique identifier for the download operation.
3. During the download: -
  -
-
-
-
Checking the Download State and Information
-Hide -
-
+ +
Checking the Download State and Information

To provide the user access to Internet resources, you must learn how to check the state of a download operation and retrieve relevant information:
-
-

+ diff --git a/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm index e775dba..b45e11d 100644 --- a/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm @@ -16,9 +16,9 @@ -

This tutorial demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.

@@ -48,7 +48,8 @@ Note - This feature is supported in mobile applications only. + The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. +

The Exif API is supported on all Tizen Emulators.

@@ -62,21 +63,7 @@

Copying the EXIF Data

Copy the EXIF data from one JPEG file to another.

Show All
Hide All

- -

-
-
Loading the EXIF Data
- Hide -
-
+
Loading the EXIF Data

Learning how to retrieve EXIF data from JPEG files is a useful content management skill:
1. With a valid File object, use the getExifInfo() method of the ExifManager interface and pass the URI to the method.
  +
2. With a valid File object, use the getExifInfo() method of the ExifManager interface (in mobile and wearable applications) and pass the URI to the method.
```
function onSuccess(exifInfo)
 {
@@ -109,11 +96,11 @@ function onError(error)
 }
 
 tizen.exif.getExifInfo(fileURI, onSuccess, onError);
```
  -
  With a valid exifInfo object, you can access various ExifInformation attributes, such as width, height, orientation, and flash.
  +
  With a valid exifInfo object, you can access various ExifInformation attributes (in mobile and wearable applications), such as width, height, orientation, and flash.
3. To retrieve an EXIF thumbnail of the image: -
  1. Resolve the input JPEG file: +
    1. Resolve the input JPEG file:
      var fileURI = ""; @@ -145,20 +132,13 @@ function resolveSuccess(file) }
  -
-
-
-
Adding EXIF Data
- Hide -
-
+ +
Adding EXIF Data

Learning how to add EXIF data to JPEG files is a useful content management skill:
1. Create a new ExifInformation object:
  +
2. Create a new ExifInformation object (in mobile and wearable applications):
```
var myNewExif = new tizen.ExifInformation();
 myNewExif.userComment = "Photo taken on Charles Bridge in Prague";
@@ -184,7 +164,7 @@ tizen.filesystem.resolve("images/image_without_exif.jpg", resolveSucce
 
 
```
3. When you have a valid URI to the file, set it in the myNewExif object and call the saveExifInfo() method of the ExifManager interface:
  +
4. When you have a valid URI to the file, set it in the myNewExif object and call the saveExifInfo() method of the ExifManager interface (in mobile and wearable applications):
```
function onSaveSuccess()
 {
@@ -201,19 +181,12 @@ tizen.exif.saveExifInfo(myNewExif, onSaveSuccess, onSaveError);
```
-
-
-
-
Updating the EXIF Data
- Hide -
-
+ +
Updating the EXIF Data

Learning how to update EXIF data in JPEG files is a useful content management skill:
1. To update the EXIF data, load the ExifInformation object from the file and change the values of the object properties.
  +
2. To update the EXIF data, load the ExifInformation object (in mobile and wearable applications) from the file and change the values of the object properties.
  
  You can remove information from the file by setting the property to null.
```
function getSuccess(exifInfo)
@@ -231,7 +204,7 @@ tizen.filesystem.resolve("images/photo.jpg", function(file)
    tizen.exif.getExifInfo(file.toURI(), getSuccess);
 });
```
3. After updating the property values, use the saveExifInfo() method of the ExifManager interface to save the changes to the file: +
4. After updating the property values, use the saveExifInfo() method of the ExifManager interface (in mobile and wearable applications) to save the changes to the file:
```
function saveSuccess(exifInfo)
 {
@@ -241,19 +214,12 @@ tizen.filesystem.resolve("images/photo.jpg", function(file)
 tizen.exif.saveExifInfo(exifInfo, saveSuccess);
```
-
-
-
-
Copying the EXIF Data
- Hide -
-
+
Copying the EXIF Data

Learning how to copy EXIF data between JPEG files is a useful content management skill:
1. Get the ExifInformation object and resolve the output file, and then change the sourceExifInfo.uri attribute to point to the output JPEG file:
  +
2. Get the ExifInformation object (in mobile and wearable applications) and resolve the output file, and then change the sourceExifInfo.uri attribute to point to the output JPEG file:
```
var sourceExifInfo = null;
 
@@ -277,7 +243,7 @@ function onSuccess(exifInfo)
 
 tizen.exif.getExifInfo(fileURI, onSuccess);
```
3. Use the saveExifInfo() method of the ExifManager interface to save the changes in the output JPEG file: +
4. Use the saveExifInfo() method of the ExifManager interface (in mobile and wearable applications) to save the changes in the output JPEG file:
```
 function onSaveSuccess()
@@ -299,12 +265,7 @@ function resolveOutSuccess(outFile)
 
```
-
-

- -

+ diff --git a/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm b/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm index 7fbf944..97d938f 100644 --- a/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm +++ b/org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm @@ -16,7 +16,7 @@ -

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

This task, based on the DownloadManager sample delivered with the Tizen SDK, demonstrates how you can use the Download API (in mobile and wearable applications) to asynchronously download URL content to the device storage. For more information on the sample functionality and creating the sample with the full source code, see DownloadManager.

This task consists of the following parts:

Defining the Application Layout defines how to create the application screens.

The following figure shows the main screens of the application.

Figure: DownloadManager screens

DownloadManager screens

js/app.ui.templateManager.js Source File -

The Template Manager loads the template files to the cache.

@@ -350,7 +350,7 @@ $('#main').on( 'tap', '.download-navigation-button', fun
 });

js/app.model.js Source File -

If the request is in the play state, and the user clicks the button, the download process is paused. The user interface is notified about the pause by the callback, provided while starting the download process.

 pauseDownloading: function Model_pauseDownloading(downloadId) 
diff --git a/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm b/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm
index 603bbf6..5f7bfd0 100644
--- a/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		 
 	
@@ -41,9 +41,9 @@
 
 
   Task: Media Content 
-  This task, based on the MediaContent sample delivered with the Tizen SDK, demonstrates how you can use the Content API (in mobile and wearable applications) to manage media files in your application. For more information on the sample functionality and creating the sample with the full source code, see Media Content. 
+  This task, based on the MediaContent sample delivered with the Tizen SDK, demonstrates how you can use the Content API (in mobile and wearable applications) to manage media files in your application. For more information on the sample functionality and creating the sample with the full source code, see Media Content. 
   This task consists of the following parts: 
-   
+   
    Defining the Application Layout defines how to create the application screens. 
    Initializing the Application defines how to initialize the application.
    Browsing Content defines how to search for media directories and items. 
@@ -52,15 +52,15 @@
   This sample is a fully functional application which searches for and browses media directories and media item files. The media item files can be viewed and updated. 
   
   Defining the Application Layout 
-  The Content sample application layout consists of 3 screens: the main screen displays a list of storage types and folders, the item screen displays a list of media items, and the Details screen displays the media item details. 
+  The MediaContent sample application layout consists of 3 screens: the main screen displays a list of storage types and folders, the item screen displays a list of media items, and the Details screen displays the media item details. 
 
   The following figure shows the main screens of the application. 
-  Figure: Content screens 
-   
+  Figure: MediaContent screens 
+   
   Defining the Main Screen 
    
    index.html Source File 
-     
+     
       The main screen of the application displays a list of storage types and folders containing media items. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen. 
       <!--Main screen layout-->	
@@ -71,7 +71,7 @@
    </div>
  
       The actual content section of the screen is defined within a <div> element whose data-role attribute is set to content.
-The section has a list widget displaying the storage types, and a list divider for the folder list (whose list items are defined in the main.js file).	 
+The section has a list component displaying the storage types, and a list divider for the folder list (whose list items are defined in the main.js file).	 
          <!--Content section-->	
    <div data-role="content">
@@ -91,14 +91,14 @@
    </div>
 </div>
 
-  Defining the Content Screen 
+  Defining the Folder Screen 
    
    index.html Source File 
-Similarly as the main screen, the content screen contains a list widget displaying radio buttons (defined within an <input> element whose type attribute is set to radio) for the content types and a list divider for the item list (whose list items are defined in the main.js file).
+
Similarly as the main screen, the folder screen contains a list component displaying radio buttons (defined within an <input> element whose type attribute is set to radio) for the content types and a list divider for the item list (whose list items are defined in the main.js file).
 
 
      -<!--Content screen layout-->
+<!--Folder screen layout-->
 <div data-role="page" id="items">
    <div data-role="header" data-position="fixed">
       <h1 id="items-title"></h1>
@@ -130,7 +130,7 @@
 </div>
  
      
 	
-	The Details screen content section contains a list widget, and every list item is defined in the main.js file.
+	The Details screen content section contains a list component, and every list item is defined in the main.js file.
  
 
  Initializing the Application
@@ -151,7 +151,7 @@
   Retrieving Media Directories 
    
    main.js Source File 
-     
+     
      The Content API uses the same ContentManager interface instance (in mobile and wearable applications) for all content-related functionalities. Retrieve the ContentManager interface instance using the tizen global object.
 gMediaSource = tizen.content; 
      Use the getFolders() method to retrieve the list of directories present in all storage types. The showFolderList() method is called to perform the actual operation of retrieving the directories, based on the selection made in the Storage type list.
 In the example below, all the directories in the device containing media items are retrieved.
 function getFolders(storageType)
 {
@@ -207,7 +207,7 @@
   Retrieving Media Items 
    
    main.js Source File 
-     
+     
      To get the media item list, use the getFolderItems() method. The method takes 2 attributes: folderId, which takes the folder ID whose media item list is to be displayed and mediaType, which specifies the media type (all, image, audio, or video).
 The getFolderItems() method is called when the user clicks a specific directory on the main screen, or changes the item type selection with the radio buttons on the item screen.
 function getFolderItems(folderId, mediaType)
 { 
      The find() method is called to search and retrieve the required media items. After a successful search, the success event handler either updates the item list on the item screen with the showItemList() method (if the item screen is already displayed), or moves to the item screen (which means that the retrieved item list is automatically displayed).
 diff --git a/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm
index d62b9f0..44b3fbd 100644
--- a/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
     
-        
+         
     
     
         Content
@@ -30,14 +30,14 @@
         Related Info
         
              Archive Guide
-			 Archive API for Mobile Web			 
+			 Archive API for Mobile Web	
+			 Archive API for Wearable Web			 
         
     
 
 
 
 Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation
-
 
 This tutorial demonstrates how you can create, browse, and extract ZIP archives.
 
@@ -47,7 +47,8 @@
      Note 
      
      
-     This feature is supported in mobile applications only. 
+     The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
+The Archive API is supported on all Tizen Emulators. 
      
     
   
@@ -60,25 +61,11 @@
  Extracting Files from an Archive Extract all files from an archive, or extract a selected file.
 
 
-
-        
-            Show All
-            Hide All
-        
-    
-
-    
-
-        
-            
-                Reading the Content of an Archive
-                Hide
-            
-            				
+                Reading the Content of an Archive
 
 Opening an archive and accessing a list of its members is a basic archive management skill:
 
-To access the archive file, use the open() method of the ArchiveManager interface. The provided callback function receives an ArchiveFile object.
+
To access the archive file, use the open() method of the ArchiveManager interface (in mobile and wearable applications). The provided callback function receives an ArchiveFile object (in mobile and wearable applications).
 
 var myArchive = null;
 function openSuccess(arch)
@@ -112,20 +99,13 @@ myArchive.getEntries(listSuccess);
 archive.close();

- -

- Hide -

Creating an archive and adding files to it is a basic archive management skill:

To create the archive file, use the open() method of the ArchiveManager interface and set the mode as w:
+
To create the archive file, use the open() method of the ArchiveManager interface (in mobile and wearable applications) and set the mode as w:
```
 tizen.archive.open("downloads/new_archive.zip", "w", createSuccess);
```
@@ -150,30 +130,23 @@ function createSuccess(archive)

- -

- Hide -

+ +

Extracting a file from an archive is a basic archive management skill:

-
To access an archive file, use the open() method of the ArchiveManager interface. The "r" mode is suitable for extracting from the archive.
+
To access an archive file, use the open() method of the ArchiveManager interface (in mobile and wearable applications). The "r" mode is suitable for extracting from the archive.
```
 tizen.archive.open("downloads/some_archive.zip", "r", openSuccess, openError);
```
To extract files: -

- - - -

diff --git a/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm index ab7e233..cca6685 100644 --- a/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm @@ -16,7 +16,7 @@ -

@@ -43,7 +43,6 @@

This tutorial demonstrates how you can control files and directories on the device.

@@ -63,29 +62,17 @@

Become familiar with the Filesystem API basics by learning about:

Managing File Storages
Retrieve file storages and storage details, and subscribe to notifications on storage state changes.
Creating and Deleting Files and Directories
Create and delete files and directories in the file system.
Retrieving Files and File Details
Retrieve a list of files in a directory, the URI of the file, or the file content as a DOMString.
Managing Files and Directories
Open, read, write, copy, move, and close files and directories.
Managing File Storages
Retrieve file storages and storage details, and subscribe to notifications on storage state changes.
Creating and Deleting Files and Directories
Create and delete files and directories in the file system.
Retrieving Files and File Details
Retrieve a list of files in a directory, the URI of the file, or the file content as a DOMString.
Managing Files and Directories
Open, read, write, copy, move, and close files and directories.

In the File Manager task, we will walk through how to manage files in your application.

Show All
Hide All

- -

-
-
Managing File Storages
- Hide -
-
+ +
Managing File Storages

Learning how to manage file storages is a basic data management skill:
1. To stop receiving the notifications, use the removeStorageStateChangeListener() method:
```
 tizen.filesystem.removeStorageStateChangeListener(watchID);
```
-
-
-
-
Creating and Deleting Files and Directories
- Hide -
-
+ +
Creating and Deleting Files and Directories

Learning how to create and delete files and directories is a basic data management skill:
-
-
-
-
Retrieving Files and File Details
- Hide -
-
+ +
Retrieving Files and File Details

Learning how to get files and file details from the file system is a basic data management skill:
-
-
-
-
Managing Files and Directories
- Hide -
-
+ +
Managing Files and Directories

Learning how to read and write to files, and move and copy files and directories, is a basic data management skill:
-
-

+ diff --git a/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm index ed01319..ddb317a 100644 --- a/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm @@ -16,7 +16,7 @@ -

@@ -35,14 +35,11 @@

The input/output tutorials demonstrate how to use the following features in creating Tizen Web applications:

Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation
Demonstrates how you can create, browse, and extract ZIP archives.
Filesystem: Providing Access to the Device File System
Demonstrates how you can control local files and file operations, retrieve and monitor storage information, and access the sandboxed sections of the local file system to search, create, and delete a directory or file.
Message Port: Communicating with Other Applications
Demonstrates how you can send and receive messages through message ports.

The following tutorials apply in mobile applications only:

Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation
Demonstrates how you can create, browse, and extract ZIP archives.

diff --git a/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm index f2a34db..3278803 100644 --- a/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/input_output/message_port_tutorial_w.htm @@ -16,7 +16,7 @@ -

@@ -37,7 +37,6 @@

This tutorial demonstrates how you can send and receive messages through message ports.

@@ -56,24 +55,10 @@

Become familiar with the Message Port API basics by learning about:

Managing Message Ports
Send and receive messages.
Managing Message Ports
Send and receive messages.

- - -

Show All
Hide All

- -

-
-
Managing Message Ports
- hide -
-
+ +
Managing Message Ports

Learning how to send messages to and receive responses from other Tizen applications through message ports is a basic data communication skill:
To implement the application receiving the message as a native application, see the mobile native Message Port Tutorial.
-

+ diff --git a/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm b/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm index 79e39e0..aa04a63 100644 --- a/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm +++ b/org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm @@ -16,7 +16,7 @@ -

@@ -40,9 +40,9 @@

This task, based on the FileManager sample delivered with the Tizen SDK, demonstrates how you can use the Filesystem API (in mobile and wearable applications) to manage files in your application. For more information on the sample functionality and creating the sample with the full source code, see FileManager.

This task consists of the following parts:

Defining the Application Layout defines how to create the application screens.
Managing Clipboard defines how to work with the clipboard.
Managing Device Storage defines how to create, copy, move, and remove folders and files.

The following figure shows the main screens of the application.

Figure: FileManager screen

FileManager screen

The template manager enables the HTML output generation to be divided into 3 parts.

app.ui.templateManager.js Source File -

The template manager loads the template files into the cache.

@@ -337,7 +337,7 @@ passThruModifiers: function(tplHtml, tplParam, content)
 }

Pasting Content from the Clipboard -

The pasteClipboard() method is used to copy filesystem paths from the clipboard or to move filesystem paths to the current directory location based on the current clipboard mode.

pasteClipboard: function App_pasteClipboard()
 {
    var clipboardData = this.clipboard.get();
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
index c55b86f..d09b484 100644
--- a/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm
@@ -11,25 +11,22 @@
     
     
 
-    Media Controller: Communication between the media controller server and client.
+    Media Controller: Communicating between the Media Controller Server and Client
 
 
 
 
-
+
     
          
     
     
         Content
         
-            Creating a new server
-            Getting a client and finding all active servers
-            Setting up a server
-            Sending requests from a client to a server
-            Receiving notifications from a server
-            Sending custom commands by a client
-            Receiving and handling custom commands by a server
+            Getting the Client and Server
+            Managing Requests
+            Receiving Notifications from the Server
+            Sending and Receiving Custom Commands
         
         Related Info
         
@@ -41,14 +38,10 @@
 
 
 
-Media Controller: Communication between the media controller server and client.
-
+Media Controller: Communicating between the Media Controller Server and Client
 
 
-This tutorial demonstrates how to use Media Controller API.  It shows how to develop server and client applications for controlling various media functions of the device.
-In order to manage media using Media Controller API you have to develop two applications.  One is a client and the second is a server which directly manages media on the device.
-The client sends requests to the server in order to change playback state, position modes etc.
-
+This tutorial demonstrates how you can to develop server and client applications for controlling various media functions of the device.
 
 
@@ -65,68 +58,27 @@ The client sends requests to the server in order to change playback state, posit
 Warm-up
Become familiar with the Media Controller API basics by learning about:

-  
-    Creating a client and a server
-    Creating a new Media Controller server.
-    How to get a client and how to find all active servers.
-  
-  
-    Setting up connection between the client and the server and sending and receiving requests from the client to the server
-    How to set up the server to receive and handle requests from the client in order to change playback state and position.
-    How to send requests by the client to the server.
-  
-  
-    Listenign changes on the server by the client
-    How to set up a listener on the client to receive notification of changes made by the server.
-  
-  
-    Sending and handling custom commands
-    How the client sends custom commands to the server.
-    How the server receives and handles custom commands sent by the client.
-  
+  Getting the Client and Server
+    Create a server, and get a client and find all active servers.
  
+  Managing Requests
+    Send a request from the client and handle it in the server.
+  Receiving Notifications from the Server
+    Receive notifications when the server makes changes in the play modes.
+  Sending and Receiving Custom Commands
+    Send a custom command from the client, and receive and handle it in the server.
 
 
-Task
-In this task, we will walk through how to change playback state and position by the Media Controller client and how to send custom commands from the client to the server.
 
-
-  
-    Show All
-    Hide All
-  
-
+Getting the Client and Server
 
-
+To manage the media controller features in your application, you must learn to set up the client and server pair:
 
-
-
-  Creating a new server
-  Hide
-
-
-
-
-Create new server.
 
 Create a media controller server using the createServer() method:
  var mcServer = tizen.mediacontroller.createServer();
 
 
-
-
-
-
-
-
-  Getting a client and finding all active servers
-  Hide
-
-
-
-
-To create applications with media controller features, you have to learn how to get client and find media controller servers.
-
 Get the client using the getClient() method:
 
 @@ -134,110 +86,95 @@ var mcClient = tizen.mediaController.getClient();
 
 
 
-Before searching activated media controller servers define success handler implementing the MediaControllerServerInfoArraySuccessCallback interface and optionally an error handler:
+
Define a success (and optionally error) event handler by implementing the MediaControllerServerInfoArraySuccessCallback interface (in mobile and wearable applications):
 
  var mcServerInfo;
 
-function findSuccessCallback(servers) {
+function findSuccessCallback(servers) 
+{
    console.log("Found " + servers.length + " servers");
-   if (servers.length > 0) {
+   if (servers.length > 0) 
+   {
       mcServerInfo = servers[0];
    }
 }
 
-function findErrorCallback(e) {
+function findErrorCallback(e) 
+{
    console.log("Error name: " + e.name + " Error message: " + e.message);
 }
 
 
 
-To get all media controller servers use findServers() method of the MediaControllerClient interface:
+
To search for all activated media controller servers, use the findServers() method of the MediaControllerClient interface (in mobile and wearable applications):
 
  mcClient.findServers(findSuccessCallback, findErrorCallback);
 
 
 
-
-
 
-
-
-  Setting up a server
-  Hide
-
+Managing Requests
 
-
-Set up the server to receive requests from the client and to update state, position etc.
+To manage the media controller features in your application, you must learn to handle requests from the client to the server:
 
-Create MediaControllerChangeRequestPlaybackInfoCallback object which defines listeners for getting requests from a client:
+
Create a MediaControllerChangeRequestPlaybackInfoCallback object (in mobile and wearable applications) to define listeners for getting the requests from a client.
+
+Each listener must invoke the appropriate function to perform the related update on the server and send an appropriate notification to the client. For example, the onplaybackstaterequest listener must use the updatePlaybackState() method to update the playback state.
+
 -var requestPlaybackInfoCb = {
-  onplaybackstaterequest: function(state) {
-    console.log('Request to change the playback state to: ' + state);
-    mcServer.updatePlaybackState(state);
-  },
-  onplaybackpositionrequest: function(position) {
-    console.log('Request to change the playback position to: ' + position);
-    mcServer.updatePlaybackPosition(position);
-  },
-  onshufflemoderequest: function(mode) {
-    console.log('Request to change the playback shufflemode to: ' + (mode ? 'TRUE' : 'FALSE'));
-    mcServer.updateShuffleMode(mode);
-  },
-  onrepeatmoderequest: function(mode) {
-    console.log('Request to change the playback repeat mode to: ' + (mode ? 'TRUE' : 'FALSE'));
-    mcServer.updateRepeatMode(mode);
-  }
+var requestPlaybackInfoCb = 
+{
+   onplaybackstaterequest: function(state) 
+   {
+      console.log('Request to change the playback state to: ' + state);
+      mcServer.updatePlaybackState(state);
+   },
+   onplaybackpositionrequest: function(position) 
+   {
+      console.log('Request to change the playback position to: ' + position);
+      mcServer.updatePlaybackPosition(position);
+   },
+   onshufflemoderequest: function(mode) 
+   {
+      console.log('Request to change the playback shuffle mode to: ' + (mode ? 'TRUE' : 'FALSE'));
+      mcServer.updateShuffleMode(mode);
+   },
+   onrepeatmoderequest: function(mode) 
+   {
+      console.log('Request to change the playback repeat mode to: ' + (mode ? 'TRUE' : 'FALSE'));
+      mcServer.updateRepeatMode(mode);
+   }
 };
 
-Every listener should invoke an appropriate function to update state, position and modes.  They are:
-
-updatePlaybackState()
-updatePlaybackPosition()
-updateShuffleMode()
-updateRepeatMode()
-
-These functions change the values  on the server and send an appropriate notifications to the client.
 
 
-Add listeners defined in MediaControllerChangeRequestPlaybackInfoCallback object to the server.
+
Add the listeners defined in the MediaControllerChangeRequestPlaybackInfoCallback object to the server:
  var watchId = mcServer.addChangeRequestPlaybackInfoListener(requestPlaybackInfoCb);
 
-The watchId variable stores the value which can be used in the future to remove the listeners from the server with the function
-removeChangeRequestPlaybackInfoListener.
-
-
-
-
+The watchId variable stores the value, which can be used in the future to remove the listeners from the server using the removeChangeRequestPlaybackInfoListener() method.
 
 
-
-
-  Sending requests from a client to a server
-  Hide
-
-
-
-
-After getting client and finding servers you have to learn how to send request to the server. You can send requests to the server using  sendPlaybackState(), sendPlaybackPosition(), endShuffleMode() or sendRepeatMode() method of the MediaControllerServerInfo interface.
-
-In this example you can learn, how to send request to pause playback. Before sending request you can define optional success and error callback:
+
At the client side, before sending a request, define optional success and error callbacks:
 
 -function successCallback() {
+function successCallback() 
+{
    console.log("Playback has been paused.");
 }
 
-function errorCallback(e) {
+function errorCallback(e) 
+{
    console.log("Error name: " + e.name + " Error message: " + e.message);
 }
 
 
 
-Send request to the server using sendPlaybackState() method:
+
You can send a request from the client using the sendPlaybackState(), sendPlaybackPosition(), endShuffleMode(), or sendRepeatMode() method of the MediaControllerServerInfo interface (in mobile and wearable applications).
+In the following example, send a request for the changing the playback state to paused using the sendPlaybackState() method:
+
 
  mcServerInfo.sendPlaybackState("PAUSE", successCallback, errorCallback);
@@ -245,55 +182,52 @@ mcServerInfo.sendPlaybackState("PAUSE", successCallback, errorCallback
 
 
 
-
-
-
-
-
-  Receiving notifications from a server
-  Hide
-
 
-
+Receiving Notifications from the Server
 
-To create applications with media controller features you have to learn how to receive notifications from the server.
+To manage the media controller features in your application, you must learn to receive notifications from the server:
 
-Define needed variable:
+
Define the needed variable:
 
  var watcherId;
 
 
 
-Define the event handlers for different notifications by implementing the MediaControllerPlaybackInfoChangeCallback interface:
+
Define the event handlers for different notifications by implementing the MediaControllerPlaybackInfoChangeCallback interface (in mobile and wearable applications):
 
 -var playbackListener = {
-   onplaybackchanged: function(state, position) {
+var playbackListener = 
+{
+   onplaybackchanged: function(state, position) 
+   {
       console.log("Current playback state: " + state);
       console.log("Current playback position: " + position);
    },
-   onshufflemodechanged: function(mode) {
+   onshufflemodechanged: function(mode) 
+   {
       console.log("Shuffle mode changed to: " + mode);
    },
-   onrepeatmodechanged: function(mode) {
+   onrepeatmodechanged: function(mode) 
+   {
        console.log("Repeat mode changed to: " + mode);
-      },
-   onmetadatachanged: function(metadata) {
+   },
+   onmetadatachanged: function(metadata) 
+   {
       console.log("Playback metadata changed: " + JSON.stringify(metadata));
    }
 };
 
 
 
-Register listener to start receiving notifications about playback:
+
Register the listener to start receiving notifications about playback changes:
 
  watcherId = mcServerInfo.addPlaybackInfoChangeListener(playbackListener);
 
 
 
-To stop receiving notifications, use removePlaybackInfoChangeListener() method:
+
To stop receiving notifications, use the removePlaybackInfoChangeListener() method:
 
  mcServerInfo.removePlaybackInfoChangeListener(watcherId);
@@ -301,89 +235,69 @@ mcServerInfo.removePlaybackInfoChangeListener(watcherId);
 
 
 
-
-
 
-
-
-  Sending custom commands by a client
-  Hide
-
 
-
+Sending and Receiving Custom Commands
 
-Except sending requests to the media controller server you have to learn also, how to send custom commands.
+To manage the media controller features in your application, you must learn to send custom commands:
 
-Define your command:
+
On the client side:
 
+Define your custom command:
 -var exampleCustomCommandData = {
+var exampleCustomCommandData = 
+{
    myFilter: "rock"
 };
 
 
 
-Define success callback implementing the MediaControllerSendCommandSuccessCallback interface and optionally an error callback:
+
Define a success (and optionally error) callback implementing the MediaControllerSendCommandSuccessCallback interface (in mobile and wearable applications):
 
 -function sendCommandSuccessCallback(response) {
+function sendCommandSuccessCallback(response) 
+{
    console.log("Command executed with result: " + JSON.stringify(response));
 }
 
-function sendCommandErrorCallback(e) {
+function sendCommandErrorCallback(e) 
+{
    console.log("Error name: " + e.name + " Error message: " + e.message);
 }
 
 
 
-Send command to the server using the sendCommand() method.
+
Send the command to the server using the sendCommand() method:
 
  mcServerInfo.sendCommand("myPlaylistFilter", sendCommandSuccessCallback, sendCommandErrorCallback);
 
 
 
-
-
-
+
+On the server side:
 
-

-
-  Receiving and handling custom commands by a server
-  Hide
-
-
-
-
-Set up a server to receive and handle custom commands sent by a client.
 
-Create the MediaControllerReceiveCommandCallback object which defines a listener for receving custom commands from a client:
+
Create the MediaControllerReceiveCommandCallback object (in mobile and wearable applications) to define a listener for receiving custom commands from a client:
 
 -var commandReceiveListener = function(client, command, data) {
-  console.log('command: ' + command + ' client: ' + client + ' data: ' + JSON.stringify(data));
-  return { reply: 'response from server' };
+var commandReceiveListener = function(client, command, data) 
+{
+   console.log('command: ' + command + ' client: ' + client + ' data: ' + JSON.stringify(data));
+
+   return {reply: 'response from server'};
 };
 
-The included callback function returns the object with the response to the client.  The client can obtain this value as an argument of the success callback of the function
-sendCommand()
-invoked by the client when it is sending the custom command.
+The callback function within the listener returns the object with the response to the client. The client can obtain this value as an argument of the success callback of the sendCommand() method that it used to send the command.
 
 
-Add the listener included in the created MediaControllerReceiveCommandCallback object to the server.
+
Add the listener defined in the MediaControllerReceiveCommandCallback object to the server:
  var watcherId = mcServer.addCommandListener(commandReceiveListener);
 
-The watcherId variable stores the value which can be used in the future to remove the listener from the server with the function
-removeCommandListener().
+The watcherId variable stores the value, which can be used in the future to remove the listener from the server using the removeCommandListener() method.
 
-
-
-
-
-
-
-
+
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm
index d7c24f8..8a6d68a 100644
--- a/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/media_key_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
     
          
     
@@ -37,7 +37,6 @@
 
 
 Media Key: Controlling Multimedia Playback
-  
   
 This tutorial demonstrates how you can control multimedia playback.
 
@@ -56,24 +55,10 @@
 Warm-up
 Become familiar with the Media Key API basics by learning about:
 
- Managing Media Key State Changes Register a listener and monitor changes in the media key states.
 
+ Managing Media Key State Changes Register a listener and monitor changes in the media key states.
 
 
 
-    
-        
-            Show All
-            Hide All
-        
-    
-
-    
-
-        
-            
-                Managing Media Key State Changes
-                Hide
-            
-            
+                Managing Media Key State Changes
 
 Learning how to register key event listener is a basic media key management skill:
 
@@ -104,12 +89,7 @@ tizen.mediakey.setMediaKeyEventListener(myMediaKeyChangeListener);
 tizen.mediakey.unsetMediaKeyEventListener();
 
             
-
-        
-
-    
-
-
+        
 
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
index 8e99826..46efd76 100644
--- a/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
     
          
     
@@ -35,6 +35,7 @@
 
     The multimedia tutorials demonstrate how to use the following features in creating Tizen Web applications:
   
+   Media Controller: Communicating between the Media Controller Server and Client Demonstrates how you can communicate between the media controller server and client.
    Media Key: Controlling Multimedia Playback Demonstrates how you can control multimedia playback.
    Sound: Controlling the Sound Volume Level and the Sound Devices Demonstrates how you can manage the device volume levels and the sound devices.
   
diff --git a/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm
index a6fca03..f5af960 100644
--- a/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/multimedia/sound_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
     
          
     
diff --git a/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
index 85dbc14..4ae21e1 100644
--- a/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		
 	
@@ -37,7 +37,6 @@
 
 
 Service Application: Creating a Service Application
- 
  
 This tutorial demonstrates how you can create a service application and implement specific features within the service application.
 
@@ -66,20 +65,7 @@
 Terminate a service application
 
 
-
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-		
-			
-				Creating a Service Application
-				Hide
-			
-			
+				Creating a Service Application
 				
  Learning how to create a service application is a basic application management skill:
 
@@ -138,18 +124,12 @@ module.exports.onExit = function()
    console.log("service terminate");
 }
 
-			
-		
-		
-			
-				Packaging a Service Application
-				Hide
-			
-						
+			
+				Packaging a Service Application
 				
  Learning how to package a service application is a basic application management skill:
 
-A widget package can contain 1 Web UI application and several service applications. Each application in the widget package shares the same package ID and has a unique application ID. In the following example, you can use the <tizen:application> element to contain information for the Web UI application. The <tizen:service> element is used to contain information about the service application. The UI application and the service application have the same package ID and different application IDs.
+A Web application package can contain 1 Web UI application and several service applications. Each application in the Web application package shares the same package ID and has a unique application ID. In the following example, you can use the <tizen:application> element to contain information for the Web UI application. The <tizen:service> element is used to contain information about the service application. The UI application and the service application have the same package ID and different application IDs.
 
 Define the service in the config.xml file.
 The <tizen:service> element allows you to define the characteristics of the service application. For example, you can specify the name, icon, and starting JavaScipt file of the service application.
@@ -171,19 +151,13 @@ module.exports.onExit = function()
 </widget>
 
  
- 			
-		
-		
-			
-				Launching a Service Application
-				Hide
-			
-						
+ 		
+				Launching a Service Application
 				
  Learning how to launch a service application is a basic application management skill:
 
 
-
+
 Launch by other applications
 The Web application launches a service application by calling the launch() or launchAppControl() function with the service application ID:
 @@ -201,15 +175,8 @@ tizen.application.launchAppControl(new tizen.ApplicationControl("http://tiz
 
 
 
-
-		
-		
-		
-			
-				Terminating a Service Application
-				Hide
-			
-						
+
+				Terminating a Service Application
 				
 Learning how to terminate a service application is a basic application management skill:
 
@@ -241,12 +208,7 @@ var watchId = localMsgPort.addMessagePortListener(onreceived);
 
 
 
- 			
-				
-		
-    	
-
-
+ 			
 
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
index 830586e..1cc4809 100644
--- a/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/account_tutorial_w.htm
@@ -14,7 +14,7 @@
  
 
 
-
+
     
         
     
@@ -38,7 +38,6 @@
 
 
  Account: Managing Accounts and Account Information
- 
 	
 This tutorial demonstrates how you can manage accounts and retrieve account information.
 
@@ -73,33 +72,19 @@
 
 
 
-
-        
-            Show All
-            Hide All
-        
-    
-
-    
-
-        
-            
-                Retrieving Accounts
-                Hide
-            
-            
+                Retrieving Accounts
 				
 
 Learning how to retrieve account information enables you to include account support into your applications:
 
-
+
 To retrieve information about all available accounts, use the getAccounts() method of the AccountManager interface:
 
 function getAccountsSuccess(accounts)
 {
    for (var i = 0; i < accounts.length; i++)
    {
-      // Use the retrieved accounts
+      /* Use the retrieved accounts */
    }
 }
 function getAccountsError(error)
@@ -114,15 +99,8 @@ tizen.account.getAccounts(getAccountsSuccess, getAccountsError);
 var account = tizen.account.getAccount(my_account_id);
 
 
-            
-        
-
-        
-            
-                Retrieving Providers
-                Hide
-            
-            
+         
+                Retrieving Providers
 
 To create accounts, you must learn how to get access to account providers:
 
@@ -137,7 +115,7 @@ tizen.account.getAccounts(getAccountsSuccess, getAccountsError);
    

 
 
 
 
 
 
 
 
-
+
 Get a specific account provider with the given application ID using the getProviders() method of the ApplicationManager interface.
 If the current application is an account provider application (meaning that it contains the <tizen:account> element in its config.xml file), you can use the current application ID.  Otherwise, get the ID of the current application using the getCurrentApplication() method of the ApplicationManager interface:
 
@@ -148,7 +126,7 @@ var provider = tizen.account.getProvider(appId);

function getProvidersSuccess(providers)
 {
-   // providers is an array whose members are providers with contact capability
+   /* Providers is an array whose members are providers with contact capability */
 }
 function getProvidersError(error)
 {
@@ -158,15 +136,8 @@ function getProvidersError(error)
 tizen.account.getProviders(getProvidersSuccess, getProvidersError, "http://tizen.org/account/capability/contact");

- - -

- Hide -

+ +

Creating, adding, updating, and deleting accounts is a basic account management skill:

@@ -209,15 +180,8 @@ var accountProvider = tizen.account.getProvider(appId);

tizen.account.remove(account.id);

- - -

- Hide -

+ +

Learning how to register change listeners enables you to synchronize the view of your application with the changes in the account database:

@@ -239,15 +203,15 @@ var accountProvider = tizen.account.getProvider(appId); { onadded: function(account) { - // Called when an account is added + /* Called when an account is added */ }, onremoved: function(accountId) { - // Called when an account is removed + /* Called when an account is removed */ }, onupdated: function(account) { - // Called when a registered account is changed + /* Called when a registered account is changed */ } };

@@ -259,22 +223,15 @@ var accountProvider = tizen.account.getProvider(appId);

tizen.account.removeAccountListener(watchId);

- - -

- Hide -

+ +

Learning how to manage extended data for an account enables you to include account support into your applications:

Retrieve the account object.
Manage the extended data for the retrieved account: -
- To set extended data: +
  - To set extended data:
    Set the additional information with the setExtendedData() method:
```
var key = 'nickname';
@@ -297,7 +254,7 @@ account.setExtendedData(key, value);
```
  - To get extended data: -
    - To retrieve extended data value for a specific key, use the getExtendedData() method: +
      - To retrieve extended data value for a specific key, use the getExtendedData() method:
        var key = 'accessToken'; var value = account.getExtendedData(key);
        @@ -332,12 +289,7 @@ var value = account.getExtendedData(key);

- - - -

+ diff --git a/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm index 2bbc1d9..e093ffc 100644 --- a/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/social/bookmark_tutorial_w.htm @@ -14,7 +14,7 @@ -

@@ -36,7 +36,6 @@

This tutorial demonstrates how you can manage Tizen Web browser bookmarks on the device.

@@ -59,23 +58,10 @@

Retrieving the Bookmark List

Retrieve a list of the current bookmarks in the root bookmark folder.

Show All
Hide All

- -

-
-
Creating Bookmark Folders and Items
- Hide -
-
+
Creating Bookmark Folders and Items

To create engaging applications with bookmark-related features, you must learn how to add bookmark folders and items to the root bookmark folder and subfolders:
-
-
-
-
Deleting Bookmarks
- Hide -
-
+ +
Deleting Bookmarks

To create engaging applications with bookmark-related features, you must learn how to delete bookmarks:
-
-
-
-
Retrieving the Bookmark List
- Hide -
-
+ +
Retrieving the Bookmark List
+
To create engaging applications with bookmark-related features, you must learn how to retrieve the bookmarks:
1. To retrieve bookmarks from a specific bookmark folder and its subfolders, use the get() method, specifying the bookmark folder name and setting the recursive parameter as true:
```
tizen.bookmark.get(folder1, true);
 
```
-
-

+ diff --git a/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm index b30248f..49a5d74 100644 --- a/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm @@ -14,7 +14,7 @@ -

@@ -52,7 +52,6 @@

This tutorial demonstrates how you can manage calendars in the device to access, modify, add, and remove calendar items within a specified calendar on the device.

@@ -92,21 +91,8 @@

In the Event Manager task, we will walk through how to manage calendar events in your application.

- -

Show All
Hide All

- -

-
-
Creating a Calendar
- Hide -
-
+ +
Creating a Calendar

Creating a new calendar is a basic calendar management skill:
@@ -142,14 +128,8 @@

- -

- Hide -

+ +

To create engaging applications with various calendar features, you must learn to add events to calendars:

@@ -177,14 +157,9 @@ ev.alarms = [alarm];

Add the CalendarEvent object to the default calendar with the add() method of the Calendar object.

calendar.add(ev);  /* ev.id attribute is generated */

- -

To create engaging applications with various calendar features, you must learn to manage multiple calendar tasks in the batch mode:

To update tasks: -

Define the items to be updated in the success event handler of the find() method:

 function taskSearchSuccessCallback(tasks)
 {
@@ -564,17 +493,11 @@ function taskSearchSuccessCallback(tasks)
 }

- Hide -

+ +

The following examples illustrate how to make calendar task exchange more efficient in your application by converting the calendar task to iCalendar format or the other way around using the CalendarTask constructor and the convertToString() method of the Calendar object respectively:

To convert an iCalendar string to a calendar task:
1. Retrieve the default system calendar using the getDefaultCalendar() method of the CalendarManager interface.
  
  With the parameter, specify the calendar type as task.
```
@@ -621,15 +544,8 @@ function taskSearchSuccessCallback(tasks)
 
```
To export and convert multiple tasks from a calendar, find the required tasks using the find() method with an applicable filter, and then convert the found tasks one by one.

- -

- Hide -

+ +

To create engaging applications with various calendar features, you must learn to receive notifications when calendar items are added, updated, or removed:

@@ -672,11 +588,7 @@ function cancelWatch() } -

- -

+ diff --git a/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm index fac5519..50163e2 100644 --- a/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm @@ -14,7 +14,7 @@ -

@@ -36,7 +36,6 @@

This tutorial demonstrates how you can manage and monitor the call history.

@@ -61,20 +60,8 @@

In the Call Log task, we will walk through how to manage call logs in your application.

Show All
Hide All

- -

- Hide -

+ +

Learning how to retrieve call history items using different parameters allows you to view specific items in a specific order, making call history monitoring easy and convenient.

Use the filter parameter of the find() method to define a filter for the query result set. A filter with the CallHistoryEntry attributes is used to limit the results of the call history search.

You can define various filters:

The AttributeFilter type is used to search based on a single CallHistoryEntry attribute (for attributes supported in the filter, see CallHistory Filter Attributes).

For example, the following filters define that only cellular calls or calls where the remote party has the telephone number 123456789 are included in the query results:

/* First filter example */
 var filter = new tizen.AttributeFilter("type", "EXACTLY", "TEL");
 
@@ -117,15 +104,8 @@ var ifilter = new tizen.CompositeFilter("INTERSECTION", [numberFilter,
     Use the limit and offset parameters of the find() method to specify the starting point and upper limit of the results that are returned.
 The limit parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the offset parameter skips that many matching results that are to be returned (the value 0 means nothing is skipped).
 For example, if your search results consist of 100 matching results and you have specified an offset of 10 and a limit of 20, you get the objects from 10-29. The matching results from 0-9 are skipped due to the offset, and the 20 results starting from the first result after the offset are returned.

-
-
Removing Call History Items
- Hide -
-
+
Removing Call History Items

Learning how to remove call history items allows you to keep the call history list organized and save storage space on the device:
1. To remove all call history items, use the removeAll() method:
```
tizen.callhistory.removeAll();
```
-
-
-
+ -
Monitoring the Call History
- Hide -
-
+
Monitoring the Call History

Learning how to register change listeners allows you to synchronize the view of your application to changes in the call history database.
1. Use the removeChangeListener() method to unregister a previously registered listener. Use the ID returned by the addChangeListener():
```
tizen.callhistory.removeChangeListener(callHistoryListener);
```
-
-

+ diff --git a/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm index 4d7d714..091ecef 100644 --- a/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/social/contact_tutorial_w.htm @@ -14,7 +14,7 @@ -

@@ -60,7 +60,6 @@

This tutorial demonstrates how you can manage address books in the device to access, modify, add, and remove contacts within a specified address book on the device.

@@ -108,20 +107,7 @@ -

Show All
Hide All

- -

-
-
Creating an Address Book
- Hide -
-
+
Creating an Address Book

Creating a new address book is a basic contact management skill:
@@ -157,14 +143,7 @@
```
tizen.account.getAccounts(getAccountsSuccess, function(err));
 
```

- -

- Hide -

+ +

To manage a single person: -
1. To merge multiple persons into a single person item: -
  -

- -

diff --git a/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm index b4beec0..0fdf709 100644 --- a/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/social/data_sync_tutorial_w.htm @@ -14,7 +14,7 @@ -

@@ -35,7 +35,6 @@

This tutorial demonstrates how you can synchronize device data, such as contacts and calendar events, with the OMA DS server.

@@ -57,20 +56,7 @@

Starting and Monitoring Data Synchronization

Start the synchronization operation and receive notifications about its progress.

Show All
Hide All

- -

-
-
Creating a Sync Profile
- Hide -
-
+
Creating a Sync Profile

To be able to synchronize your device data, such as contacts and calendar events, with the OMA DS server, you must learn how to create a sync profile:
-
-
-
-
Starting and Monitoring Data Synchronization
- Hide -
-
+ +
Starting and Monitoring Data Synchronization

Learning how to start and monitor the data synchronization process is a basic data management skill:
-
-

+ diff --git a/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm index 6d042bc..42d77f2 100644 --- a/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm @@ -14,7 +14,7 @@ -

diff --git a/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm b/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm index 5e5cb30..da69afc 100644 --- a/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm +++ b/org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm @@ -16,7 +16,7 @@ -

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

This task, based on the CallLog sample delivered with the Tizen SDK, demonstrates how you can use the Call History API to manage call logs in your application. For more information on the sample functionality and creating the sample with the full source code, see CallLog.

This task consists of the following parts:

Defining the Application Layout defines how to create the application screens.
Initializing the Application defines how to initialize the application.
Browsing a Call Log defines how to retrieve a call history log.

The following figure shows the main screens of the application.

Figure: CallLog screens

CallLog screens

The template manager enables the HTML output generation to be divided into 3 parts.

app.ui.templateManager.js Source File -

The template manager loads the template files into the cache.

@@ -147,7 +147,7 @@ loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
   Defining the Main Screen 
    
    callView.tpl Source File 
-     
+     
       The main screen of the application displays an aggregated call history list sorted by date. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.
 	 <div data-role="page" id="callView">
    <!--Header section-->
@@ -196,7 +196,7 @@ loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
   The call log retrieval functionality is implemented in the app.model.js file.
    
    Retrieving the Complete Call History 
-   
+   
    The find() method of the CallHistory interface, placed in the app.model.js file, is used to retrieve the call history in the descending order by specifying the required parameters. 
 getCallHistory: function Model_getCallHistory(onSuccess, onError)
 {
@@ -211,7 +211,7 @@ loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
 
     
    Retrieving the Call History for a Specific Caller 
-   To retrieve the call history for a specific caller, the phone number of the caller is specified as an additional filter parameter in the find() method. 
+   To retrieve the call history for a specific caller, the phone number of the caller is specified as an additional filter parameter in the find() method. 
 getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber, onSuccess)
 {
    tizen.callhistory.find(onSuccess, null,
diff --git a/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm b/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm
index f8b74e7..e01631f 100644
--- a/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
     
         
     
@@ -45,7 +45,7 @@
   This task, based on the EventManager sample delivered with the Tizen SDK, demonstrates how you can use the Calendar API to manage calendar events. For more information on the sample functionality and creating the sample with the full source code, see EventManager.
 
   This task consists of the following parts:
-  
+  
    Defining the Application Layout defines how to create the application screens.
    Initializing the Application defines how to initialize the application.
    Managing Calendar Events defines how to add, modify, delete, and set alarms for calendar events.
@@ -58,12 +58,12 @@
   
   The following figure shows the main screens of the application.
   Figure: EventManager screens
-  
+  
   Using the Template Manager
    The template manager enables the HTML output generation to be divided into 3 parts.
   
    app.ui.templateManager.js Source File
-    
+    
      
 The template manager loads the template files into the cache.
 @@ -149,7 +149,7 @@ loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
   Defining the Main Screen
   
    templates/home.tpl Source File
-   
+   
 The main screen displays a list of calendar events. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.
 
 @@ -210,7 +210,7 @@ loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
   Defining the New Event Screen
   
 templates/new_event.tpl Source File
-The New event screen contains UI widgets for setting the event title, type, start and end date, and an alarm for the event. The footer section of the screen contains a tab bar with buttons for saving the event information, or deleting it.
+The New event screen contains UI components for setting the event title, type, start and end date, and an alarm for the event. The footer section of the screen contains a tab bar with buttons for saving the event information, or deleting it.
  <!--New event screen layout-->
 <div data-role="page" id="new_event">
diff --git a/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm
index 2ed2844..1c000e0 100644
--- a/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/fm_radio_tutorial_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
         
     
@@ -37,9 +37,8 @@
 
 
 FM Radio: Listening to the FM Radio
-
 
-This tutorial demonstrates how to manage a FM radio on the device.
+This tutorial demonstrates how you can manage a FM radio on the device.
 
     
@@ -61,22 +60,7 @@
 Getting Information about InterruptionsSet an event handler to retrieve information about radio playback interruptions and restart the playback.
 
-
-        
-            Show All
-            Hide All
-        
-    
-
-    
-    
-
-        
-            
-                Managing the FM Radio
-                hide
-            
-            	
+                Managing the FM Radio
 
 Starting and stopping an FM radio and changing the frequency is a basic FM radio management skill:
 
@@ -128,15 +112,8 @@ if (radioState == "PLAYING")
 
 
 
-            
-        
-
-        
-            
-                Scanning the FM Radio Frequency
-                hide
-            
-            				
+       
+                Scanning the FM Radio Frequency
 
 To create an application with FM radio features, you must provide a scanning capability:
 
@@ -197,15 +174,8 @@ if (tizen.fmradio.state === "SCANNING")
 
 
 
-            
-        
 
-        
-            
-                Getting Information about Interruptions
-                hide
-            
-            
+                Getting Information about Interruptions
 
 Retrieving information about FM radio interruptions is a useful FM radio management skill:
 
@@ -236,12 +206,7 @@ tizen.fmradio.setFMRadioInterruptedListener(interruptCallback);
 
 
 
-            
-        
-
-    
-
- 
+        
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm
index a3b1d36..3d50159 100644
--- a/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/ham_tutorial_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
          
     
@@ -37,10 +37,9 @@
 
 
 Human Activity Monitor: Retrieving User Activity Data from the Various Device Sensors
-
 
 
-This tutorial demonstrates how to monitor user activity.
+This tutorial demonstrates how you can monitor user activity.
 
    
 
 
 
  
@@ -62,23 +61,7 @@
     Receiving Notifications on Pedometer Data Changes Track the changes in the step count.
 
-    
-    
-        
-            Show All
-            Hide All
-        
-    
-
-    
-    
-
-        
-            
-                Retrieving Data
-                hide
-            
-            
+                Retrieving Data
 
 Enabling the monitor and retrieving data is a basic Human Activity Monitor (HAM) management skill:
 
@@ -129,15 +112,8 @@ tizen.humanactivitymonitor.getHumanActivityData("HRM", onsuccessCB, on
 tizen.humanactivitymonitor.stop("HRM");
 
 
-            
-        
-
-        
-            
-                Receiving Notifications on Pedometer Data Changes
-                hide
-            
-            
+          
+                Receiving Notifications on Pedometer Data Changes
 
 Learning how to register a listener for accumulative allows you to monitor the step count maintained by the system without enabling the Pedometer sensor and the PEDOMETER monitor:
 
@@ -160,12 +136,6 @@ tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);
 
 
 
-            
-        
-
-    
-
-
diff --git a/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm
index 3a325df..bf4d4cd 100644
--- a/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/power_tutorial_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
          
     
@@ -38,7 +38,6 @@
 
 
 Power: Controlling Power Resources
-
 
 This tutorial demonstrates how you can access the device power state.
 
@@ -57,26 +56,12 @@
   Warm-up
   Become familiar with the Power API basics by learning about:
   
-   Managing the Power Resource Request and release a specific power state.
-   Managing the Screen Brightness Get, set, and restore the screen brightness.
-   Managing the Screen State Switch the screen on and off, and check whether the screen is on.
-
- 	
-	
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-	
-	
-			
-				Managing the Power Resource
-				hide
-			
-			
+   
Managing the Power Resource Request and release a specific power state.
+   Managing the Screen Brightness Get, set, and restore the screen brightness.
+   Managing the Screen State Switch the screen on and off, and check whether the screen is on.
+
+   
+				Managing the Power Resource
 			
 				Learning how to request and release the power state is a basic power management skill: 
    
@@ -96,18 +81,11 @@ tizen.power.setScreenStateChangeListener(onScreenStateChanged); 
 	tizen.power.unsetScreenStateChangeListener(); 
 
     
-			
-		
-
-	
-			
-				Managing the Screen Brightness
-				hide
-			
-			
+			
+				Managing the Screen Brightness
 			
   Learning how to manage the screen brightness is a basic power management skill:
-  
+  
    To get the screen brightness, call the getScreenBrightness() method of the PowerManager interface (in mobile and wearable applications):
  var screenBrightness = tizen.power.getScreenBrightness();
@@ -122,18 +100,11 @@ tizen.power.setScreenBrightness(1);
 
 tizen.power.restoreScreenBrightness();
  
   
-			
-		
 		
-	
-			
-				Managing the Screen State
-				hide
-			
-			
-
+				Managing the Screen State
+				
   Learning how to manage the screen state is a basic power management skill:
-  
+  
    To check whether the screen is on, call the isScreenOn() method of the PowerManager interface (in mobile and wearable applications):
  var isScreenOn = tizen.power.isScreenOn();
@@ -148,12 +119,7 @@ tizen.power.turnScreenOff();
 
 
 
   
-  			
-				
-		
-		
-				
-
+  	
   
    
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm
index 0ea60fe..a8264c4 100644
--- a/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
          
     
@@ -37,9 +37,8 @@
 
 
 Sensor: Getting Sensor Data from the Various Device Sensors
-
 
-This tutorial demonstrates how to use device sensors.
+This tutorial demonstrates how you can use device sensors.
 
    
 
 
 
 
 
  
@@ -57,26 +56,14 @@
 
 Become familiar with the Sensor API basics by learning about:

- Managing SensorsCheck, whether the sensor is supported, enable the sensor, read sensor data, and disable the sensor.
- Receiving Notifications on Sensor Data ChangesRegister an event handler to receive notifications on sensor data changes.
+ Managing SensorsCheck, whether the sensor is supported, enable the sensor, read sensor data, and disable the sensor.
+ Receiving Notifications on Sensor Data ChangesRegister an event handler to receive notifications on sensor data changes.
 
- 
-    
-        
-            Show All
-            Hide All
-        
-    
 
-    
-    
+Task in Mobile Applications	
+In the Sensor Ball task, we will walk through simulating ball behavior to create a game.
 
-        
-            
-                Managing Sensors
-                hide
-            
-            
+Managing Sensors
 				
 Learning how to start, read and stop a sensor is a basic sensor management skill:
 
@@ -136,15 +123,8 @@ lightSensor.start(onsuccessCB);
 proximitySensor.stop(); 
 
 
-            
-        
-
-        
-            
-                Receiving Notifications on Sensor Data Changes
-                hide
-            
-            
+          
+                Receiving Notifications on Sensor Data Changes
 
 Learning how to register a change event handler for sensor data enables your application to react to changes without the need to check current values constantly.
 
@@ -182,13 +162,7 @@ proximitySensor.start(onsuccessCB);
 proximitySensor.unsetChangeListener();
 
 
-            
-        
-
-    
-
-
-         
+          
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm
index 991fcf7..71f06d4 100644
--- a/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
         
 		
@@ -41,7 +41,6 @@
 
 
 System Information: Providing Information about the Device Display, Network, Storage, and Other Capabilities
-
 
 This tutorial demonstrates how you can obtain information about the device properties.
 
@@ -69,22 +68,7 @@
   Task
   In the System Information task, we will walk through how to access and use system information in your application.
    
- 
-    
-        
-            Show All
-            Hide All
-        
-    
-    
-    
-
-    
-            
-                Retrieving a Device Capability
-                hide
-            
-            
+                Retrieving a Device Capability
 				
             Learning how to get a capability of the device is a basic application development skill:
   
@@ -108,15 +92,8 @@ console.log(" Barometer = " + barometer);
 
   For a list of available keys and their meaning, see the device capability keys (in mobile and wearable applications).
 
-            
-        
-
-        
-            
-                Retrieving the Current State of a Property
-                hide
-            
-            	
+         
+                Retrieving the Current State of a Property
 				
             Learning how to retrieve information about the property states is a basic application development skill:
   
@@ -156,18 +133,11 @@ tizen.systeminfo.getPropertyValueArray("SIM", successCallback);
 
 console.log("The number of SIM cards in the device is " + tizen.systeminfo.getCount("SIM")); 
   
-            
-        
-
-        
-            
-                Retrieving the Memory State
-                hide
-            
-            
+            
+                Retrieving the Memory State
 
   Learning how to get the memory status of the device is a basic application development skill:
-  
+  
    To get the total amount of system memory, use the getTotalMemory() method:
 
    console.log("The total memory size is " + tizen.systeminfo.getTotalMemory() + " bytes.");
@@ -176,14 +146,8 @@ tizen.systeminfo.getPropertyValueArray("SIM", successCallback);
 
    console.log("The available memory size is " + tizen.systeminfo.getAvailableMemory() + " bytes.");
   
-            
-        
-        
-            
-                Retrieving and Monitoring the Device Orientation
-                hide
-            
-            
+            
+                Retrieving and Monitoring the Device Orientation
 				
   Learning how to retrieve information about the device orientation is a basic mobile application development skill: 
   
@@ -209,14 +173,7 @@ orientationListenerId = tizen.systeminfo.addPropertyValueChangeListener("DE
 tizen.systeminfo.removePropertyValueChangeListener(orientationListenerId);
   
    
-            
-        
-        
-            
-                Receiving Notifications on Property Value Changes
-                hide
-            
-            
+                Receiving Notifications on Property Value Changes
 				
             Learning how to receive notifications on property value changes is a basic application development skill:
   
@@ -250,12 +207,7 @@ function successCallback(properties)
 var id = tizen.systeminfo.addPropertyValueArrayChangeListener("SIM", successCallback);
  
   
-              
-        
-
-    
-
-
+          
 
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm
index 18eadca..38a4cd6 100644
--- a/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/system_setting_tutorial_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
          
     
@@ -37,7 +37,7 @@
 
 
 System Setting: Providing System Setting Functionality
-
+
 
 This tutorial demonstrates how you can access the device's settings for the home screen and lock screen wallpaper, incoming call ringtone, and email notification tone.
 
@@ -56,26 +56,11 @@
 Warm-up
 Become familiar with the System Setting API basics by learning about:
   
-   Managing the Device Wallpapers Set the wallpaper of the home screen and the lock screen.
-   Managing Ringtones and Notification Tones Set the ringtone for incoming calls and the tone for email notifications.
+   Managing the Device Wallpapers Set the wallpaper of the home screen and the lock screen.
+   Managing Ringtones and Notification Tones Set the ringtone for incoming calls and the tone for email notifications.
  
  
-	
-	
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-	
-	
-			
-				Managing the Device Wallpapers
-				hide
-			
-			
+				Managing the Device Wallpapers
 				
 Learning how to set the device wallpaper and get information about it is a basic application development skill: 
    
@@ -111,15 +96,8 @@ function getHomescreenWallpaper()
 }
   
    
-			
-		
-		
-		
-			
-				Managing Ringtones and Notification Tones
-				hide
-			
-						
+			
+				Managing Ringtones and Notification Tones
 				
   Learning how to set ringtones and notification tones is a basic application development skill: 
    
@@ -161,12 +139,7 @@ catch (error)
 }
   
    
-			
-		
-	
-		
-				
-
+			
 
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
index 9976b27..79f3b5c 100644
--- a/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
          
     
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_sensorball_w.htm b/org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm
similarity index 91%
rename from org.tizen.tutorials/html/web/w3c/device/task_sensorball_w.htm
rename to org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm
index 493d13b..3438476 100644
--- a/org.tizen.tutorials/html/web/w3c/device/task_sensorball_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm
@@ -16,9 +16,9 @@
 
 
 
-
+
 	
-		
+		
 	
 	
 	
@@ -30,8 +30,8 @@
 		
 		Related Info
 		
-            DeviceOrientation Event Specification Guide 
-            DeviceOrientation Event Specification API for Mobile Web
+            Sensor Guide 
+            Sensor API
 		
 	
 	
@@ -39,9 +39,9 @@
 
 
   Task: Sensor Ball 
-  This task, based on the SensorBall sample delivered with the Tizen SDK, demonstrates how you can use the DeviceOrientation Event Specification API to read and process gyro sensor data. For more information on the sample functionality and creating the sample with the full source code, see the SensorBall. 
+  This task, based on the SensorBall sample delivered with the Tizen SDK, demonstrates how you can use the Sensor API to read and process gyro sensor data. For more information on the sample functionality and creating the sample with the full source code, see the SensorBall. 
   This task consists of the following parts: 
-   
+   
    Defining the Application Layout defines how to create the application screens.
    Initializing the Application defines how to initialize the application.
    Managing the Gyro Sensor Data defines how to handle the sensor data.
@@ -54,12 +54,12 @@
   
    The following figure shows the main screen of the application. 
   Figure: SensorBall screen 
-   
+   
   
 Defining the Main Screen
    
    index.html Source File
-    The main screen displays the game screen. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.   
+    The main screen displays the game screen. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.   
    <body>
    <div data-role="page" id="mainPage">
@@ -139,7 +139,7 @@ style.css file defines the background image for each animation mode and t
  
 
  Managing the Gyro Sensor Data 
- This section builds upon the elements described in Detecting Device Acceleration.
+ This section builds upon the elements described in Detecting Device Acceleration.
   
 
  Managing the Application and Window Objects
@@ -229,7 +229,7 @@ $(window).resize(function()
 
    
    main.js Source File 
- 
+ 
  The 
 devicemotion event listener calls the 
 saveSensorData() method each time the event takes place. The event allows the application to access information about sensor data changes.
diff --git a/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm b/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm
index e6b511a..42add1f 100644
--- a/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		 
 	
@@ -39,9 +39,9 @@
 
 
  Task: System Information 
-  This task, based on the Systeminfo sample delivered with the Tizen SDK, demonstrates how you can use the System Information API (in mobile and wearable applications) to retrieve and display status and details of various device-specific items. For more information on the sample functionality and creating the sample with the full source code, see SystemInfo. 
+  This task, based on the Systeminfo sample delivered with the Tizen SDK, demonstrates how you can use the System Information API (in mobile and wearable applications) to retrieve and display status and details of various device-specific items. For more information on the sample functionality and creating the sample with the full source code, see SystemInfo. 
   This task consists of the following parts: 
-   
+   
    Defining the Application Layout defines how to create the application screens.  
    Displaying Device-specific Information defines how to display status information of the device properties. 
    
@@ -53,11 +53,11 @@
   
   The following figure shows the main screens of the application. 
   Figure: Systeminfo screens 
-   
+   
   Defining the Main Screen
    
    index.html Source File 
-     
+     
       The main screen of the application displays a list of system properties about which you can retrieve information. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.
 <!--Main screen layout-->
 <div data-role="page" id="main">
    <!--Header section-->
@@ -82,7 +82,7 @@
   Defining the Information Screen
    
    index.html Source File 
-     
+     
       The information screen of the application displays the details of a selected system property. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen, which varies depending on the list item the user clicks on the main screen.
 <!--Information screen layout-->
 <div data-role="page" id="info">
    <!--Header section-->
@@ -90,7 +90,7 @@
       <h1 id="info-title"></h1>
    </div>
 
  
-     The actual content section of the screen is defined within a <div> element whose data-role attribute is set to content. The content section of the information screen contains a list widget displaying the details of the selected system property.
    <!--Content section-->
+     The actual content section of the screen is defined within a <div> element whose data-role attribute is set to content. The content section of the information screen contains a list component displaying the details of the selected system property.
    <!--Content section-->
    <div data-role="content">
       <ul data-role="listview" id="info-list">
       </ul>
@@ -108,7 +108,7 @@
   Defining the List Item Types
    
    main.js Source File When the user selects a property list item on the main screen, the information screen opens displaying a list of the details of the selected property.
 Different properties require different kind of layout and functionality in their list. User-defined methods are defined for creating the following list item types: 
-     
+     
      List item with 1 line (contains the property value) function make1lineListItem(value) 
 {
    return '<li>' + value + '</li>';
diff --git a/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm
index 02ae6d3..43350bc 100644
--- a/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/time_tutorial_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
         
 		
@@ -40,7 +40,6 @@
 
 
 Time: Exposing Information about Date, Time, and Time Zones
-
 	
 	  This tutorial demonstrates how you can manage date and time information and perform different calculations and other tasks related to date and time. 
 	  
@@ -59,29 +58,14 @@
   Warm-up 
   Become familiar with the Time API basics by learning about: 
    
-   Retrieving Date and Time Retrieve the current date and time or all available time zones, and check whether a specific year is a leap year. 
-   Retrieving the Local Date and Time Format Get the currently used time and date formats. 
-   Calculating Date and Time Information Perform calculations and comparisons with date and time data. 
-   Retrieving Time Change Notifications Monitor the time and time zone changes performed by the user.
+   Retrieving Date and Time Retrieve the current date and time or all available time zones, and check whether a specific year is a leap year. 
+   Retrieving the Local Date and Time Format Get the currently used time and date formats. 
+   Calculating Date and Time Information Perform calculations and comparisons with date and time data. 
+   Retrieving Time Change Notifications Monitor the time and time zone changes performed by the user.
 
    
-            
-	
-	
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-
-		
-			
-				Retrieving Date and Time
-				Hide
-			
-					
+           
+				Retrieving Date and Time
 				
 			Learning how to handle date and time in your application is a basic locale management skill: 
    
@@ -91,7 +75,7 @@ console.log("Current time / date is " + current_dt.toLocaleString());
  
     
    To handle time zone information: 
-     
+     
       To retrieve the current time zone, use the getLocalTimezone() method:
  console.log("The current time zone is " + tizen.time.getLocalTimezone());
 
 The general format of the time zones is "general descriptor/specific descriptor 1/specific descriptor 2/specific descriptor n". For example, "America/Argentina/Buenos_Aires".
  
@@ -111,15 +95,8 @@ if (is_leap)
     
 
     
-			
-		
 		
-		
-			
-				Retrieving the Local Date and Time Format
-				Hide
-			
-				
+				Retrieving the Local Date and Time Format
 				
 			Learning how to handle date and time formats in your application is a basic locale management skill: 
    
@@ -132,15 +109,8 @@ var timeFormat = tizen.time.getTimeFormat();
 console.log("Time format is " + timeFormat);
   
     
-			
-		
-	
-		
-			
-				Calculating Date and Time Information
-				Hide
-			
-				
+		
+				Calculating Date and Time Information
 				
 			Learning how to calculate and compare time and date information is a basic time management skill: 
    
@@ -188,20 +158,13 @@ var now = tizen.time.getCurrentDateTime();
 var tomorrow = now.addDuration(new tizen.TimeDuration(1,"DAYS");
   If the number of added time is negative, date or time is set to an earlier moment of time.   
     
-			
-		
-
-		
-			
-				Retrieving Time Change Notifications
-				Hide
-			
-			
+			
+				Retrieving Time Change Notifications
 				
   Learning how to get notifications when the user changes the time or time zone allows you to react to those changes in your application:
   
     To monitor time or time zone changes, define the event handlers:
-    
+    
       The time change event handler is called when the user adjusts the clock:
  function timeChangedCallback()
@@ -219,7 +182,7 @@ function timezoneChangedCallback()
 {
    try 
    {
-      // New time zone can be retrieved through tizen.time.getLocalTimezone()
+      /* New time zone can be retrieved through tizen.time.getLocalTimezone() */
       var zone = tizen.time.getLocalTimezone();
       console.log("Time zone has been set to " + zone);
    }
@@ -227,7 +190,7 @@ function timezoneChangedCallback()
 
 
      
    When the event handlers are defined, register them as listeners:
-       
+       
       Register the time change listener using the setDateTimeChangeListener() method of the TimeUtil interface (in mobile and wearable applications):
  tizen.time.setDateTimeChangeListener(timeChangedCallback);
@@ -240,7 +203,7 @@ tizen.time.setTimezoneChangeListener(timezoneChangedCallback);
    
 
    To stop receiving the notifications, unregister the listeners:
-       
+       
       To unregister the time change listener, use the unsetDateTimeChangeListener() method of the TimeUtil interface:
  tizen.time.unsetDateTimeChangeListener();
@@ -253,12 +216,6 @@ tizen.time.unsetTimezoneChangeListener();
    
 
   
-			
-		
-		
-		
-				
-
 			
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm
index ce9f341..098343f 100644
--- a/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/system/web_setting_tutorial_w.htm
@@ -15,7 +15,7 @@
 
 
 
-
+
     
         
     
@@ -36,7 +36,6 @@
 
 
 Web Setting: Managing the Setting States of the Web View
-	
 
 This tutorial demonstrates how you can manage Web view properties.
 
@@ -57,22 +56,8 @@
    Setting a User Agent for a Running Application Set a Web view user agent string.
    Deleting Web View Cookies Delete Web view cookies.
   
-           
-
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-	
-	
-			
-				Setting a User Agent for a Running Application
-				hide
-			
-			
+  
+				Setting a User Agent for a Running Application
 				
 			Learning how to set a user agent string to perform tasks is a basic Web setting management skill: 
    
@@ -87,15 +72,8 @@ var userAgent = "CUSTOM_USER_AGENT_STRING";
 tizen.websetting.setUserAgentString(userAgent, successCallback);
   
   
-  
-		
-		
-		
-			
-				Deleting Web View Cookies
-				hide
-			
-			
+  
+				Deleting Web View Cookies
 			
 			Learning how to delete Web view cookies is a basic Web setting management skill: 
    
@@ -108,13 +86,6 @@ tizen.websetting.setUserAgentString(userAgent, successCallback);
 tizen.websetting.removeAllCookies(CookiesRemovedSuccessCallback);
   
    
-  
-		
-	
-		
-				
-
-  
 		   
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm
index b837403..93f599e 100644
--- a/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
     
          
     
@@ -47,7 +47,7 @@
 
 
 Tizen: Managing the Basic Tizen Features
- 
+
  
 This tutorial demonstrates how you can utilize generic Tizen Device API features, such as filters, sorting modes, and generic event handlers.
 
@@ -66,28 +66,15 @@
   Warm-up
   Become familiar with the Tizen API basics by learning about:
   
-   Creating Attribute Filters Create attribute filters to limit data query results.
-   Creating Attribute Range Filters Create attribute range filters to limit data query results.
-   Creating Composite Filters Create composite filters to limit data query results.
-   Using Sorting Modes Use sorting modes to organize data query results.
-   Using the Generic Event Handlers Utilize generic event handlers to make application creation easier.    
-   Making Complex Queries Using Filters Create complex queries by combining filters.
+   Creating Attribute Filters Create attribute filters to limit data query results.
+   Creating Attribute Range Filters Create attribute range filters to limit data query results.
+   Creating Composite Filters Create composite filters to limit data query results.
+   Using Sorting Modes Use sorting modes to organize data query results.
+   Using the Generic Event Handlers Utilize generic event handlers to make application creation easier.    
+   Making Complex Queries Using Filters Create complex queries by combining filters.
   
 
-
-        
-            Show All
-            Hide All
-        
-    
-
-    
-        
-            
- Creating Attribute Filters
- Hide
-            
-            
+ Creating Attribute Filters
 
    Learning how to create attribute filters allows you effectively incorporate query methods in your application:
   
@@ -99,14 +86,8 @@ var firstNameFilter = new tizen.AttributeFilter('name.firstName', 'E
 tizen.contact.getDefaultAddressBook().find(successCB, errorCB, firstNameFilter); 
     
 	
-
-        
-        
-            
- Creating Attribute Range Filters
- Hide
-            
-            
+
+ Creating Attribute Range Filters
 
    Learning how to use attribute range filters allows you effectively incorporate query methods in your application:
   
@@ -120,14 +101,8 @@ var dateRangeFilter = new tizen.AttributeRangeFilter("startDate", toda
        Call the find() method of the Calendar interface to find events. The filter (dateRangeFilter) you created is included as a parameter. 
  tizen.calendar.getDefaultCalendar("EVENT").find(successCB, errorCB, dateRangeFilter);
 
     
- 
-        
-        
-            
- Creating Composite Filters
- Hide
-            
-            
+ 
+ Creating Composite Filters
 
    Learning how to use composite filters allows you effectively incorporate query methods in your application:
   
@@ -144,14 +119,8 @@ var nameCompositeFilter = new tizen.CompositeFilter("INTERSECTION", [f
       Call the find() method of the AddressBook interface to find matching contacts. The filter (nameCompositeFilter) you created is included as a parameter.
  tizen.contact.getDefaultAddressBook().find(successCB, errorCB, nameCompositeFilter);
 
     
-  
-        
-        
-            
- Using Sorting Modes
- Hide
-            
-            
+  
+ Using Sorting Modes
 
    Learning how to use sorting modes allows you effectively incorporate query methods in your application:
   
@@ -162,14 +131,8 @@ var sortMode = new tizen.SortMode("name.firstName", "ASC");<
       Call the find() method of the AddressBook interface to find matching contacts. In this example, the filter parameter in the find() method is defined as null, which means that the method retrieves all contacts in the address book.
  tizen.contact.getDefaultAddressBook().find(successCB, errorCB, null, sortMode);
 
     
- 
-        
-		
-			
-				Using the Generic Event Handlers
-				Hide
-			
-			
+ 
+				Using the Generic Event Handlers
 				
 Learning how to use generic, predefined event handlers allows you handle application operations and errors efficiently: 
    
@@ -187,14 +150,8 @@ tizen.application.kill(ctxIDToKill, onSuccess); 
 tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback); 
   
    
-		
-				
-        
-            
- Making Complex Queries Using Filters
- Hide
-            
-            
+		
+ Making Complex Queries Using Filters
  
   Learning how to use filters allows you effectively incorporate complex query methods in your application. You can create queries using AND and OR conditions, like in SQL queries. The following example shows how to make the following query:
   "where ((type='VIDEO' OR type='IMAGE') AND title like '%special%')"
@@ -214,11 +171,7 @@ tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallba
       tizen.content.find(findMediaContentsCallback, onError, null, finalFilter);
 }
 The findMediaContentsCallback() event handler returns the query result.
 
   
-    
-        
-    
-
-  
+
   
 
 
diff --git a/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm b/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
index 1434984..4873fc8 100644
--- a/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/tutorials_tizen_w.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		 
 	
@@ -42,7 +42,7 @@
      
@@ -56,6 +56,8 @@
 	Demonstrates how you can filter data and use generic event handlers.
Application: Controlling Your Applications
 	Demonstrates how you can configure application properties, and manage application data, packages, and alarms.
+	Communication: Connecting to the Network and Communicating with Messages
+	Demonstrates how you can send data to networks and other applications, and receive data back from them.
Content: Getting and Handling Content
 	Demonstrates how you can manage files, playlists, and downloads, and view file details.
Input/Output: Processing Input and Output
@@ -66,8 +68,6 @@
 	Demonstrates how you can manage and retrieve information from the device and its sensors.
User Interface: Notifying Users of New Application Information
 	Demonstrates how you can manage badges and notifications on the screen.
-	Communication: Connecting to the Network and Communicating with Messages in mobile applications only
-	Demonstrates how you can send data to networks and other applications, and receive data back from them.
Social: Managing Personal Data in mobile applications only
 	Demonstrates how you can manage the user's personal data, such as contacts, calendars, location data, and call and browsing history, on the device.
diff --git a/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm
index 5e7eea3..02226fc 100644
--- a/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/ui/badge_tutorial_w.htm
@@ -16,7 +16,7 @@
 
 
 	
-
+
 	
 		 
 	
@@ -37,7 +37,6 @@
 
 
 Badge: Displaying the Notification (Badge) Count on the Home Screen
-
 
 This tutorial demonstrates how you can manage home screen badges.
 
@@ -56,26 +55,11 @@
 Warm-up
 Become familiar with the Badge API basics by learning about:
 
- Managing Badges Get and set the badge number of the application.
- Receiving Notifications on Badge Changes Register an event handler for badge changes.
+ Managing Badges Get and set the badge number of the application.
+ Receiving Notifications on Badge Changes Register an event handler for badge changes.
 
 
- 
-    
-        
-            Show All
-            Hide All
-        
-    
-    
-    
-
-        
-            
-                Managing Badges
-                hide
-            
-            
+                Managing Badges
 
 Getting and setting the badge number is a useful UI management skill:
 
 
 
 
  
       In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional. 
 The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.
-To determine the availability of optional APIs, use the tizen.systeminfo.getCapability() method of the System Information API (in mobile and wearable applications).
+To determine the availability of optional APIs, use the tizen.systeminfo.getCapability() method of the System Information API (in mobile and wearable applications).
 Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see Tizen Web Device API Reference. 
      
    
 			
 	
 	
 		
 			
 
@@ -107,15 +91,8 @@ tizen.badge.setBadgeCount(appId, 0);
 
-            
-        
-
-        
-            
-                Receiving Notifications on Badge Changes
-                hide
-            
-            
+        
+                Receiving Notifications on Badge Changes
 
 Registering a listener for badge count changes to react to new badges and display your badges is a useful UI management skill:
 
@@ -145,12 +122,7 @@ tizen.badge.addChangeListener(["BDb5tZJe47.TestSample"], watcher);
  tizen.badge.removeChangeListener(["BDb5tZJe47.TestSample"]);
 
-            
-        
-
-    
-
-
+           
 
           
 
diff --git a/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm
index cc2e5a4..b7a5f14 100644
--- a/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm
@@ -16,9 +16,9 @@
 
 
 	
-
+
 	
-		
+		 
 	
 	
 		Content
@@ -29,15 +29,15 @@
 		
 		Related Info
 		
-			Notification Guide
-			Notification API for Mobile Web				
+			Notification Guide
+			Notification API for Mobile Web
+			Notification API for Wearable Web
 		
 	
 	
 
 
-Notification: Notifying Users of Application Events
-		
+Notification: Notifying Users of Application Events	
 
 This tutorial demonstrates how you can manage notifications created based on application events.
 
@@ -47,7 +47,8 @@
       
-      
+     
 
 
 Note 
      
     This feature is supported in mobile applications only. The Notification API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
+All mandatory APIs are supported on the Tizen Emulators. 
      
     
   
@@ -60,24 +61,11 @@
    Managing Notifications Retrieve, update, and remove posted notifications.
   
 
-
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-	
-			
-				Creating Simple Notifications
-				hide
-			
-			
+				Creating Simple Notifications
 				
 			Learning how to create status notifications allows you to design interactive applications that provide the user information about their events: 
    
-   Define the status notification properties of the StatusNotificationInit interface:
 +   Define the status notification properties of the StatusNotificationInit interface (in mobile and wearable applications):
  /* Application control */
 var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content", 
                                               null, "image/jpg", null, null);
@@ -95,26 +83,20 @@ var notificationDict =
    /* Application control to be launched when the user selects the notification */
    appControl: appControl
 };
-
 The path in the iconPath and soundPath parameters means a relative file location defined in the Filesystem API. The path is not an absolute file location, but instead uses a virtual root location (such as images in images/image1.jpg). 
-   To be able to display the notification, create a StatusNotification object with the status notification type, title, and the additional notification properties defined in the previous step.
 +
 The path in the iconPath and soundPath parameters means a relative file location defined in the Filesystem API (in mobile and wearable applications). The path is not an absolute file location, but instead uses a virtual root location (such as images in images/image1.jpg). 
+   To be able to display the notification, create a StatusNotification object (in mobile and wearable applications) with the status notification type, title, and the additional notification properties defined in the previous step.
  var notification = new tizen.StatusNotification("SIMPLE", "Simple notification", notificationDict);
 
  
-   To post the notification, use the post() method of the NotificationManager interface:
 +   To post the notification, use the post() method of the NotificationManager interface (in mobile and wearable applications):
  tizen.notification.post(notification);  
 
  
     
-			
-			
-	
-			
-				Creating Progress Notifications
-				hide
-			
-			
+			
+				Creating Progress Notifications
 				
   Learning how to create progress notifications allows you to design interactive applications that inform the user about the progress of an activity:
   
-   Define the status notification properties of the StatusNotificationInit dictionary:
 +   Define the status notification properties of the StatusNotificationInit dictionary (in mobile and wearable applications):
  /* Application control */
 var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
                                               null, "image/jpg", null, null);
@@ -128,11 +110,11 @@ var notificationDict =
    progressType: "PERCENTAGE",
    progressValue: 0
 };
-
 The path in the iconPath and soundPath parameters means a file location defined in the Filesystem API. The path is not an absolute file location, but instead uses a virtual root location (such as images in images/image1.jpg).
-   To be able to display the notification, create a StatusNotification object with the status notification type, title, and the additional notification properties defined in the previous step:
 +
 The path in the iconPath and soundPath parameters means a file location defined in the Filesystem API (in mobile and wearable applications). The path is not an absolute file location, but instead uses a virtual root location (such as images in images/image1.jpg).
+   To be able to display the notification, create a StatusNotification object (in mobile and wearable applications) with the status notification type, title, and the additional notification properties defined in the previous step:
  var notification = new tizen.StatusNotification("PROGRESS", "Progress notification", notificationDict);
 
 
-   Define a function which uses the update() method of the NotificationManager interface to update the posted notification every second:
+   Define a function which uses the update() method of the NotificationManager interface (in mobile and wearable applications) to update the posted notification every second:
 function updateProgressNotification(progress)
 {
    if (progress <= 100)
@@ -156,22 +138,13 @@ tizen.notification.post(notification);
 updateProgressNotification(0);
 
 
   
-	
-			
-		
-		
-		
-			
-				Managing Notifications
-				hide
-			
-			
+				Managing Notifications
 				
 			Learning how to manage notifications allows you to design interactive applications that provide the user information about their events: 
    
    To retrieve notifications:  
-     
-     To retrieve a previously posted notification, use the get() method of the NotificationManager interface with the notification ID as a parameter:
 +     
+     To retrieve a previously posted notification, use the get() method of the NotificationManager interface (in mobile and wearable applications with the notification ID as a parameter:
  var myId = notification.id;
 var myNotification = tizen.notification.get(myId);    
 
  
@@ -191,7 +164,7 @@ myNotification.content = "My notification";
 tizen.notification.update(myNotification);    
 
  
    To remove notifications: 
-     
+     
      To remove a previously posted notification, use the remove() method with the notification ID as a parameter:
  tizen.notification.remove(myNotification.id);
 
  
@@ -199,12 +172,6 @@ tizen.notification.remove(myNotification.id);
 tizen.notification.removeAll();
  
      
   
-

- - - -

diff --git a/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm b/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm index d8a20a5..a4186dc 100644 --- a/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm @@ -16,14 +16,14 @@ -

Related Info

@@ -36,10 +36,6 @@

The user interface (UI) tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen Web applications:

Badge: Displaying the Notification (Badge) Count on the Home Screen
Demonstrates how you can manage home screen badges.

- -

The following tutorials apply in mobile applications only:

Notification: Notifying Users of Application Events
Demonstrates how you can manage notifications created based on application events.

diff --git a/org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm index 3d7817a..7a56726 100644 --- a/org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm @@ -16,7 +16,7 @@ -

This tutorial demonstrates how you can use the Web UI Framework (UIFW), which provides TAU (Tizen Advanced UI Library). TAU is the standard Web UI library for the Tizen platform. It is a collection of UI components that simplify application coding.

@@ -48,15 +47,15 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform.

Become familiar with the Tizen Web UI Framework API basics by learning about:

Creating a Simple Application +
Creating a Simple Application
Create an application with a header and a footer button.
Managing Pages +
Managing Pages
Use pages to organize your application screens.
Managing Page Routing +
Managing Page Routing
Change between multiple application pages.
Managing UI Components +
Managing UI Components
Use UI components in your application, and modify their behavior and appearance.
Creating a Notepad Application +
Creating a Notepad Application
Create an application that allows the user to create and manage notes, and displays the notes on the main page.

@@ -72,24 +71,10 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform. -

Show All
Hide All

- -

- Hide -

To create a simple application in a Web browser:

To create a wearable application with a header and a footer button for closing the application, use the following code:

<div class="ui-page ui-page-active">
    <div class="ui-header">MyApplication</div>
@@ -131,21 +116,14 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform.
     
    
 
-For more information on the standalone Web application concept, see Managing Pages.
+For more information on the standalone Web application concept, see Managing Pages.
 
-

-
-
Managing Pages
- Hide -
-
+
Managing Pages

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.

The page consist of:
-
-

- Hide -

+ +

TAU is basically a UI framework, but since its purpose is to ease application building, it also provides basic functionality for changing pages in multi-screen applications. The mechanics behind page routing are simple, and works without any additional JavaScript code. If necessary, you can use the API to get more powerful page routing functionalities.

To manage page routing:

To route without JavaScript:

TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to #hashtag changes and tries to display the page that has the id attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.

TAU uses every <a> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper href attribute work with the framework router. The active page has an ui-page-active class assigned. Set that class yourself to be sure the correct page is displayed.

<--! pageOne.html -->
+<!--pageOne.html-->
 <div class="ui-page ui-page-active" id="first">
    <div class="ui-content">
       <a href="pageTwo.html">Go to page two</a>
    </div>
 </div>
 
-<--! pageTwo.html -->
+<!--pageTwo.html-->
 <div class="ui-page" id="two">
    <div class="ui-content">
       <a href="pageOne.html">Go to page one</a>
@@ -285,7 +257,7 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform.
 
 To route using the API:
 You can change pages through the TAU API by using the tau.changePage() method:
-<--! pageTwo.html -->
+<!--pageTwo.html-->
 <div class="ui-page ui-page-active" id="first">
    <div class="ui-content">
       You are viewing the first page of the example.
@@ -300,7 +272,7 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform.
    </script>
 </div>
 
-<--! pageTwo.html -->
+<!--pageTwo.html-->
 <div class="ui-page" id="second">
    <div class="ui-content">
       This is the second page of the example.
@@ -335,18 +307,12 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform.

- Hide -

A UI component is basically a UI control with specific functionality, such as an input text box, a drop-down menu, or a touch slider. UI components build your application interface, and can be used anywhere in the application. They speed up application development, since much of the work for handling the UI is implemented in them. Some UI components are directly visible, while others are not (for example, the layout UI component).

+ +

A UI component is basically a UI element with specific functionality, such as an input text box, a drop-down menu, or a touch slider. UI components build your application interface, and can be used anywhere in the application. They speed up application development, since much of the work for handling the UI is implemented in them. Some UI components are directly visible, while others are not (for example, the layout UI component).

A "UI component":

Is a graphical element.
Displays data and modifies other elements.
Allows data modification.

The TAU UI components have high performance. The previous web-ui-fw framework, based on jQuery Mobile, was actually an extension. The framework was redefined, conforming to the Tizen platform. The UI components and the look were also redefined. TAU goes a step further still, breaking the dependence on jQuery and jQuery Mobile, while still being compatible with the latter.

The TAU components were rewritten from scratch, with a different architecture in half of them. Simply put, the building phase (which means creating, modifying, and removing elements and properties), which ensures the "look" of the UI component and its structure, and the control logic were separated. This allows pre-building the markup for faster application runtime and startup.

The key features of the TAU components are:

Performance
Pre-building
Easy to use API

A basic UI component implements 5 protected methods:

build is responsible for the UI component creation. @@ -423,7 +389,7 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform.

Customize the UI components.

Almost all UI components support options which change their look and behavior. The options can be changed either on UI component creation or sometimes at runtime. To specify the options, you can use 2 methods:

Use the data-\* attributes, where \* stands for the option name.

<a href="popup.html" data-rel="popup" data-transition="slideup">I'll slide up</a>

When your UI component is created dynamically, pass the options to the @@ -453,21 +419,15 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform. input = tau.engine.instanceWidget(inputElement, "Checkboxradio"); window.setTimeout(function () { - input.value(false); // toggle checkbox + input.value(false); /* Toggle checkbox */ }, 2500); }); </script>

- Hide -

+ +

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.

@@ -476,14 +436,14 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform.

Generate an application from the Tizen SDK.

Create a simple basic application that can be used for further development:

In the IDE menu, go to +
1. In the IDE menu, go to File > New > Tizen Web Project > WEARABLE-2.3 > Wearable UI > Basic Application.
2. Enter the application name as Notes and click Finish.
The IDE creates the application with a default file structure.

Edit the section header for the index.html file.

Because the application runs on mobile or wearable devices, make sure that you have the correct tau.css styles for the corresponding profile:

Mobile: +

Mobile:

<link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.min.css"/>

Wearable:
```
<link rel="stylesheet" type="text/css" href="lib/tau/wearable/theme/default/tau.min.css"/>
```
@@ -501,14 +461,14 @@ Advanced UI Library). TAU is the standard Web UI library for the Tizen platform. <title>Notepad</title> -  +  <link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head>

Create the pages: the main page for displaying the notes and the editing page for adding and editing notes. -

The main page is the first page, defined with the div block with the ui-page class and main id. -

- - + diff --git a/org.tizen.tutorials/html/web/tutorials_w.htm b/org.tizen.tutorials/html/web/tutorials_w.htm index 11c76af..6d1ac08 100644 --- a/org.tizen.tutorials/html/web/tutorials_w.htm +++ b/org.tizen.tutorials/html/web/tutorials_w.htm @@ -16,7 +16,7 @@ -

diff --git a/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm index 3966e88..3a91d89 100644 --- a/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm @@ -16,7 +16,7 @@ -

diff --git a/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm index a9bbf1f..1b6d715 100644 --- a/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/communication/server_sent_tutorial_w.htm @@ -16,15 +16,15 @@ -

Content

Triggering Server Push Requests
Receiving Server Push Data
Triggering Server Push Requests
Receiving Server Push Data

Related Info

This tutorial demonstrates how you can implement server push messaging.

@@ -58,20 +57,9 @@

Show All
Hide All

- -

-
-
Triggering Server Push Requests
- Hide -
-
+ +
Triggering Server Push Requests
+
To take advantage of the server push feature, you must learn to connect to the server to request push data:
1. Create an EventSource interface instance: @@ -107,22 +95,17 @@
In the following figure, the open event is fired every 2 seconds.

Figure: Push request event
-
+

Source Code

For the complete source code related to this use case, see the following files:
-
-
-
-
Receiving Server Push Data
- Hide -
-
+ +
Receiving Server Push Data
+
To take advantage of the server push feature, you must learn to handle the push data events:
1. Define the data server that the client connects to, according to the event stream interpretation rules.
  @@ -165,18 +148,14 @@
In the following figure, the open event is fired every 2 seconds and the message event shows that push data is received.

Figure: Push message event
-
+

Source Code

For the complete source code related to this use case, see the following files:
-
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm index 1d1f774..3914590 100644 --- a/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/communication/web_messaging_tutorial_w.htm @@ -16,16 +16,16 @@ -

Using Channel Messaging
Send a message from document A to document B using the message channel ports.

Show All
Hide All

- -

-
-
Using Cross-document Messaging
- Hide -
-
+
Using Cross-document Messaging
+
Learning how to use cross-document messaging enhances the communication capabilities of your application:
1. Create document A and B.
Source Code

For the complete source code related to this use case, see the following file:
-
-
-
-
Using Channel Messaging
- Hide -
-
+
Using Channel Messaging
+
Learning how to use channel messaging enhances the communication capabilities of your application:
1. To send a message from document A to document B, create in document A a MessageChannel interface instance, which has 2 message port attributes: port1 and port2. @@ -173,15 +154,11 @@
Source Code

For the complete source code related to this use case, see the following files:
-
-

- - + diff --git a/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm index c9938d8..04be639 100644 --- a/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/communication/websocket_tutorial_w.htm @@ -16,20 +16,20 @@ -

Content

Connecting to the Socket Server +
Connecting to the Socket Server
Sending Data to the Server +
Sending Data to the Server
Receiving Data from the Server +
Receiving Data from the Server
Closing the Socket Connection +
Closing the Socket Connection

Related Info

@@ -43,37 +43,24 @@

This tutorial demonstrates how you can manage the client-server communication.

Become familiar with the WebSocket API basics by learning about:

Connecting to the Socket Server +
Connecting to the Socket Server
Open a connection to the socket server and track the connection status.
Sending Data to the Server +
Sending Data to the Server
Send data to the socket server.
Receiving Data from the Server +
Receiving Data from the Server
Receive data from the socket server.
Closing the Socket Connection +
Closing the Socket Connection
Close the connection to the socket server, and track the closing status.

Show All
Hide All

-
-
Connecting to the Socket Server
- Hide -
-
To use the Web socket features in your application, you must learn to connect to a socket server:
1. Create a WebSocket interface instance using a valid socket server URL as a parameter:
  @@ -103,17 +90,12 @@ webSocket.onerror = function(e)
Source Code

For the complete source code related to this use case, see the following file:
-
-
-
-
Sending Data to the Server
- Hide -
-
+ +
Sending Data to the Server
+
To use the Web socket features in your application, you must learn to connect to send data to the server:
1. Create a WebSocket interface instance using a valid socket server URL as a parameter:
  @@ -138,17 +120,13 @@ function sendMessage(msg)
Source Code

For the complete source code related to this use case, see the following file:
-
-
-
-
Receiving Data from the Server
- Hide -
-
+ + +
Receiving Data from the Server
+
To use the Web socket features in your application, you must learn to receive data from the server:
1. Create a WebSocket interface instance using a valid socket server URL as a parameter:
  @@ -169,17 +147,13 @@ webSocket.onmessage = function(e)
Source Code

For the complete source code related to this use case, see the following file:
-
-
-
-
Closing the Socket Connection
- Hide -
-
+ + +
Closing the Socket Connection
+
To use the Web socket features in your application, you must learn to close the socket connection:
1. Create a WebSocket interface instance using a valid socket server URL as a parameter:
  @@ -212,14 +186,10 @@ function closeConnection()
Source Code

For the complete source code related to this use case, see the following file:
-
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm index 3cd8e62..652fe9e 100644 --- a/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/communication/xmlhttprequest_tutorial_w.htm @@ -16,20 +16,20 @@ -

Content

Sending a Cross-origin Request +
Sending a Cross-origin Request
Uploading Files with Ajax +
Uploading Files with Ajax
Handling Request Events +
Handling Request Events
Tracking Download Progress State +
Tracking Download Progress State

Related Info

@@ -43,38 +43,25 @@

This tutorial demonstrates how you can communicate with a Web server using HTTP requests.

Become familiar with the XMLHttpRequest Level 1 and 2 API basics by learning about:

Sending a Cross-origin Request +
Sending a Cross-origin Request
Send a cross-domain request to the Web server.
Uploading Files with Ajax +
Uploading Files with Ajax
Upload files on the background using Ajax.
Handling Request Events +
Handling Request Events
Track requests through various events.
Tracking Download Progress State +
Tracking Download Progress State
Start and cancel a download and track the download status.

- -

+ +

-
-
Sending a Cross-origin Request
- Hide -
-
To use the XML HTTP request features in your application, you must learn to send a cross-origin request:
1. Create an XMLHttpRequest interface instance:
  @@ -103,18 +90,14 @@
Source Code

For the complete source code related to this use case, see the following files:
-
-
-
-
Uploading Files with Ajax
-Hide -
-
+ + +
Uploading Files with Ajax
+
To use the XML HTTP request features in your application, you must learn to upload files on the background with Ajax:
1. Define the input elements for the file upload. Use the upload() method for the button click event to upload the file when the button is clicked.
  @@ -157,17 +140,12 @@
Source Code

For the complete source code related to this use case, see the following file:
-
-
-
-
Handling Request Events
-Hide -
-
+ +
Handling Request Events
+
To use the XML HTTP request features in your application, you must learn to track requests through events:
1. Define a text element in which to display the request event results:
  @@ -260,18 +238,13 @@
Source Code

For the complete source code related to this use case, see the following files:
-
-
-
-
Tracking Download Progress State
-Hide -
-
+ +
Tracking Download Progress State
+
To use the XML HTTP request features in your application, you must learn to track download progress:
1. Define the input elements for managing a download. Use the sendRequest() and abortRequest() methods for the button click events to start and cancel a download.
  @@ -324,14 +297,10 @@
Source Code

For the complete source code related to this use case, see the following file:
-
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm index 136609e..ad90e97 100644 --- a/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/device/battery_tutorial_w.htm @@ -15,15 +15,15 @@ -

+ diff --git a/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm index 85d556c..57a0414 100644 --- a/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/device/browser_state_tutorial_w.htm @@ -15,19 +15,19 @@ -

@@ -57,60 +57,45 @@

Retrieve the current browser state and track changes in the state.

Show All
Hide All

- -

- hide -

To enhance the user interaction with the device, you must learn to retrieve the browser state:

The updateIndicator() method updates the browser connection state information on the screen to reflect the current state.

To retrieve the current state, use the return value of the onLine attribute of the navigator interface:

+ <!DOCTYPE HTML>
 <html>
    <head>
       <title>Online status</title>
-      <script>
+      <script>
          function updateIndicator() 
          {
             var status = navigator.onLine ? 'online' : 'offline';
             document.getElementById('indicator').textContent = status;
          }
-

Subscribe to event listeners to be informed when the connection state changes:

+          /* Receive event when page is loaded */
          window.onload = updateIndicator;
          /* Receive event when network connection is available */
          window.ononline = updateIndicator;
          /* Receive event when network connection is unavailable */
-         window.onoffline = updateIndicator;
      </script>
+         window.onoffline = updateIndicator;
      </script>
    </head>
    <body>
       <p>The network is: <span id="indicator">(state unknown)</span>
    </body>
 </html>
-

For the complete source code related to this use case, see the following file:

browser_state.htm

Content

Detecting Device Rotation
Detecting Device Acceleration
Detecting Device Rotation
Detecting Device Acceleration

Related Info

This tutorial demonstrates how you can detect device motions in Tizen.

@@ -53,33 +53,15 @@

This tutorial comprises the following tasks:

- -

In the Compass task, we will walk through using the magnetic sensor data to orient a compass needle.
In the Sensor Ball task, we will walk through using the gyro sensor data to create a game.

In the Compass task, we will walk through using the magnetic sensor data to orient a compass needle.

- -

Show All
Hide All

- -

- hide -

Learning how to detect device rotation is a basic device motion handling skill:

Display the device rotation details on the screen: -

+ <h1>Device orientation tutorial</h1>
 <div>
    <p id="alpha"></p>
@@ -87,40 +69,33 @@
    <p id="gamma"></p>
 </div>
 
-<script>
+<script>
    var alphaElem = document.getElementById("alpha");
    var betaElem =document.getElementById("beta");
    var gammaElem = document.getElementById("gamma");
-

To track changes in the device rotation, subscribe to the deviceorientation event: -

+    window.addEventListener("deviceorientation", function(e) 
    {
       alphaElem.innerHTML ='alpha value ' + Math.round(e.alpha);
       betaElem.innerHTML = 'beta value ' + Math.round(e.beta);
       gammaElem.innerHTML = 'gamma value ' + Math.round(e.gamma);
-   }, true);
+   }, true);
 </script>
-
+

For the complete source code related to this use case, see the following file:

device_orientation.html

- hide -

+ +

Learning how to detect device acceleration is a basic device motion handling skill:

Display the device acceleration details on the screen: -

+ <h1>device orientation tutorial</h1>
 <div>
    <p id="firElem"></p>
@@ -128,14 +103,13 @@
    <p id="thirElem"></p>
 </div>
 
-<script>
+<script>
    var firElem = document.getElementById("firElem");
    var secElem =document.getElementById("secElem");
    var thirElem = document.getElementById("thirElem");
-

To track changes in the device acceleration, subscribe to the devicemotion event: -

-+    window.addEventListener("devicemotion", function(e) 
    {
       /* Data for acceleration */
@@ -155,20 +129,15 @@
          + '[ alpha value: ' + Math.round(e.rotationRate.alpha) + " degree ]<br>" 
          + '[ beta value: ' + Math.round(e.rotationRate.beta) + " degree ]<br>"
          + '[ gamma value: ' + Math.round(e.rotationRate.gamma) + ' degree ]';
-   }, true);
+   }, true);
 </script>
-

For the complete source code related to this use case, see the following file:

device_motion.html

- - -

- - + diff --git a/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm b/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm index ddf0634..afee198 100644 --- a/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm +++ b/org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm @@ -15,14 +15,14 @@ -

Related Info

diff --git a/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm index 92cac52..d5f151e 100644 --- a/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/device/screen_orientation_tutorial_w.htm @@ -15,18 +15,18 @@ -

@@ -57,24 +57,12 @@

Lock the screen to a specific orientation and release the lock.

Show All
Hide All

- -

-
-
Managing the Screen Orientation
- Hide -
-
+
Managing the Screen Orientation
+
To enhance the user interaction with the device, you must learn to manage the screen orientation. The application implemented below consists of buttons used to either lock the screen orientation to a specific state or release the lock. The current orientation state is also displayed on the screen.

Figure: Screen orientation application
-
+
1. Define the text and button elements for the screen (the body of the HTML page):
```
@@ -160,16 +148,10 @@
 
 Source Code
  For the complete source code related to this use case, see the following file:
- 
+ 
 	screen_orientation.html
  
-			
```
-

- - + diff --git a/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm b/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm index 7e30da1..64218da 100644 --- a/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm +++ b/org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm @@ -16,7 +16,7 @@ -

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

This task, based on the Compass sample delivered with the Tizen SDK, demonstrates how you can use the DeviceOrientation Event Specification API to create a compass-functionality for your application. For more information on the sample functionality and creating the sample with the full source code, see Compass.

This task consists of the following parts:

Defining the Application Layout defines how to create the application screens.
Initializing the Application defines how to initialize the application.
Managing the Needle Movement defines how to interpret the device orientation data and reflect it in the compass needle.

The following figure shows the main screen of the application.

Figure: Compass screen

Compass screen

main.js Source File -

The application uses the ready event to determine when it has been initialized, and to call the init() method.
```
$(document).ready(init);
```

The orientation data interpretation and needle movement functionality is implemented in the main.js file.

Determining the Cardinal Direction -

The onDeviceOrientation() event handler is called each time the device orientation changes. The new orientation details are received in the dataEvent parameter, and the alpha attribute is used to determine the current cardinal direction to be displayed at the top of the compass screen.
The alpha attribute values range from 0 to 360, where 0 means the cardinal direction points to north, 90 to west, 180 to south, 270 to east.
```
function onDeviceOrientation(dataEvent) 
@@ -132,7 +132,7 @@ else if (angle > 202 && angle < 338)
 
 
```

Updating the Compass Needle Position -

To update the compass needle position on the screen, the change required in the needle position is calculated based on the previous and new angle.

deltaAngle = angleMemory - angle;
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm
index d5e306e..7cc3d7d 100644
--- a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		
 	
@@ -43,7 +43,7 @@
 This task, based on the TouchPaint sample delivered with the Tizen SDK, demonstrates how you can use the Touch Events version 1 API to create a simple paint application using the touch events and the Canvas element. For more information on the sample functionality and creating the sample with the full source code, see TouchPaint. 
 
 This task consists of the following parts: 
-   
+   
    Defining the Application Layout defines how to create the application screens.
    Drawing on Canvas defines how to detect touch events and draw lines on the canvas. 
    Using Drawing Features defines how to select and use drawing features, such as colors and line widths. 
@@ -59,7 +59,7 @@
   The following figure shows the main screen of the application. 
  
 Figure: TouchPaint screen 
- 
+ 
 
 Defining the Main Screen
    
@@ -141,7 +141,7 @@ function touchMoveHandler(e)
 
 Drawing based on Stored Event Coordinates
 Create a drawPath array that remembers the order of the triggered touch events, and edit the touchStartHandler() and touchMoveHandler() event handlers to define the lines the user is drawing.
-
+
 
 When a touchstart event is triggered, the event handler stores the initial position.
 @@ -257,7 +257,7 @@ var strokeWidth = 5;
 Applying the Stroke Styles
    
    main.js Source File
-
+
 Add the color and line width values that the user has selected to the applicable variables, and define event handlers to track changes in the user selection.
  window.onload = function() 
diff --git a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm
index 0eb5730..03d00bb 100644
--- a/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm
@@ -16,7 +16,7 @@
 
 
 
-
+
 	
 		
 	
@@ -43,7 +43,7 @@
 This task, based on the TouchPaint sample delivered with the Tizen SDK, demonstrates how you can use the Touch Events version 1 API to create a simple paint application using the touch events and the Canvas element. For more information on the sample functionality and creating the sample with the full source code, see TouchPaint. 
 
 This task consists of the following parts: 
-   
+   
    Defining the Application Layout defines how to create the application screens.
    Drawing on Canvas defines how to detect touch events and draw lines on the canvas. 
    Using Drawing Features defines how to select and use drawing features, such as colors and line widths. 
@@ -58,7 +58,7 @@
   The following figure shows the main screens of the application. 
  
 Figure: TouchPaint screens 
- 
+ 
 
 Defining the Main Screen
    
@@ -143,7 +143,7 @@ function initCanvas()
 The line drawing functionality is implemented in the main.js file. 
    
 main.js Source File 
-
+
 Define event listeners and handlers to manage the touchstart, touchmove, and touchend events on the canvas. 
  function addCanvasListeners() 
diff --git a/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm
index d704753..42ba4cf 100644
--- a/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm
@@ -15,17 +15,17 @@
 
 
 
-
+
     
          
     
     
 		Content
 		
-			Handling Touch Events
-			Retrieving the Event Point Occurrence
-			Controlling Multi-point Touches
-			Enhancing Touch Responsiveness
+			
Handling Touch Events
+			Retrieving the Event Point Occurrence
+			Controlling Multi-point Touches
+			Enhancing Touch Responsiveness
 			
 		
         Related Info
@@ -40,7 +40,7 @@
 
 
 Touch Events version 1: Controlling Touch Events
-	
+
 
  This tutorial demonstrates how you can use touch events in Tizen.
 
@@ -49,13 +49,13 @@
 Become familiar with the Touch Events version 1 API basics by learning about:
 
 
-Handling Touch Events
+
Handling Touch Events
 Define an element for triggering touch events and the event handlers for reacting to the events.
 
-Retrieving the Event Point Occurrence
+
Retrieving the Event Point Occurrence
 Retrieve the position of the move touch events.
 
-Controlling Multi-point Touches
+
Controlling Multi-point Touches
 Handle multiple concurrent touch events.
 
 
@@ -68,27 +68,12 @@
 Follow-up
 Once we have learned the basics of Touch Events version 1 API, we can now move on to more advanced tasks, including:
 
-Enhancing Touch Responsiveness
+
Enhancing Touch Responsiveness
 Enhance touch responsiveness to improve performance.
   
-           
-
-	
-	
-		
-			Show All
-			Hide All
-		
-	
-	
-	
-	
-		
-			
-				Handling Touch Events
-				Hide
-			
-			
+          
+				Handling Touch Events
+				
 				Learning how to handle touch events improves the user interaction of your application:
 
 
@@ -136,23 +121,23 @@
 
 
 Depending on the touch type, different touch events occur:
-
+
 When the user touches the element, the touchstart and touchend events occur.
 
 Figure: Simple touch (in mobile applications only) 
- 
+ 
 
 
 When the user moves their finger across the element, and then removes their finger, the touchstart, touchmove, and touchend events occur. 
 
 Figure: Moving touch (in mobile applications only) 
- 
+ 
 
 
 When the user long-presses the DOM element, such as text or image, in the element, the touchstart and touchcancel events occur.
 
 Figure: Cancelling touch with long press (in mobile applications only) 
-
+
 
 
 
@@ -180,18 +165,12 @@

For the complete source code related to this use case, see the following file:

touch_event_types.html

-
-
Retrieving the Event Point Occurrence
- Hide -
-
+ +
Retrieving the Event Point Occurrence
+
Learning how to retrieve the coordinate of the touch event point occurrence improves the user interaction of your application:
Source Code

For the complete source code related to this use case, see the following file:
-
-
-
-
Controlling Multi-point Touches
- Hide -
-
+
Controlling Multi-point Touches
+
Learning how to control multiple concurrent touch events improves the user interaction of your application:
Source Code

For the complete source code related to this use case, see the following file:
-
-
-
-
Enhancing Touch Responsiveness
- Hide -
-
+
Enhancing Touch Responsiveness
+
To avoid having a delay in the single tap gesture, you can make the page unscalable, or modify touch responses:
-
-

diff --git a/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm index 3d371a0..9b6c7ad 100644 --- a/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/device/vibration_tutorial_w.htm @@ -15,14 +15,14 @@ -

Content

Managing Vibrations
Managing Vibrations

Related Info

This tutorial demonstrates how you can manage the vibration mechanism on a device.

@@ -44,32 +44,17 @@

Become familiar with the Vibration API basics by learning about:

Managing Vibrations +
Managing Vibrations
Launch and stop vibrations with or without patterns.

- -

Show All
Hide All

- -

- hide -

To enhance the user interaction with the device, you must learn to manage vibrations:

To launch a vibration for a given length of time, call the vibrate() method, which is implemented by all Navigator instances: -

+ <!DOCTYPE html>
 <html>
    <head>
@@ -78,13 +63,13 @@
             content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
       <title>Tizen Vibration API Example code</title>
     
-      <script>
+      <script>
          function singleVibration()
          {
             /* Vibrate for 2 seconds */
             navigator.vibrate(2000);
          }
-
+

To launch a vibration that uses a pattern of vibration and still periods, define the pattern as the vibrate() method parameter:
```
@@ -137,15 +122,10 @@
 
```

For the complete source code related to this use case, see the following file:

vibration_tutorial.html

diff --git a/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm index d78ed0c..a86b60e 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/animation_tutorial_w.htm @@ -16,14 +16,14 @@ -

Content

Creating a Logo Animation +
Creating a Logo Animation

Related Info

@@ -37,7 +37,7 @@

This tutorial demonstrates how you can create animations in your application.

@@ -45,25 +45,12 @@

Become familiar with the CSS Animations Module Level 3 API basics by learning about:

Creating a Logo Animation +
Creating a Logo Animation
Animate the Tizen logo on the screen.

- -

Show All
Hide All

- -

-
-
Creating a Logo Animation
- Hide -
-
+
Creating a Logo Animation
+
To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or Emulator) is switched on:
1. Each letter in the word "TIZEN" consecutively comes in from the left of the screen and moves to the right to its correct location.
Figure: Logo animation (in mobile applications only)
-
+

To create a logo animation:
1. Create the HTML layout for the animation. To be able to manage the movement of each animation part separately, you must define individual elements for each part. @@ -108,7 +95,7 @@
2. Create the animation: -
  Source Code
  
  For the complete source code related to this use case, see the following files:
  -
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm index c449556..b44ad7d 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/background_tutorial_w.htm @@ -16,14 +16,14 @@ -

Content

Creating Backgrounds +
Creating Backgrounds

Related Info

@@ -37,7 +37,6 @@

This tutorial demonstrates how you can create a background for your application.

@@ -45,33 +44,19 @@

Become familiar with the CSS Backgrounds and Borders Module Level 3 API basics by learning about:

Creating Backgrounds +
Creating Backgrounds
Create a multilayer background with the parallax effect.

- -

Show All
Hide All

- -

-
-
Creating Backgrounds
- Hide -
-
+
Creating Backgrounds

To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the CSS box model. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.

Figure: Background with the parallax effect
-
+
1. Prepare 3 images (tizen.png, tizen2.png, and dot.png), each with a transparent background. -
2. Create a div element with id="parallelexample" and a slider input element with the minimum, maximum, and initial value:
```
@@ -112,18 +97,13 @@ function moveLayers()
 
```
Source Code

For the complete source code related to this use case, see the following files:
-
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm index 5451059..8a807d0 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/basic_ui_tutorial_w.htm @@ -16,15 +16,15 @@ -

Content

Using Pseudo-element Selectors
Using Box Model Properties +
Using Pseudo-element Selectors
Using Box Model Properties

Related Info

@@ -38,34 +38,20 @@

+ diff --git a/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm index 493f559..b846b38 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/font_tutorial_w.htm @@ -16,14 +16,14 @@ -

Content

Manipulating Fonts
Manipulating Fonts

Related Info

This tutorial demonstrates how you can modify fonts.

Become familiar with the CSS Fonts Module Level 3 API basics by learning about:

Manipulating Fonts +
Manipulating Fonts
Control the appearance of text using the CSS font properties.

- -

Show All
Hide All

- -

-
-
Manipulating Fonts
- Hide -
-
+
Manipulating Fonts
+
To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:
-

- + diff --git a/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm index efeaf7f..a327409 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/html5forms_tutorial_w.htm @@ -16,15 +16,15 @@ -

Content

Creating a Basic Login Form
Creating an Advanced Login Form +
Creating a Basic Login Form
Creating an Advanced Login Form

Related Info

@@ -38,7 +38,7 @@

This tutorial demonstrates how you can implement Web forms with HTML5.

@@ -46,29 +46,15 @@

Become familiar with the HTML5 Forms API basics by learning about:

Creating a Basic Login Form +
Creating a Basic Login Form
Create a login form with mandatory fields, validity checks, and hint texts.
Creating an Advanced Login Form +
Creating an Advanced Login Form
Create a login form with autofocus, autocompletion, password security, and specific input value patterns.

- -

Show All
Hide All

- -

-
-
Creating a Basic Login Form
- Hide -
-
+
Creating a Basic Login Form
+
To create simple user input forms, you must learn to use the HTML5 features in Web forms:
-
-
-
Creating an Advanced Login Form
- Hide -
-
+ +
Creating an Advanced Login Form
+
To create advanced user input forms, you must learn to use the HTML5 features in Web forms:
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm index 0a9a25b..357e457 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/media_query_tutorial_w.htm @@ -16,14 +16,14 @@ -

Content

Creating a Liquid Layout +
Creating a Liquid Layout

Related Info

@@ -37,7 +37,7 @@

This tutorial demonstrates how you can define media queries to determine the styles to be used in the Web document.

@@ -45,25 +45,11 @@

Become familiar with the Media Queries API basics by learning about:

Creating a Liquid Layout +
Creating a Liquid Layout
Create a liquid document layout that organically changes according to the device resolution.

- -

Show All
Hide All

- -

-
-
Creating a Liquid Layout
- Hide -
-
+
Creating a Liquid Layout

To enhance the user experience of your application, you must learn to define media queries to determine the styles to be used in the Web document. This example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show the optimized layout on both portrait and landscape modes.
@@ -109,7 +95,7 @@ } -
+

The page is easy to view as long as the screen width is about 600 px; however, in a smaller screen below 400 px, the legibility rapidly decreases. You can edit the layout by reducing the number of columns to 1 and moving the Aside area at the bottom of the screen, but those changes then decrease legibility on a wider screen.

With the above media query, the normal resolution has 2 columns (shown on the right in the figure), while in a smaller resolution in a portrait mode only 1 column is used (shown on the left). (The following figure applies to mobile applications only.)

Liquid layout example (in mobile applications only)

If you need to define specific styles for a certain resolution range, simply add more media queries. However, too many conditions make the maintenance harder, so carefully consider what kind of resolution ranges you need. @@ -153,18 +139,12 @@
Source Code

For the complete source code related to this use case, see the following files:
-

- -

- diff --git a/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm index 43e6761..f5da892 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/multi_tutorial_w.htm @@ -16,19 +16,19 @@ -

Content

Creating a Basic Layout
Creating a Layout with Dynamic Content
Creating a Basic Layout
Creating a Layout with Dynamic Content

Related Info

@@ -36,7 +36,6 @@

@@ -66,20 +65,7 @@

Build a GUI with a changing amount of data displayed in multiple columns.

Show All
Hide All

- -

-
-
Creating a Basic Layout
- Hide -
-
+
Creating a Basic Layout

To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a basic layout using CSS:
1. Set the CSS column properties: -
-
-
-
Creating a Layout with Dynamic Content
- Hide -
-
+ +
Creating a Layout with Dynamic Content
+
To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:
1. @@ -252,7 +231,7 @@ img{
2. Set the CSS properties: -
  1. Add the JavaScript code to make the content dynamic: -
-

- - + diff --git a/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm index 260c85d..6b1dcbe 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/selector_tutorial_w.htm @@ -16,16 +16,16 @@ -

Content

Selecting a Single Node
Selecting Multiple Nodes
Creating an Accordion Menu +
Selecting a Single Node
Selecting Multiple Nodes
Creating an Accordion Menu

Related Info

@@ -41,38 +41,23 @@

This tutorial demonstrates how you can retrieve desired elements from a page and modify them.

Become familiar with the Selectors API Level 1 and Level 2 basics by learning about:

Selecting a Single Node
Select a single element using the querySelector() method.
Selecting Multiple Nodes
Select multiple elements using the querySelectorAll() method.
Selecting a Single Node
Select a single element using the querySelector() method.
Selecting Multiple Nodes
Select multiple elements using the querySelectorAll() method.

Once we have learned the basics of the Selectors API Level 1 and Level 2, we can now move on to more advanced tasks, including:

Creating an Accordion Menu
Create a simple accordion menu.
Creating an Accordion Menu
Create a simple accordion menu.

- -

Show All
Hide All

- -

-
-
Selecting a Single Node
- Hide -
-
+
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:
1. 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. @@ -93,22 +78,14 @@ 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:
-
-
-
-
Selecting Multiple Nodes
- Hide -
-
+
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:
1. Select an element in the node list using the querySelector() method: @@ -130,22 +107,15 @@ var i = targetObj.length; }
Figure: Multiple node selection (in mobile applications only)
-
+

Source Code

For the complete source code related to this use case, see the following file:
-
-
-
-
Creating an Accordion Menu
- Hide -
-
+
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.
1. Use CSS transitions to add sliding effects when content appears: @@ -167,14 +137,14 @@ var i = targetObj.length; { 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); @@ -216,18 +186,13 @@ var i = targetObj.length;
```
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:
-
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm index 34afe46..e9d7803 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/session_history_tutorial_w.htm @@ -16,15 +16,15 @@ -

Content

Managing Session History Entries
Detecting Session History Changes
Managing Session History Entries
Detecting Session History Changes

Related Info

This tutorial demonstrates how you can store and use session history details.

Become familiar with the HTML5 session history of browsing contexts API basics by learning about:

Managing Session History Entries +
Managing Session History Entries
Add a new entry to the session history and update its details.
Detecting Session History Changes +
Detecting Session History Changes
Register a change event handler and use the event to take advantage of the stored history information.

-
-
Managing Session History Entries
- Hide -
-
+
Managing Session History Entries

Learning how to manage the session history enhances the user browsing experience in your application:
@@ -96,7 +83,7 @@
To use the session history information: -

- -

For the complete source code related to this use case, see the following file:

history_state.html

- -

+ diff --git a/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm index c37d657..4192c0f 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/text_module_tutorial_w.htm @@ -16,14 +16,14 @@ -

Content

Manipulating Text +
Manipulating Text

Related Info

@@ -38,33 +38,18 @@

@@ -240,14 +225,7 @@

- - - - -

- + diff --git a/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm index 6d97473..204f3d4 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/transform_tutorial_w.htm @@ -16,16 +16,16 @@ -

Content

Creating an Animation with Transforms
Creating Fade Animation Effect
Using Hardware Acceleration +
Creating an Animation with Transforms
Creating Fade Animation Effect
Using Hardware Acceleration

Related Info

@@ -38,8 +38,7 @@

This tutorial demonstrates how you can use transforms with animations.

@@ -47,47 +46,31 @@

Become familiar with the CSS Transforms API basics by learning about:

Creating an Animation with Transforms +
Creating an Animation with Transforms
Create a logo animation where the animation parts rotate and are translated in the 3D space.

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

Creating Fade Animation Effects +
Creating Fade Animation Effects
Create a fade animation effect using JavaScript and CSS3.
Using Hardware Acceleration +
Using Hardware Acceleration
Use hardware acceleration to enhance performance.

- - -

Show All
Hide All

- -

-
-
Creating an Animation with Transforms
- Hide -
-
+
Creating an Animation with Transforms

To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the Creating a Logo Animation use case as a basis, and adds a more diverse visual effect to it with the transform property. In the modified animation:
-
-

- Hide -

+ +

+ +

To enhance the user experience of your application, you must learn to use fade animation effects.

The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:

If an event is fired, it gradually becomes visible. This is known as the Fade In effect.
The existing background is covered with a translucent layer to make the user focus on the pop-up.
When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.

Figure: Fade effect

Fade effect

You can control UI events and change the DOM elements in the following ways:

Events can be controlled with JavaScript, and DOM elements can be devised with CSS.
You can use JavaScript frameworks, such as jQuery, Prototype, and Dojo.

To create fade effects:

Create a modal layer pop-up using jQuery:
```
@@ -379,7 +357,7 @@
 
```

Create a modal layer pop-up using CSS3:

-/* CSS */
+<!--CSS-->
 .mask 
 {
    opacity: 0;
@@ -393,7 +371,7 @@
    z-index: 498;
 }
 
-/* Layer pop-up public styles */
+<!--Layer pop-up public styles-->
 .layerpop 
 {
    opacity: 0;
@@ -418,17 +396,17 @@ function showModalPopup(url)
 There can be a difference in performance depending on how the modal layer pop-up is used.
 The following figures illustrate the difference in event performance, when using JavaScript and CSS3.
 Figure: Event performance using JavaScript 
-
+
 
 Figure: Event performance using CSS3 
-
+
 
 The following figures illustrate the difference in memory performance, when using JavaScript and CSS3.
 Figure: Memory performance using JavaScript 
-
+
 
 Figure: Memory performance using CSS3 
-
+
 
 When the styles are applied using JavaScript, the UI thread is used to create the pop-up. The UI thread increases the usage of CPU memory in proportion to the number of pop-ups used.
 
@@ -438,7 +416,7 @@ function showModalPopup(url)
        Note 
        
        
-       Tizen provides remote debugging through the JavaScript Debugger tool. 
+       Tizen provides remote debugging through the JavaScript Debugger tool. 
        
       
 
@@ -453,15 +431,9 @@ function showModalPopup(url)
        
       
   
-

-
-
Using Hardware Acceleration
- Hide -
-
+ +
Using Hardware Acceleration
+
The rendering performance of a Web application depends on both the Tizen platform and application design.

In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.
@@ -469,9 +441,9 @@ function showModalPopup(url)
To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the -webkit-transition CSS attribute, or 3D transform with the -webkit-transform attribute. For the best performance, set the -webkit-transform attribute to the 3D type.

In all the following examples, a blue box moves from top left to bottom right for a second.

Figure: Blue box
-
+
-
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm index f171d74..f14f175 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/transition_tutorial_w.htm @@ -16,15 +16,15 @@ -

Content

Modifying Element Properties
Using Hardware Acceleration +
Modifying Element Properties
Using Hardware Acceleration

Related Info

@@ -38,50 +38,35 @@

This tutorial demonstrates how you can use transitions to change element property values naturally.

Become familiar with the CSS Transitions Module Level 3 API basics by learning about:

Modifying Element Properties +
Modifying Element Properties
Modify element properties by adding a background color and transition effects, and changing the font color and size.

+ <profile> +

+ <widget-application> +

+ <icon> +

+ <label> +

+ <support-size> +

Once we have learned the basics of CSS Transitions Module Level 3 API, we can now move on to more advanced tasks, including:

Using Hardware Acceleration +
Using Hardware Acceleration
Use hardware acceleration to enhance performance.

- -

Show All
Hide All

- -

-
-
Modifying Element Properties
- Hide -
-
+
Modifying Element Properties
+
To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the http://tizen.org Web site, where the current "UPCOMING EVENTS" area only has the text-decoration: underline property in a mouseover state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various transitions properties in this area.

Figure: Tizen site section to be transitioned
-
+
1. Add a background color change to the "UPCOMING EVENTS" area during a mouseover state:
  -
  1. Originally, the area on the site is defined as follows:
    +
    1. Originally, the area on the site is defined as follows:
      
      <h2 class="block-title">Upcoming Events</h2> @@ -109,13 +94,13 @@
      When the mouse is moved over the "UPCOMING EVENTS" area, the background color changes.
      -
    2. Apply the transition effect in other elements:
      -
      To avoid unnecessary repetition, tie a list of transition elements together into groups a and span: +
      To avoid unnecessary repetition, tie a list of transition elements together into groups a and span:
      .location, .date, .location .anibg, h3 > a, .day > span @@ -132,12 +117,12 @@ .event-info: hover h3 > a {color: #ec4986;}
      -
      +
      
      Emphasize the location phrase by adding an empty element. The emphasis is made by filling the background with black from left to right, and changing the font color to an appropriate value for the black background.
      -
      +
      
      Add the empty element:
      
      @@ -172,22 +157,16 @@
      The transition takes place when the property in question is at the front on the screen. The event-info class is used as the subject for the change, and it has been defined so that the transition occurs simultaneously in the .location and .anibg elements when the mouse hovers over any of the elements tied together as group a.
      -
      +
      
      Source Code
      
      For the complete source code related to this use case, see the following file:
      -
      +
      
      transition_practical.html
      
      -
-
-
-
Using Hardware Acceleration
- Hide -
-
+
Using Hardware Acceleration
+
The rendering performance of a Web application depends on both the Tizen platform and application design.

In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.
@@ -195,9 +174,9 @@
To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the -webkit-transition CSS attribute, or 3D transform with the -webkit-transform attribute. For the best performance, set the -webkit-transform attribute to the 3D type.

In all the following examples, a blue box moves from top left to bottom right for a second.

Figure: Blue box
-
+
-
-

- diff --git a/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm index c53f7d5..c26e71b 100644 --- a/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/dom/woff_tutorial_w.htm @@ -16,14 +16,14 @@ -

Content

Using the WOFF File Format
Using the WOFF File Format

Related Info

Show All
Hide All

- -

-
-
Creating an Application with a Controllable Animation
- hide -
-
+
Creating an Application with a Controllable Animation
+
To optimize the performance of your application, you must learn to create a simple controllable DOM animation.

This example creates a screen with a Tizen pinwheel rotating on it, and buttons to increase or decrease the rotation speed and start or stop the animation.

Figure: Controllable animation (in mobile applications only)
-
+
1. Create the HTML layout, including a <nav> element with 3 buttons and <div> elements for the pinwheel image and text:
```
@@ -83,7 +69,7 @@
 		
```
2. Set the CSS properties: -
-

+ diff --git a/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm b/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm index 1c8bf9e..fb0727e 100644 --- a/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm +++ b/org.tizen.tutorials/html/web/w3c/perf_opt/web_workers_tutorial_w.htm @@ -16,19 +16,19 @@ -

Content

Creating a Web Worker and Handling Errors
Sending Messages between Web Workers
Creating a Web Worker and Handling Errors
Sending Messages between Web Workers

Related Info

@@ -37,7 +37,6 @@

Project type	Application type	Description
Basic	Blank Application	Tizen blank application template.
jQuery Mobile (mobile only)	+ + Single Page Application + Multi Page Application + Master Detail Application + Navigation Application +	Templates based on jQuery Mobile. You can alter the application page header, body, and footer based on the following color themes: + + A - Black + B - Blue + C - Grey + D - Light grey + E - Yellow +
IME application (wearable only)	Web IME Application	Web-based IME application template, which lets you create your own IME by only writing HTML, CSS, and JavaScript code. +

Option	Description
Tab	You can create an application based on a template or sample application.
Category	If the selected category has samples or templates, they are displayed in the list on the left.
Application type	Select the application type. It can be previewed in the description view on the right.
Project name	Enter the name for the project to be created. The project names are restricted to the following regular expression: [a-zA-Z]{1}[a-zA-Z0-9-]{1,24}.
Use default location	If you check this option, the project is created in the $<workspace_location>/$<project_name> directory.
Location	Manually select the location of the project. If you check the Use default location checkbox, this option is disabled.
Working sets	If you want to include your project as a specific working set, select a working set.

Icon	Element	Description
	Path	Shows the widget moving path, if the animation changes the widget position.
	Animator handler	Sets position-related properties.
	Edge	Creates a new curve.
	Curve controller	Controls the curve angle.

Button	Name	Description
	Set data source	Set the selected data source.
	Create	Create a new data source.
	Delete	Remove the selected data source.

Type icon	Description
	Empty data source
	Static data source
	Remote call data source
	System API call data source (Contact, Calendar, and Call History that use the Tizen Web Device API)
	File data source

Icon	Description
	Show the data in the formatted manner.
	Show the data in the compacted manner.
	Open a file (XML or JSON data file). - Open the file and fill in the textbox.
	Reload the opened file.
	Clear the textbox.

Icon	Description
	Expand all fields.
	Collapse all fields.
	Add a new field.
	Remove the selected field.
	Remove all fields.
	Move the selected field upwards.
	Move the selected field downwards.

Property	Description
URL	URL to which the request is sent.
METHOD	Type of request, at the moment only GET-requests are supported.
Proxy	Protocol of the data.
Source Type	Type of data that is received from the server.
Timeout	Timeout (in milliseconds) for the request.
Request Parameters	Query string for requests.

Button	Name	Description
	Create Item	Create a new data model item.
	Create Model	Create a new data model.
	Delete	Remove the selected data model or selected data model item.

Button	Name	Description
	Toggle	Show or hide the binding format message on the tooltip of the widget in the Page Designer editor. The message appears when the binding is successful.
	Delete	Remove the selected binding information.

Name	Description
Common	Consists of the default screen only, and cannot be disabled. - When a CSS style is added to the Common screen, it is applied to all devices. -
Orientation	Consists of portrait and landscape screens, and can be enabled or disabled. - When a CSS style is added to the portrait screen, it is applied to the portrait view of the screen only. -
Pixel Ratio	Consists of various screens, and can be enabled or disabled. - When a CSS style is added to any screen, it is applied only to the device with an equal screen pixel ratio (density of pixels per unit). -
Resolution	Consists of various screens, and can be enabled or disabled. - When a CSS style is added to any screen, it is applied only to the device with an equal screen size. -

Name	Description
W 320x320 [320x320] x1.0 (1:1)	Orientation: Portrait - Pixel ratio: 1.0 - Resolution: 320x320 -
W 312x496 [312x496] x1.0 (10:16)	Orientation: Portrait - Pixel ratio: 1.0 - Resolution: 312X496 -
W 360x480 [360x480] x1.0 (3:4)	Orientation: Portrait - Pixel ratio: 1.0 - Resolution: 360x480 -
M 480x800 [320x533] x1.5 (3:5)	Orientation: Portrait - Pixel ratio: 1.5 - Resolution: 320x533 -
M 800x480 [533X320] x1.5 (5:3)	Orientation: Landscape - Pixel ratio: 1.5 - Resolution: 533x360 -
M 540x960 [360x640] x1.5 (9:16)	Orientation: Portrait - Pixel ratio: 1.5 - Resolution: 360x640 -
M 960X540 [640X360] x1.5 (16:9)	Orientation: Landscape - Pixel ratio: 1.5 - Resolution: 640x360 -
M 720x1280 [360x640] x2.0 (9:16)	Orientation: Portrait - Pixel ratio: 2.0 - Resolution: 360x640 -
M 1280X720 [640x360] x2.0 (16:9)	Orientation: Landscape - Pixel ratio: 2.0 - Resolution: 640x360 -
M 1080x1920 [360x640] x2.0 (9:16)	Orientation: Portrait - Pixel ratio: 2.0 - Resolution: 360x640 -
M 1920x1080 [640x360] x2.0 (16:9)	Orientation: Landscape - Pixel ratio: 2.0 - Resolution: 640x360 -
M 800x1280 [800x1280] x1.0 (10:16)	Orientation: Portrait - Pixel ratio: 1.0 - Resolution: 800x1280 -
M 1280x800 [1280x800] x1.0 (16:10)	Orientation: Landscape - Pixel ratio: 1.0 - Resolution: 1280x800 -
M 1600x2560 [800x1280] x2.0 (10:16)	Orientation: Portrait - Pixel ratio: 2.0 - Resolution: 800x1280 -
M 2560x1600 [1280x800] x2.0 (16:10))	Orientation: Landscape - Pixel ratio: 2.0 - Resolution: 1280x800 -

Zoom button	Description
	Zoom out.
	Zoom in.
	Maximize the design area on the screen.
	Change the design area size to a predefined percentage value.

- Group	- Component	- Description	- Support
Buttons	Controlgroup	Used to group a set of buttons.	Yes
Buttons	Button	Shows a control that you can use to generate an action event when pressed and released.	Yes
Toolbars	Footer	Sets the default bar at the bottom of the page.	Yes
	Header	Sets the default bar at the top of the page.
	Search Filter Bar	Used to search for page content. This widget can be placed in the header.
	Tabbar	Supports the grouped button style in the header.
	Tabbar Item	Used only in the tabbar widget.
	Image	Standard HTML widget.	Not yet
	Button	Shows a control that you can use to generate an action event when pressed and released.	Yes
	Header Button	Used only in the header widget.
	Multiline Text	Used in the header widget.
Content	Audio	Shows a player control that you can use to view and handle multimedia content.	Not yet
	Gallery	Shows images in a gallery.
	Map	Shows a map on the screen.
	Progress Bar	Shows a control that indicates the progress percentage of an on-going operation.	Yes
	Progress	Shows that an operation is in progress.	Not yet
	Token Text Area	Changes a text item to a button.	Yes
	Video	Shows a player control that you can use to view and handle multimedia content.	Not yet
	Virtual Grid	Used to display a list of unlimited data elements on the screen for better performance. - This widget displays the data in the grid format by reusing the existing grid control space. -	Not yet
	Collapsible set	Used to create a set of collapsibles.	Not yet
	Collapsible	Used to create a collapsible block of content.	Not yet
List	Color Bar	Used only in the list item widget.	Not yet
	List	Used to display, for example, navigation data, results, and data entries.	Yes
	List Divider	Used as a list separator for grouping lists. This widget can be used only in the list widget.
	List Item	Used only in the list widget.
	List Action Item	Used only in the list widget.
	Button	Shows a control that you can use to generate an action event when pressed and released.
	Check Box Item	Used only in the check boxes and list item widget.
	Flip Toggle Switch	Shows a 2-state switch on the list item widget.	Not yet
	Maintext Icon1	Used only in the list item widget.	Yes
	Maintext Icon2	Used in the list item widget.
	Subtext Icon	Used only in the list item subtext1 widget.
	Subtext1	Used in the list item widget.
	Subtext2	Used in the multiline list item.
	Thumbnail	Used in the list item widget.
	Progress Bar	Shows a control that indicates the progress percentage of an on-going operation.
	Radio Button Item	Used only in the radio button and list item widgets.
Dynamic List	Extendable List	Used to display a list of unlimited data elements on the screen for better performance. - The list is extended if you click the button at the bottom of the list to load more data elements. -	Not yet
Dynamic List	Virtual List	Used to display a list of unlimited data elements on the screen for better performance. - This widget provides easy access to databases to retrieve and display data. -	Not yet
Form Elements	Form Control	Standard HTML widget.	Yes
	Label
	Legend
	Submit Button
	Text Area
	Text Input
	Check Boxes	Shows a list of options where 1 or more can be selected.
	Check Box Item	Used only in the check boxes and list item widget.
	Date Time Picker	Enables users to select a date and a time.	Not yet
	Radio Buttons	Used to display a list of options of which only 1 can be selected.	Yes
	Radio Button Item	Used only in the radio button and list item widget.
	Slider	Used to change values by dragging a handle.
	Select Menu	Used to select a value in the menu.	Not yet
	Select Menu Item Group	Used only in the select menu widget.
	Select Menu Item	Used only in the select menu and select menu item group widget.
	Flip Toggle Switch	Shows a 2-state switch on the screen.	Yes
HTML	Canvas	Standard HTML widget.	Yes
	Div Control
	Form Control
	Heading
	Image
	Label
	Link
	Submit Button
	Text
	Text Area
	Text Input

Function	Name	Description
	Backward	Move time back towards the beginning of the animation group.
	Play	Play the animation group.
	Forward	Move time forward towards the end of the animation group.
	Repeat	Repeat the animation group.
	Time Edit Box	Show the current time. You can change the time.
	Ease	Adjust the playback speed of the animation.
	Predefined KeyFrame	Add a widget to predefined animations.
	Filter	Show only animated widgets.
	Zoom In/Out	Zoom in and out in the timeline ruler.

Function	Name	Description
	Animation Group Name	Name of the current animation group.
	Animation group drop-down menu	Add, delete, and edit animation groups.

Function	Name	Description
	HTML Widget and CSS Selector List	Shows a list of widgets and selectors on the Animator Editor view.
	Un/Lock	Prevent or allow the editing of widgets.
	In/Visible	Hide or show the widget on the Animator Editor view.
	Add KeyFrame	Add the widget to the KeyFrame.

Function	Name	Description
	Time ruler	Shows the time in microseconds.
	Time bar	Shows the current time.
	Animation state	State of the HTML widget animation, shows the play, start, or end time.
	KeyFrame	Minimum unit for animation.
	KeyFrame Unit	Bundle 2 or more KeyFrames.