<h2 id="manage" name="manage">Managing Alarms</h2>
-<p>Both relative and absolute alarms are available: the relative alarm is triggered after a specified delay from the moment it is created, while an absolute alarm is triggered at a specified time and date. You can also create a recurring alarm that is repeated after a specified period of time, or on the given days of the week at a defined time.</p>
+<p>Both relative and absolute alarms are available: a relative alarm is triggered after a specified delay from the moment it is created, while an absolute alarm is triggered at a specified time and date. You can also create a recurring alarm that is repeated after a specified period of time, or on the given days of the week at a defined time.</p>
-<p>To obtains a list of alarms, and create and delete alarms:</p>
+<p>To obtain a list of alarms, and create and delete alarms:</p>
<ol>
<li><p>To obtain a list of all the alarms that have been set on a device but not yet triggered, use the <code>getAll()</code> method:</p>
<li>Application information retrieval <p>You can display a list of applications that are currently installed or running on the device, and <a href="#retrieve">retrieve application information</a>, such as application name, application ID, and context ID.</p></li>
<li>Application controls
- <p>An application control (app control) is a way of sharing an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your application.</p>
+ <p>An application control (app control) is a way of sharing an application's functionality. Using another application's features through application controls reduces the time and effort needed to develop your own application.</p>
<p>You can use in your application operations, such as calling, Web browsing, and playing media items, which are exported by other applications. This mechanism allows you to conveniently launch other applications whose functionalities you need in your application. If you need to use functionality from another application, launching an application control allows you to request the system to launch that application according to your requirements. You can launch applications based on your immediate needs - you do not need to know their identifiers or specifications. You can use application controls by creating an <a href="#controls">application control request</a>. The request allows you to <a href="#launch">launch other applications</a> to use their functionalities.</p>
<p>If you want to allow other applications to use your application functionalities, you must <a href="#exporting">export your application controls</a> and be prepared to <a href="#handle">receive requests and respond to them</a>.</p></li>
<li>Event handling
<p>You can use the following application information and control features in your Web applications:</p>
<ul>
<li><a href="app_controls_w.htm">Application Controls</a>
- <p>The application controls allow you to share an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your own application. You can also allow other applications to share your functionality by exporting your application control functionalities.</p>
+ <p>The application controls allow you to share an application's functionality. Using another application's features through application controls reduces the time and effort needed to develop your own application. You can also allow other applications to share your functionality by exporting your application control functionalities.</p>
</li>
<li><a href="widget_app_w.htm">Widget Information</a> <strong>in mobile and wearable applications only</strong>
<p>You can manage installed widgets and widget instances in various ways, such as retrieving information about widgets, or getting the widget instances and receiving notifications when the state of the widget changes.</p>
<li><a href="app_info_control_w.htm">Application Information and Controls</a>
-<p>The application controls allow you to share an application's functionality. To use another application's features through application controls reduces your efforts and time to develop your own application. You can also manage and retrieve information from installed widgets and widget instances in various ways.</p></li>
+<p>The application controls allow you to share an application's functionality. Using another application's features through application controls reduces the time and effort needed to develop your own application. You can also manage and retrieve information from installed widgets and widget instances in various ways.</p></li>
<li><a href="app_communication_w.htm">Application Data Exchange</a>
<p>Tizen provides various application models to allow you to create applications targeted for specific tasks:</p>
<ul>
<li>UI Application
- <p>The UI application is the most general Tizen application that has a graphical user interface. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging functionality.</p></li>
+ <p>The UI application has a graphical user interface. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging functionality.</p>
+ <p>The UI application is the most common Tizen application model.</p></li>
<li><a href="service_app_w.htm">Service Application</a>
<p>The service application is a Tizen Web application without a graphical user interface that runs in the background. They can be very useful in performing activities (such as getting sensor data in the background) that need to run periodically or continuously, but do not require any user intervention.</p></li>
<li><a href="web_widget_ww.htm">Widget Application</a> <strong>in wearable applications only</strong>
<p>To enable your application to use the service application functionality:</p>
<ol>
-<li>To make your application visible only for devices that support the Web service application, the application must specify the following feature in the <code>config.xml</code> file:
+<li>To make your application visible in the Tizen Store only for devices that support the Web service application, the application must specify the following feature in the <code>config.xml</code> file:
<pre class="prettyprint">
<widget>
<tizen:feature name="http://tizen.org/feature/web.service"/>
</widget>
</pre>
-<p>ยดThe <code><tizen:service></code> element is a child of the <code><widget></code> element in the <code>config.xml</code> file. With the <code><tizen:service></code> element attributes, you can set the traits of a service application, such as application ID, auto restart, and boot launching capability. With the <code><tizen:service></code> child elements, you can set the starting script, name, and icon for the service application.</p>
+<p>The <code><tizen:service></code> element is a child of the <code><widget></code> element in the <code>config.xml</code> file. With the <code><tizen:service></code> element attributes, you can set the traits of a service application, such as application ID, auto restart, and boot launching capability. With the <code><tizen:service></code> child elements, you can set the starting script, name, and icon for the service application.</p>
<p>The definition of all service elements is listed and explained in the <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">Extending Configuration Elements</a>.</p>
</li>
<li>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API, the application has to request permission by adding the following privilege to the <code>config.xml</code> file:
<li>Only JPEG, PNG, and GIF formats are allowed for image files.</li>
</ul>
-<p>You can create a standalone Web widget, with no parent Web application. In this case, the parent Web application is generated automatically by the Tizen Studio during packaging. However, this kind of widget is used for development and testing purpose only. To be published on the Tizen Store, Web widgets must be combined with a real parent application.</p>
+<p>You can create a standalone Web widget, with no parent Web application. In this case, the parent Web application is generated automatically by the Tizen Studio during packaging. However, this kind of widget is used for development and testing purposes only. To be published on the Tizen Store, Web widgets must be combined with a real parent application.</p>
<p>More than 1 Web widget can be included in a parent Web application, and all widgets and the parent are bundled in 1 package by the Tizen Studio. Web widget resources are included in its Web application package. The Tizen platform installs the Web widget when its parent Web application is installed, and uninstalls the Web widget when its parent Web application is uninstalled. The Web widget resources are all removed together with its parent.</p>
<p align="center"><strong>Figure: Widget and Web application packaging</strong></p>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
</pre>
</li>
-<li>To make your application visible only for devices that support Iotcon, the application must specify the following feature in the <code>config.xml</code> file:
+<li>To make your application visible in the Tizen Store only for devices that support Iotcon, the application must specify the following feature in the <code>config.xml</code> file:
<pre class="prettyprint">
<feature name="http://tizen.org/feature/iot.ocf"/>
<div id="container"><div id="contents"><div class="content">
<h1>Near Field Communication (NFC)</h1>
- <p>Near Field Communication (NFC) service enables information exchange between NFC-enabled devices (called "peers") or tags. The NFC-enabled devices can share contacts, photos, and videos, and can also act as smart cards. You can use an NFC-enabled device to <a href="#tag">send NDEF messages to NFC tags</a> to implement a variety of activities, such as paying the grocery bill or downloading a coupon. With application controls, you can <a href="#operations">launch NFC applications</a> when NFC-related operations occur.</p>
+ <p>
The Near Field Communication (NFC) service enables information exchange between NFC-enabled devices (called "peers") or tags. The NFC-enabled devices can share contacts, photos, and videos, and can also act as smart cards. You can use an NFC-enabled device to <a href="#tag">send NDEF messages to NFC tags</a> to implement a variety of activities, such as paying the grocery bill or downloading a coupon. With application controls, you can <a href="#operations">launch NFC applications</a> when NFC-related operations occur.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
</ul>
<h2 id="values">Acceleration Values</h2>
-<p>The acceleration data is captured into the <code>Acceleration</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/device-motion.html#Acceleration">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/device-motion.html#Acceleration">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device-motion.html#Acceleration">TV</a> applications). The acceleration values include the effect of gravity (9.81 m/s^2), so that when a device lies flat and facing up, the x, y, and z values returned must be 0, 0, and 9.81.</p>
+<p>The acceleration data is captured into the <code>Acceleration</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/device-motion.html#Acceleration">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/device-motion.html#Acceleration">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/device-motion.html#Acceleration">TV</a> applications). The acceleration values include the effect of gravity (9.81 m/s<sup>2</sup>), so that when a device lies flat and facing up, the x, y, and z values returned must be 0, 0, and 9.81.</p>
<p align="center" class="Table"><strong>Table: Acceleration values</strong></p>
<table>
<th>Value</th>
</tr>
<tr>
- <td>x</td><td>Amount of acceleration on the X axis (in m/s^2)</td>
+ <td>x</td><td>Amount of acceleration on the X axis (in m/s<sup>2</sup>)</td>
</tr>
<tr>
- <td>y</td><td>Amount of acceleration on the Y axis (in m/s^2)</td>
+ <td>y</td><td>Amount of acceleration on the Y axis (in m/s<sup>2</sup>)</td>
</tr>
<tr>
- <td>z</td><td>Amount of acceleration on the Z axis (in m/s^2)</td>
+ <td>z</td><td>Amount of acceleration on the Z axis (in m/s<sup>2</sup>)</td>
</tr>
<tr>
<td>timestamp</td><td>Creation timestamp in milliseconds</td>
<h2 id="pauseresume">Handling Pause and Resume Events</h2>
-<p>The pause signals that the application is put into the background. This happens typically when the screen is being locked or when the user switches to a different application. The resume signals that the application returns from the background to the foreground.</p>
+<p>The pause event signals that the application is put into the background. This happens typically when the screen is being locked or when the user switches to a different application. The resume event signals that the application returns from the background to the foreground.</p>
<p>To handle the <code>pause</code> and <code>resume</code> events:</p>
<h2 id="filesystemresolve">Resolving Filesystem Entries</h2>
-<p>To resolve the initial root for other filesystem operations can be performed in 2 ways:</p>
+<p>To resolve the initial root for other filesystem operations:</p>
<ul>
- <li><p>By using the <code>requestFileSystem()</code> global async method:</p>
+ <li>Use the <code>requestFileSystem()</code> global async method:
<ol><li>Define a callback for handling the success and failure of the operation:
<pre class="prettyprint">
successCallback = function(fs) {
File system name temporary
</pre>
</li>
- <li><p>By using the <code>resolveLocalFileSystemURL()</code> global async method.</p>
+ <li>Use the <code>resolveLocalFileSystemURL()</code> global async method.
<p>This method is used to retrieve a <code>DirectoryEntry</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#DirectoryEntry">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#DirectoryEntry">wearable</a>, or <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#DirectoryEntry">TV</a> applications) or <code>FileEntry</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileEntry">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#FileEntry">wearable</a>, or <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#FileEntry">TV</a> applications) using a local URI.</p>
<ol><li>Define the callbacks:
<pre class="prettyprint">
<div class="note">
<strong>Note</strong>
- It is an error to attempt to delete a non-empty directory, or the root directory of a filesystem.
+ You cannot delete a non-empty directory or the filesystem root directory.
</div>
<p>The following output is shown in the system log:</p>
}
}
</pre></li>
- <li><p>To update the editable attributes of the content item, use the <code>update()</code> method. In the example below, the rating of the content item is increased.</p>
+ <li><p>To update the editable attributes of the content item, use the <code>update()</code> method. In the following example, the rating of the content item is increased.</p>
<pre class="prettyprint">
function update(item) {
/* Checks whether the attribute is editable */
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#prerequisites">Prerequisites</a></li>
- <li><a href="#manage">Managing the Power Resource</a></li>
+ <li><a href="#manage">Managing Power Resources</a></li>
<li><a href="#brightness">Managing the Screen Brightness</a></li>
<li><a href="#screen">Managing the Screen State</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>Power States</h1>
-<p>Tizen enables you to access a device's power resource. Currently, the screen and CPU power resources are supported, allowing you to request a specific power state and control the brightness of the screen.</p>
+<p>Tizen enables you to access a device's power resources. Currently, the screen and CPU power resources are supported, allowing you to request a specific power state and control the brightness of the screen.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>The main features of the Power API include:</p>
<ul>
-<li>Managing the power resource
+<li>Managing power resources
<p>You can <a href="#manage">request and release a specific power state</a>.</p></li>
<li>Managing the screen brightness
<p>You can <a href="#brightness">get and set the screen brightness</a>.</p></li>
<tizen:privilege name="http://tizen.org/privilege/power"/>
</pre>
-<h2 id="manage" name="manage">Managing the Power Resource</h2>
+<h2 id="manage" name="manage">Managing Power Resources</h2>
<p>You can request and release a minimum power state for the screen and CPU. The request locks the screen to a minimum state and keeps the device bright and awake. For example, if you set the minimum power state to <code>SCREEN_NORMAL</code>, the device display always remains in the <code>SCREEN_NORMAL</code> level and never goes down to the <code>SCREEN_DIM</code> level.</p>
<p>The following table lists the levels you can request.</p>
/* Retrieve the cellular network property */
tizen.systeminfo.getPropertyValue('CELLULAR_NETWORK', onCellularSuccessCallback);
</pre>
-<p>After retrieving a property, you can use all the details of the property in your code. The property values are returned in the success event handlers defined below.</p> </li>
+<p>After retrieving a property, you can use all the details of the property in your code. The property values are returned in the success event handlers defined in the following steps.</p> </li>
<li> <p>Use the power property values.</p> <p>In the following example, the battery level and charging status of the power property are printed to a console log.</p>
<pre class="prettyprint">
function onPowerSuccessCallback(battery) {
<div id="container"><div id="contents"><div class="content">
<h1>Localization</h1>
-<p>By internationalizing your application, you can ensure that your application works around the world in different locales.</p>
+<p>By localizing your application, you can ensure that your application works around the world in different locales.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
- <p>To internationalize a Tizen Web application:</p>
+ <p>To localize a Tizen Web application:</p>
<ol>
<li>Create a directory for each locale.
<p>Create a directory for each locale that has localized content under the <code>locales</code> directory in package root. The locale names are defined in the W3C IANA <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">language subtag registry</a>.</p>
<li>Scanning available radio channels
<p>You can <a href="#scan">scan the available frequencies to find a channel</a>.</p></li>
<li>Getting information about interruptions
-<p>The Tizen system has a feature to prevent interference between
radio sound and other source of sound. The sound of the radio is interrupted in reaction to various events, such as an incoming call or notification sound. You can use the <code>oninterrupted</code> event handler to <a href="#get_info">detect the reason for the interruption</a>.</p></li>
+<p>The Tizen system has a feature to prevent interference between
the radio and other sound sources. The radio sound is interrupted in reaction to various events, such as an incoming call or notification. You can use the <code>oninterrupted</code> event handler to <a href="#get_info">detect the reason for the interruption</a>.</p></li>
</ul>
<p>The available operations depend on the current radio state. To get information about the current radio state, read the <code>state</code> attribute of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface (the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#RadioState">RadioState</a> enum specifies the possible state values). The following figure illustrates the radio states and transitions between them.</p>
<p align="center"><strong>Figure: FM radio states and transitions</strong></p>
<ul><li>Provider
<p>An on-line service provider entity, such as Google, Vodafone, or Facebook. A service provider is identified by its application ID. The account provider is registered while the application is installed. The information is used in the <strong>Add account</strong> screen in the device settings.</p></li>
<li>Account
-<p>An entity that collects all the data (such as user name, credentials, settings) needed for connecting to services. An account is always bound to a single provider and has a list of service instances bound to the account. The services can be individually enabled and disabled on the given account. For instance, "Laccount1@gmail.com" can identify a Google account, giving access to services, such as gmail, gtalk, Picasa, and Youtube, with each service having a separate service instance bound to the account.</p>
+<p>An entity that collects all the data (such as user name, credentials, settings) needed for connecting to services. An account is always bound to a single provider and has a list of service instances bound to the account. The services can be individually enabled and disabled on the given account. For instance, "Laccount1@gmail.com" can identify a Google account, giving access to services, such as Gmail, Picasa, and Youtube, with each service having a separate service instance bound to the account.</p>
</li></ul>
<h2 id="prerequisites">Prerequisites</h2>
<h3 id="Converting_Event" name="Converting_Event">Converting Event Formats</h3>
<p>You can make event exchange more efficient in your application by converting an event to the iCalendar format (or back) using the <code>CalendarEvent</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/calendar.html#CalendarEvent">wearable</a> applications) constructor and the <code>convertToString()</code> method of the <code>CalendarItem</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarItem">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/calendar.html#CalendarItem">wearable</a> applications).</p>
-<p>The conversion allows you to exchange calendar data between applications by sharing files with the <code>.ics</code> extension. The iCalendar format is independent of the underlying transport protocol, meaning that calendar items can be exchanged using a variety of transports, including HTTP, SMTP, and Infrared. The iCalendar format can be used to store calendar item information and exchange calendar data over the Internet.</p>
+<p>The conversion allows you to exchange calendar data between applications by sharing files with the <code>.ics</code> extension. The iCalendar format is independent of the underlying transport protocol, meaning that calendar items can be exchanged using a variety of transports, including HTTP, SMTP, and infrared. The iCalendar format can be used to store calendar item information and exchange calendar data over the Internet.</p>
<p>The following example shows a sample event in iCalendar format:</p>
<pre class="prettyprint">
BEGIN:VCALENDAR
<div id="container"><div id="contents"><div class="content">
<h1>Server-Sent Events</h1>
-<p>Server-Sent Events feature is used to realize server push in a Web environment. The server push feature has evolved over time from a hidden IFrame through Ajax polling and Comet to the current implementation of server-sent events.</p>
+<p>The Server-Sent Events feature is used to implement server push functionality in a Web environment. The server push feature has evolved over time from a hidden IFrame through Ajax polling and Comet to the current implementation of server-sent events.</p>
<p>This feature is supported in mobile applications only.</p>
<div id="container"><div id="contents"><div class="content">
<h1>DeviceOrientation Event Specification</h1>
-<p>Tizen can detect motion data on the device by providing interaction between the user and device through a new UI or UX.</p>
+<p>You can detect device motion and provide interaction between the user and device based on the motion.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
</pre>
</li>
-<li>Declare the JavaScript variables needed in the application. The <code>lastX</code> and <code>lastX</code> variables indicate the last position of a user event. The <code>mouseBtn</code> variable indicates whether a button or touch event has occurred, and the <code>brushSize</code> variable indicates the current brush size.
+<li>Declare the JavaScript variables needed in the application. The <code>lastX</code> and <code>lastY</code> variables indicate the last position of a user event. The <code>mouseBtn</code> variable indicates whether a button or touch event has occurred, and the <code>brushSize</code> variable indicates the current brush size.
<pre class="prettyprint">
var lastX = 0,
- lastX = 0,
+ lastY = 0,
mouseBtn = false,
brushSize = 4;
var canvas, context;
<p>The main SVG API features include:</p>
<ul>
<li>Creating text and images
-<p>You can <a href="#svg_tag">create add text and images</a> to your application as SVG elements.</p></li>
+<p>You can <a href="#svg_tag">add text and images</a> to your application as SVG elements.</p></li>
<li>Making shapes
<p>You can <a href="#make">create various shapes</a> as graphic elements, such as lines, rectangles, and circles.</p></li>
<li>Grouping SVG elements
<ol>
<li><p>Combine various SVG elements in a group using the <code><g></code> container element, whose <code>id</code> attribute must be defined.</p>
-<p>If you assign a presentation attribute to the group, all the child elements inherit it. For example, in the example below, the stroke color black is defined for the group, which means that both the rectangle and circle elements within the group use the black stroke color.</p>
+<p>If you assign a presentation attribute to the group, all the child elements inherit it. For example, in the following example, the stroke color black is defined for the group, which means that both the rectangle and circle elements within the group use the black stroke color.</p>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="600px">
<li>Creating a player\r
<p>You can <a href="#create">create a simple audio and video player</a>.</p></li>\r
<li>Controlling the playback\r
-<p>You can use the
<code>Play()</code> and <code>Pause()</code> methods of the <code>Media</code> object (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#media-elements" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#media-elements" target="_blank">wearable</a> applications) to <a href="#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>
\r+<p>You can use the
<code>Play()</code> and <code>Pause()</code> methods of the <code>Media</code> object (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#media-elements" target="_blank">mobile</a>, <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#media-elements" target="_blank">wearable</a>, and <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#media-elements" target="_blank">TV</a> applications) to <a href="#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>
\r </li>\r
<li>Retrieving duration and play time\r
<p>You can <a href="#retrieve">retrieve the duration and play time</a> of the media file, if its metadata (such as playing time, duration, and video's width and height) is loaded.</p>\r
<div id="container"><div id="contents"><div class="content">\r
<h1>Web Audio</h1>\r
\r
-<p>Tizen provides a high quality sound by setting space and direction through audio data, and synthesizing them. It is used in the audio engines of the sophisticated games to mix, process, and filter effects.</p>\r
+<p>You can include high-quality sound in your application by setting space and direction through audio data, and synthetizing them. This is used in the audio engines of sophisticated games to mix, process, and filter effects.</p>\r
\r
<p>This feature is supported in mobile applications only.</p>\r
\r
</tbody>\r
</table>\r
<h2 id="loops" name="loops">Removing Slow Loop Statements</h2>\r
-<p> The <code>for - in</code> loop is relatively slower than the other loops, such as <code>for</code>, <code>while</code>, and <code>do - while</code>, as it assigns object properties to the variable (<code>idx</code> in the example below), navigating the object every time the loop is iterated. The following example shows how modifying the loop improves performance.</p>\r
+<p> The <code>for - in</code> loop is relatively slower than the other loops, such as <code>for</code>, <code>while</code>, and <code>do - while</code>, as it assigns object properties to the variable (<code>idx</code> in the following example), navigating the object every time the loop is iterated. The following example shows how modifying the loop improves performance.</p>\r
<pre class="prettyprint">\r
/* Code#1 */\r
var array_list = [0,1,2,3,4,5,6,7,8,9],\r
<p>Using the <code>Gruntfile.js</code> file, tasks, such as <code>concat</code>, <code>uglify</code>, and <code>cssmin</code>, are registered.</p></li>\r
</ol>\r
<h2 id="improvement" name="improvement">Improvement through Grunt</h2>\r
- <p>After running the Grunt plug-in, the below comparison result is shown through the inspector in the Google Chrome™ browser. The expected results vary depending on the application, but since the improvement effects are certain, it is recommended to use Grunt.</p>\r
+ <p>After running the Grunt plug-in, the following comparison result is shown through the inspector in the Google Chrome™ browser. The expected results vary depending on the application, but since the improvement effects are certain, it is recommended to use Grunt.</p>\r
\r
<div class="note">\r
<strong>Note</strong>\r
<p>To optimize the performance of your application, you must learn to retrieve the page visibility status:</p>\r
\r
<ol>\r
- <li><p>Retrieve the page visibility status with the <code>hidden</code> property: </p>\r
+ <li><p>Retrieve the page visibility status with the <code>hidden</code> property:</p>\r
<pre class="prettyprint lang-js">\r
<script>\r
var logText = document.querySelector('.log');\r
\r
<div class="note">\r
<strong>Note</strong>\r
- If an extremely allowable CORS policy is used, it can lead to spoofing, data stealing, relay, and other attacks through communication with malicious application programs. To avoid unexpected consequences, pay attention when defining the response header.\r
+ If an extremely permissive CORS policy is used, it can lead to spoofing, data stealing, relay, and other attacks through communication with malicious application programs. To avoid unexpected consequences, pay attention when defining the response header.\r
</div>\r
</li>\r
</ul>\r
<div class="note">
<strong>Note</strong>
- The pixel array of canvas can be created and edited without direct manipulation of the canvas element.
+ The pixel array of a canvas can be created and edited without direct manipulation of the canvas element.
</div>
</li>
-<li>For the XMLHttpRequest API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">wearable</a> applications), set the response type of the <code>XMLHttpRequest</code> object as <code>arraybuffer</code> to receive a typed array response. This way by delivering data directly in multimedia, you can parse the binary file through the network:
+<li>For the XMLHttpRequest API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">wearable</a> applications), set the response type of the <code>XMLHttpRequest</code> object as <code>arraybuffer</code> to receive a typed array response. This allows you to parse the binary file through the network.
<pre class="prettyprint">
this.setSound = function() {
var request = new XMLHttpRequest();
<p>To enhance the user experience of your application with WebGL™ features, you must learn to use the three.js framework:</p>
<ol>
-<li><p>Download the <a href="http://threejs.org/" target="_blank">three.js library</a> and included it in HTML file:</p>
+<li><p>Download the <a href="http://threejs.org/" target="_blank">three.js library</a> and include it in the HTML file:</p>
<pre class="prettyprint">
<head>
<script src="js/lib/three.js"></script>
<h2 id="js" name="js">JavaScript Behavior</h2>
<p>With the advent of HTML5, numerous powerful HTML5 APIs have been introduced. Since the usage of JavaScript has increased, it has become important to use it correctly and <a href="../perf_opt/js_performance_improvement_w.htm">optimize JavaScript performance</a>.</p>
-<p><a href="#use">JavaScript used in Web applications</a> can be divided into the core, <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMAScript</a>, and <a href="http://www.w3.org/DOM" target="_blank">DOM</a>, which all manipulate HTML. ECMAScript is executed when a method is called, or it can be executed when an event is fired within a HTML document through a linkage with DOM. </p>
+<p><a href="#use">JavaScript used in Web applications</a> can be divided into the core, <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMAScript</a>, and <a href="http://www.w3.org/DOM" target="_blank">DOM</a>, which all manipulate HTML. ECMAScript is executed when a method is called, or it can be executed when an event is fired within a HTML document through a linkage with DOM.</p>
<h3>Using JavaScript with HTML</h3>
<p>Used with HTML, JavaScript works as follows:</p>
<div id="container"><div id="contents"><div class="content">
<h1>Media Queries</h1>
-<p>Media queries allow you to <a href="#rule">apply the CSS differently according to conditions</a> based on the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a <a href="#create">liquid layout</a> that mainly reacts according to the device resolution. </p>
+<p>Media queries allow you to <a href="#rule">apply the CSS differently according to conditions</a> based on the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a <a href="#create">liquid layout</a> that mainly reacts according to the device resolution.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<li><p>In media queries, regardless of CSS priority, CSS which has not been imported still exists based on the conditions.</p></li>
</ul>
-<p>To apply media query, consider an example with the following files:</p>
+<p>The following example illustrates the CSS priority behavior:</p>
<pre class="prettyprint">
<!--example.html-->
<link rel="stylesheet" media="all and (max-width: 768px)" href="c.css">
<h3 id="animated" name="animated">Animated Images</h3>
<p>Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.</p>
- <p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <code>animation</code> attribute.</p>
+ <p>To create a simple and repetitive animation effect (such as the following JAVA mascot) as effectively as possible, use GIF images, JavaScript, or the CSS3 <code>animation</code> attribute.</p>
<p align="center"><strong>Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</strong></p>
<p align="center"><img alt="JAVA mascot character in GIF" src="../../../images/mascot.gif"/></p>
- <p>
Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a>:</p>
+ <p>
The following sections compare the network capacity usage and timeline of the following animation types using the <a href="../../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a>:</p>
<ul>
<li><a href="#gif">GIF animation</a></li>
<li><a href="#js">JavaScript animation</a></li>
<ul>
<li>Defining transform properties
- <p>You can <a href="#prop_trans">defining various properties</a> to control the elements within the coordinate space.</p></li>
+ <p>You can <a href="#prop_trans">define various properties</a> to control the elements within the coordinate space.</p></li>
<li>Using transform methods for 2D and 3D
<p>You can <a href="#twod">use various transform methods</a> in both 2D and 3D.</p></li>
<li>Creating transform animations
<td>color</td>
<td rowspan="2">integer</td>
<td rowspan="5">yes</td>
- <td>Number of bits per a color component</td>
+ <td>Number of bits per color component</td>
</tr>
<tr>
<td>color-index</td>
projects / sdk / online-doc.git / commitdiff