<h2 id="launch" name="launch">Launching Applications with Alarms</h2>
- <p>Learning how to launch application with alarms is a basic alarm management skill:</p>
+ <p>Learning how to launch applications with alarms is a basic alarm management skill:</p>
<ol>
<li> <p>To launch an application when an alarm is triggered, you must define the application as a parameter in the <code>add()</code> method used to add the created alarm to the system:</p>
<pre class="prettyprint">
<li><a href="data_w.htm">Data Control</a>
-<p>You can exchanging SQL- or key-value-type data between applications. All applications (consumers) can request data shared by other applications (providers), and 1 provider can server multiple consumers.</p></li>
+<p>You can exchanging SQL- or key-value-type data between applications. All applications (consumers) can request data shared by other applications (providers), and 1 provider can serve multiple consumers.</p></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<div id="container"><div id="contents"><div class="content">
<h1>Application Controls</h1>
-<p>Tizen provides various application management features, including application launching, event handling, and information retrieval.</p>
+<p>You can use various application management features, including application launching, event handling, and information retrieval.</p>
<p>The Application API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
tizen.application.getAppsContext(onRunningApplicationContexts);
</pre>
<p>The list of application contexts is returned to the given event handler as an array of the <code>ApplicationContext</code> objects.</p></li>
- <li><p>To retrieve basic application information, use the <code>getAppInfo()</code> method of the <code>ApplicationManager</code> interface.</p> <p>Provide the application ID of the application whose information you want as a parameter for the method. If no application ID is set, the method retrieves the information about the application calling the method.</p>
+ <li><p>To retrieve basic application information, use the <code>getAppInfo()</code> method of the <code>ApplicationManager</code> interface.</p> <p>Provide the application ID of the application whose information you want as a parameter for the method. If no application ID is set, the method uses the details of the application calling the method.</p>
<pre class="prettyprint">
var appinfo = tizen.application.getAppInfo('org.tizen.application');
console.log('The application icon path: ' + appinfo.iconPath);
console.log('The application name: ' + appinfo.name);
</pre></li>
- <li><p>To retrieve application context information, use the <code>getAppContext()</code> method of the <code>ApplicationManager</code> interface.</p> <p>Provide the context ID of the application whose context information you want as a parameter for the method. If no context ID is set, the method retrieves the information about the application calling the method.</p>
+ <li><p>To retrieve application context information, use the <code>getAppContext()</code> method of the <code>ApplicationManager</code> interface.</p> <p>Provide the context ID of the application whose context information you want as a parameter for the method. If no context ID is set, the method uses the details of the application calling the method.</p>
<pre class="prettyprint">
var appContext = tizen.application.getAppContext();
console.log('Application context retrieved for app ' + appContext.id);
tizen.badge.addChangeListener(['BDb5tZJe47.TestSample'], watcher);
</pre>
<p><code>BDb5tZJe47.TestSample</code> is the application ID of the application to monitor. The first argument of the <code>addChangeListener()</code> method is an array of application identifiers. This allows you to bind the listener to several applications at same time.</p></li>
-<li><p>To stop receiving notification about badge changes, use the <code>removeChangeListener ()</code> method:</p>
+<li><p>To stop receiving notifications about badge changes, use the <code>removeChangeListener()</code> method:</p>
<pre class="prettyprint">
tizen.badge.removeChangeListener(['BDb5tZJe47.TestSample']);
</pre></li>
<p>You can manage applications and get information about them. You can also handle events and enable an application to run in the background.</p>
-<p>Tizen provides various application models to allow you to create applications targeted for specific tasks. You can create UI applications to run on the foreground, and service applications to run in the background. The service application is used to perform tasks which need to run periodically or continuously but do not require user interaction.</p></li>
+<p>Tizen provides various application models to allow you to create applications targeted for specific tasks. You can create UI applications to run on the foreground, and service applications to run in the background. The service application is used to perform tasks that need to run periodically or continuously, but do not require any user interaction.</p></li>
<li><a href="app_group_w.htm">Application Groups</a>
<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>
+ <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 interaction.</p></li>
<li><a href="web_widget_ww.htm">Widget Application</a> <strong>in wearable applications only</strong>
- <p>The widget application (or widget) is the specialized application that is useful in providing users with quick view of specific information from the parent application. Also, the widget allows users to access certain features without launching the applications. Combined with their parent application, your widgets can have various features to increase usability of your applications.</p></li>
+ <p>The widget application (or widget) is a specialized application that provides the user with a quick view of specific information from the parent application. In addition, the widget allows the user to access certain features without launching the parent application. Combined with the parent application, your widget can have various features to increase the usability of your application.</p></li>
<li>Watch Application <strong>in wearable applications only</strong>
- <p>Tizen watch application is one of Tizen Web applications for wearable devices. It can be shown on the idle screen of the wearable device.</p></li>
+ <p>The watch application provides a watch face as its user interface, showing the current time and updating it every second. The watch application can be shown on the idle screen of the wearable device.</p></li>
</ul>
<h2 id="package" name="package">Application Package Manager</h2>
<h3>Showing Location Settings</h3>
<p>To launch the location setting application to allow the user to configure the source of the location information, use the <code>http://tizen.org/appcontrol/operation/setting/location</code> operation.</p>
-<p>If the location service is not active when an application tries to use the <code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">mobile</a>
or <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">wearable</a> applications), an error occurs. To solve the problem, the application can try to launch the location setting application to let the user enable the location service. The user can activate the GPS, network positioning using the Wi-Fi Positioning System (WPS) and cellular network, or both.</p>
+<p>If the location service is not active when an application tries to use the <code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">mobile</a>
and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">wearable</a> applications), an error occurs. To solve the problem, the application can try to launch the location setting application to let the user enable the location service. The user can activate the GPS, network positioning using the Wi-Fi Positioning System (WPS) and cellular network, or both.</p>
<p align="center"><strong>Figure: Showing location settings</strong></p>
<p align="center"><img src="../../images/common_appcontrol_system_location.png" alt="Showing location settings" /> <img src="../../images/common_appcontrol_system_location2.png" alt="Showing location settings" /></p>
<div id="container"><div id="contents"><div class="content">
<h1>Message Port</h1>
- <p>Tizen Web applications can communicate with other Web or native applications. The message data type for the communication is map data, which consists of a string key and value that can be a string, string array, byte stream, or byte stream array.</p>
+<p>Your Web applications can communicate with other Web or native applications. The message data type for the communication is map data, which consists of a string key and value that can be a string, string array, byte stream, or byte stream array.</p>
<p>The Message Port API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
];
remotePort.sendMessage(messageData);
</pre>
-<p>If you expect a response message, pass the instance of the <code>LocalMessagePort</code> interface as a second parameter of <code>sendMessage()</code> method to specify the message port where the response is sent:</p>
+<p>If you expect a response message, pass the instance of the <code>LocalMessagePort</code> interface as the second parameter of the <code>sendMessage()</code> method to specify the message port where the response is sent:</p>
<pre class="prettyprint">
remotePort.sendMessage(messageData, localPort);
</pre></li>
<div id="container"><div id="contents"><div class="content">
<h1>Package Information</h1>
-<p>Package information features include retrieving detailed information about packages, such as package name, icon path, version details, and package ID. You can receive notifications if packages are updated or removed, or new packages are installed. You can also perform package management tasks, such as installing or uninstalling packages.</p>
+
+<p>You can retrieve detailed information about packages, such as package name, icon path, version details, and package ID. You can receive notifications if packages are updated or removed, or new packages are installed. You can also perform package management tasks, such as installing or uninstalling packages.</p>
<p>The Package API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Service Application</h1>
-<p>A service application is a type of Tizen Web application that provides an environment for running JavaScript in the background without a graphical user interface (the application follows the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMA-262 specification</a>). The service application is used to perform tasks which need to run periodically or continuously but do not require user interaction. For example, a service application can be used for getting data or listening for platform events in the background. As service applications do not have UI components, they run on top of a more light-weight runtime than UI applications. Therefore, you can expect them to perform better and consume less memory.</p>
+<p>A service application is a type of Tizen Web application that provides an environment for running JavaScript in the background without a graphical user interface (the application follows the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMA-262 specification</a>). The service application is used to perform tasks that need to run periodically or continuously, but do not require any user interaction. For example, a service application can be used for getting data or listening for platform events in the background. As service applications do not have UI components, they run on top of a more light-weight runtime than UI applications. Therefore, you can expect them to perform better and consume less memory.</p>
<div class="note">
<strong>Note</strong>
<div class="note">
<strong>Note</strong>
- No privileges need to be separately defined for service applications, since the service application is always packaged with a UI application, and a scope of a privilege defined for the UI application covers the entire application package.
+ No privileges need to be separately defined for service applications, since the service application is always packaged with a UI application, and a privilege defined for the UI application covers the entire application package.
</div>
<h2 id="create" name="create">Managing the Service Application Life-cycle</h2>
<div id="container"><div id="contents"><div class="content">
<h1>Widget Application</h1>
-<p>Widget applications (or simply widgets) are specialized applications useful in providing users with a quick view of specific information from the parent application. Also, widgets allow users to access certain features without launching the parent applications. Combined with the parent application, your widget can have various features to increase the usability of your application set.</p>
+<p>A widget application (or widget) is a specialized application that provides users with a quick view of specific information from the parent application. In addition, the widget can allow the user to access certain features without launching the parent application. Combined with the parent application, your widget can have various features to increase the usability of your application set.</p>
<p>This feature is supported in wearable applications only.</p>
<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 purposes 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 in 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>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
id="http://yourdomain/DynamicSample">
- <!--Information about the widget001-->
+ <!--Information about widget001-->
<tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget001" primary="true">
<tizen:widget-label>TEST_1</tizen:widget-label>
<tizen:widget-content src="widget/widget001/index.html">
</tizen:widget-content>
</tizen:app-widget>
- <!--Information about the widget002-->
+ <!--Information about widget002-->
<tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget002" primary="false">
<tizen:widget-label>TEST_2</tizen:widget-label>
<tizen:widget-content src="widget/widget002/index.html">
</widget>
</pre>
</li>
-<li>The <code>config.xml</code> file of the widget001:
+<li>The <code>config.xml</code> file for widget001:
<pre class="prettyprint">
<tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget001" primary="true">
</tizen:app-widget>
</pre>
</li>
-<li>The <code>config.xml</code> file of the widget002:
+<li>The <code>config.xml</code> file for widget002:
<pre class="prettyprint">
<tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget002" primary="false">
</pre>
<h3 id="animation">Animation</h3>
-<p>For simple and smooth animation effect, use the <code>requestAnimationFrame()</code> JavaScript method.</p>
+<p>For simple and smooth animation effects, use the <code>requestAnimationFrame()</code> JavaScript method.</p>
<p>The following example shows a weather widget implementation with an image animation.</p>
<h2 id="debug">Debugging</h2>
-<p>You can debug and validate your Web widget. Currently, there are 2 approaches in debugging a Web widget:</p>
+<p>You can debug and validate your Web widget. Currently, there are 2 approaches to debugging a Web widget:</p>
<ul>
<li>Console log</li>
<li>Web debugger</li>
<h4 id="user-content-what-is-the-best-way-to-use-the-img-tag">What is the best way to use the <code><img></code> element?</h4>
-<p>To increase performance and reduce memory size, the Web widget engine imposes 2 limitations on the <code><img></code> element:</p>
+<p>To increase performance and reduce the memory footprint, the Web widget engine imposes 2 limitations on the <code><img></code> element:</p>
<ul>
<li>Supported image file formats: PNG, JPG, GIF</li>
<div class="note">
<strong>Note</strong>
- The <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetInstance::id">WidgetInstance.id</a> value is volatile and can change after device reboot.
+ The <code>WidgetInstance.id</code> value (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetInstance::id">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetInstance::id">wearable</a> applications) is volatile and can change after device reboot.
</div>
<ol>
<h3 id="variants" name="variants">Retrieving Widget Variants</h3>
-<p>To retrieve variants representing all of the supported widget size types:</p>
+<p>To retrieve variants representing all the supported widget size types:</p>
<ol>
<li><p>Define a success handler implementing the <code>WidgetVariantsCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetVariantsCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetVariantsCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
<pre class="prettyprint">
<li>Discovering Bluetooth Low Energy devices
<p>You can <a href="#Discovering_BT_LE_Devices">discover Bluetooth Low Energy devices</a> in range. Through the discovery process, you can obtain basic information about available remote devices, such as their names and provided services.</p></li>
<li>Managing the advertising options
- <p>You can <a href="#Managing_Advertising">manage advertising</a> to control how your device announces itself to other Bluetooth Low Energy devices to be discovered.</p></li>
+ <p>You can <a href="#Managing_Advertising">manage advertising</a> to control how your device announces itself to other Bluetooth Low Energy devices for discovery.</p></li>
<li>Connecting to a Bluetooth Low Energy device
<p>You can <a href="#Connecting">connect to a remote Bluetooth Low Energy device</a>. When connected, you can access services and characteristics of the remote device.</p></li>
<li>Receiving notifications on connection state changes
<h2 id="Managing_BT_Adapter" name="Managing_BT_Adapter">Managing the Local Bluetooth Adapter</h2>
<p>You can enable or disable the local Bluetooth adapter, and set the device name using the system-provided service through the <code>ApplicationControl</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications).</p>
- <p>To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on. The Bluetooth API does not provide a method to enable or disable the Bluetooth adapter of the device directly. Whenever Bluetooth is required, request a built-in Settings application to present the relevant switch to the user so that they can enable or disable the Bluetooth.</p>
+ <p>To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on. The Bluetooth API does not provide a method to enable or disable the Bluetooth adapter of the device directly. When Bluetooth is required, you must request the built-in Settings application on the device to let the user enable or disable Bluetooth.</p>
<p align="center"><strong>Figure: Bluetooth setting screen</strong></p>
<p align="center"><img src="../../images/bluetooth_onoff.png" alt="Bluetooth setting screen"/></p>
<ol>
<h1>Content Downloads</h1>
- <p>Tizen enables you to download files from the Internet. You can also monitor the download progress and status.</p>
+ <p>You can download files from the Internet and monitor the progress and status of ongoing downloads.</p>
<p>The Download API is mandatory for the Tizen mobile profile, but optional for the wearable profile. This means that it is supported in all mobile devices, but may not be supported in all wearable devices. The Download API is supported on all Tizen Emulators.</p>
<pre class="prettyprint">
var downloadRequest = new tizen.DownloadRequest('http://download.tizen.org/tools/README.txt', 'downloads');
</pre>
-<p>The final parameter (<code>downloads</code>) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html">TV</a> applications). The folder is not an absolute folder location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (<code>downloads</code> is the default download location in the virtual root).</p></li>
+<p>The final parameter (<code>downloads</code>) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html">TV</a> applications). The folder is not an absolute folder location, but instead uses a <a href="../data/file_system_w.htm#roots">virtual root location</a> (<code>downloads</code> is the default download location in the virtual root).</p></li>
<li><p>It is not possible to download anything when the device is not connected to a network. To check whether any connection is available, use the <code>getPropertyValue()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications):</p>
<pre class="prettyprint">
tizen.systeminfo.getPropertyValue('NETWORK', function(networkInfo) {
}
};
</pre></li>
- <li><p>To start
the download of the HTML file from the Internet, use the <code>start()</code> method of the <code>DownloadManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadManager">TV</a> applications):</p>
+ <li><p>To start
downloading the file from the Internet, use the <code>start()</code> method of the <code>DownloadManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadManager">TV</a> applications):</p>
<pre class="prettyprint">
downloadId = tizen.download.start(downloadRequest, listener);
</pre>
<pre class="prettyprint">
var MIMEType = tizen.download.getMIMEType(downloadId);
</pre>
-<p>The method returns the MIME type the target file which has started downloading.</p> </li>
+ </li>
</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<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"/>
+<widget>
+ <feature name="http://tizen.org/feature/iot.ocf"/>
+</widget>
</pre>
-<p>You can also check whether a device supports the API by using the <code>tizen.systeminfo.getCapability()</code> method and accordingly enabling or disabling the code requiring the API:</p>
+<p>Additionally, to double-check the for Iotcon API support while the application is running, use the <code>tizen.systeminfo.getCapability()</code> method and enable or disable the code that needs the API, as needed:</p>
<pre class="prettyprint">
try {
</pre>
</li>
<li>
- <p>Initialize Iotcon and set a human friendly name:</p>
+ <p>Initialize Iotcon and set a human-friendly name:</p>
<pre class="prettyprint">
tizen.iotcon.initialize(cborPath);
tizen.iotcon.deviceName = 'Device 1';
</pre>
</li>
<li>
- <p>Initialize Iotcon and set a human friendly name:</p>
+ <p>Initialize Iotcon and set a human-friendly name:</p>
<pre class="prettyprint">
tizen.iotcon.initialize(cborPath);
tizen.iotcon.deviceName = 'Device 2';
<div class="note">
<strong>Note</strong>
- Tizen provides the following NFC tag types: <code>GENERIC_TARGET</code>, <code>ISO14443_A</code>, <code>ISO14443_4A</code>, <code>ISO14443_3A</code>, <code>MIFARE_MINI</code>, <code>MIFARE_1K</code>, <code>MIFARE_4K</code>, <code>MIFARE_ULTRA</code>, <code>MIFARE_DESFIRE</code>, <code>ISO14443_B</code>, <code>ISO14443_4B</code>, <code>ISO14443_BPRIME</code>, <code>FELICA</code>, <code>JEWEL</code>, <code>ISO15693</code>, and <code>UNKNOWN_TARGET</code>.
+ Tizen supports the following NFC tag types: <code>GENERIC_TARGET</code>, <code>ISO14443_A</code>, <code>ISO14443_4A</code>, <code>ISO14443_3A</code>, <code>MIFARE_MINI</code>, <code>MIFARE_1K</code>, <code>MIFARE_4K</code>, <code>MIFARE_ULTRA</code>, <code>MIFARE_DESFIRE</code>, <code>ISO14443_B</code>, <code>ISO14443_4B</code>, <code>ISO14443_BPRIME</code>, <code>FELICA</code>, <code>JEWEL</code>, <code>ISO15693</code>, and <code>UNKNOWN_TARGET</code>.
</div>
<p>The NFC forum defines the NFC data exchange format (NDEF) for encapsulating the data exchanged between 2 NFC-enabled devices or an NFC-enabled device and an NFC tag. An <strong>NDEF message</strong> can store data in various formats, such as text, Multipurpose Internet Mail Extension (MIME) type object, or ultra-short RagTime Document (RTD). The NFC tags use NDEF for exchanging messages. Tizen provides the <code>NDEFMessage</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications) to define an NDEF message.</p>
<div class="note">
<strong>Note</strong>
- 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.
+ 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 NFC.
</div>
<p>To enable or disable the NFC service:</p>
<div id="container"><div id="contents"><div class="content">
<h1>Secure Element Access</h1>
- <p>Tizen enables you to access secure elements in a device. You can access various secure elements, such as UICC and SIM cards, embedded secure elements, and secure SD cards.</p>
+ <p>You can access secure elements in a device. You can access various secure elements, such as UICC and SIM cards, embedded secure elements, and secure SD cards.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<div class="note">
<strong>Note</strong>
- To see the results of the message writing, use the system console available in your Tizen Studio or use the <code>sdb dlog</code> command.
+ To see the message writing results, use the system console in the Tizen Studio or use the <code>sdb dlog</code> command.
</div>
<p>The global <code>console</code> object contains some additional features defined by Cordova.</p>
</pre>
</li>
<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>
+ <p>This method is used to retrieve
<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>, and <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>, and <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">
successCallback = function(entry) {
</pre>
</li>
-<li>To delete a directory and all of its content, you can use the <code>removeRecursively()</code> method:
+<li>To delete a directory and its entire content, you can use the <code>removeRecursively()</code> method:
<pre class="prettyprint">
requestFileSystem(TEMPORARY, 100, function(fs) {
fs.root.getDirectory('testDirectory', {create:true}, function(directoryEntry) {
<div class="note">
<strong>Note</strong>
If you use a type attribute as a sort mode parameter, the sorting is not performed alphabetically since the attribute values are stored normally after the type conversion in the platform implementation.
-<p>For example, if the <code>ContentType</code> enum (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentType">TV</a> applications) is the type attribute and the sorting order is <code>"DESC"</code>, the sorting result is ordered according to the listed enum order:</p>
+ <p>For example, if the <code>ContentType</code> enumeration (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentType">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentType">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentType">TV</a> applications) is the type attribute and the sorting order is <code>"DESC"</code>, the sorting result is ordered according to the listed enumerator order:</p>
<ul>
<li>Image</li><li>Video</li><li>Audio</li><li>Other</li></ul>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>File Archiving</h1>
- <p>Tizen enables you to operate on ZIP archive files.</p>
+ <p>You can manage ZIP archives and operate on the archived files.</p>
<p>The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<div id="container"><div id="contents"><div class="content">
<h1>File System</h1>
- <p>
Tizen enables you to <a href="#access">access the files and directories</a> in the device file system.</p>
+ <p>
You can <a href="#access">access the files and directories</a> in the device file system.</p>
<p>The Filesystem API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<h1>Stored Content Management</h1>
-<p>Tizen enables you to search for content (images, videos, music or other) located on the local device storage. You can also perform content management tasks, such as viewing and updating content attributes.</p>
+<p>You can search for content (such as images, videos, and music) located in the local device storage. You can also perform content management tasks, such as viewing and updating content attributes.</p>
<p>The Content API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
});
</pre>
-<p>The example above moves the track 2 positions up on the playlist. The second parameter of the <code>move()</code> method can be a negative value, which means moving the track up, or a positive value, which means moving the track down. If the value is greater than number of tracks above or below, the item is accordingly moved to the beginning or end of the playlist.</p>
+<p>The example above moves the track 2 positions up on the playlist. The second parameter of the <code>move()</code> method can be a negative value, which means moving the track up, or a positive value, which means moving the track down. If the value is greater than number of tracks above or below, the item is moved accordingly to the beginning or end of the playlist.</p>
</li>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Sound and Vibration Feedback</h1>
-<p>Tizen enables you to handle feedback patterns (media or vibration) that can be played as a reaction to specified actions.</p>
+ <p>You can handle feedback patterns (media or vibration) that can be played as a reaction to specified actions.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Power States</h1>
-<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>You can 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>
var charging = battery.isCharging;
}
</pre></li>
- <li> <p>Retrieve the current states of a specific device property using the <code>getPropertyValueArray()</code> method. For example, you can check the state of SIM cards, which are mounted in the Tizen device.</p>
+ <li> <p>Retrieve the current states of a specific device property using the <code>getPropertyValueArray()</code> method. For example, you can check the state of SIM cards mounted in the Tizen device.</p>
<pre class="prettyprint">
function successCallback(properties) {
tizen.systeminfo.getPropertyValueArray('SIM', successCallback);
</pre></li>
-<li> <p>Retrieve the number of system property information using the <code>getCount()</code> method. For example, you can check the number of SIM cards, which are installed in the Tizen device.</p>
+<li> <p>Retrieve the number of system property information using the <code>getCount()</code> method. For example, you can check the number of SIM cards installed in the Tizen device.</p>
<pre class="prettyprint">
console.log('The number of SIM cards in the device is ' + tizen.systeminfo.getCount('SIM'));
<h1>Time and Date Management</h1>
- <p>Tizen enables you to use locale-specific calendar features by retrieving date and time information. You can also change the date, time, and time zone, and make some date- and time-related calculations. The Time API overcomes several limitations of the JavaScript <code>Date</code> object.</p>
+ <p>You can use locale-specific calendar features by retrieving date and time information. You can also change the date, time, and time zone, and make some date- and time-related calculations. The Time API overcomes several limitations of the JavaScript <code>Date</code> object.</p>
<p>The Time API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Web View Settings</h1>
-
- <p>Tizen enables you to set Web view properties.</p>
+<p>You can set Web view properties.</p>
<p>This feature is supported in mobile and TV applications only.</p>
<strong>Note</strong>
In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional.
<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available on all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
-<p>To determine the availability of optional APIs, use the <code>tizen.systeminfo.getCapability()</code> method of the System Information API (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications).</p>
+<p>To determine the availability of optional APIs, use the <code>tizen.systeminfo.getCapability()</code> method of the System Information API (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a>, <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a>, and <a href="../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html">TV</a> applications).</p>
<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For more information on support for each API, see <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p>
</div>
<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>
+<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 <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA Language Subtag Registry</a>.</p>
<p>The Web Runtime loads the proper resource for the current locale according to the W3C widget using the following mark-up:</p>
<pre class="prettyprint">
<tr><td>Bengali</td><td><code>bn-in</code></td></tr>
<tr><td>Bulgarian</td><td><code>bg-bg</code></td></tr>
<tr><td>Catalan</td><td><code>ca-es</code></td></tr>
- <tr><td>Chinese Simplified (ä¸æ–‡ 简体)</td><td><code>zh-cn</code></td></tr>
+ <tr><td>Chinese Simplified (China)</td><td><code>zh-cn</code></td></tr>
<tr><td>Chinese Traditional (Hong Kong)</td><td><code>zh-hk</code></td></tr>
<tr><td>Chinese Traditional (Taiwan)</td><td><code>zh-tw</code></td></tr>
<tr><td>Croatian</td><td><code>hr-hr</code></td></tr>
<tr><td>Slovakian</td><td><code>sk-sk</code></td></tr>
<tr><td>Slovenian</td><td><code>sl-si</code></td></tr>
<tr><td>Spanish (Spain)</td><td><code>es-es</code></td></tr>
- <tr><td>Spanish (Latin)</td><td><code>es-us</code></td></tr>
+ <tr><td>Spanish (Latin America)</td><td><code>es-us</code></td></tr>
<tr><td>Swedish</td><td><code>sv-se</code></td></tr>
<tr><td>Tamil</td><td><code>ta-in</code></td></tr>
<tr><td>Telugu</td><td><code>te-in</code></td></tr>
<div id="container"><div id="contents"><div class="content">
<h1>Audio Management</h1>
- <p>Tizen enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices. The available sound types include, for example, system, notifications, alarms, and media.</p>
+<p>You can control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices. The available sound types include, for example, system, notifications, alarms, and media.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<h1>JPEG File EXIF Information</h1>
-<p>Tizen enables you to access and modify EXIF information in a JPEG file (with the common <code>.jpg</code> extension).</p>
+<p>You can access and modify EXIF information in a JPEG file (with the common <code>.jpg</code> extension).</p>
<p>The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.</p>
<p>Learning how to retrieve EXIF data from JPEG files is a useful content management skill:</p>
<ol>
-<li><p>To retrieve the EXIF data from specific file, you need the URI of an image file in an absolute URI format (for example <code>file:///opt/usr/media/Images/tizen.jpg</code>). The <code>tizen.filesystem.resolve()</code> and <code>toURI()</code> methods can be used to convert a virtual path to a URI.</p>
+<li><p>To retrieve the EXIF data from an image file, you need the absolute URI of the file (for example <code>file:///opt/usr/media/Images/tizen.jpg</code>). The <code>tizen.filesystem.resolve()</code> and <code>toURI()</code> methods can be used to convert a virtual path to a URI.</p>
<pre class="prettyprint">
var fileURI = '';
<p>With a valid <code>exifInfo</code> object, you can access various <code>ExifInformation</code> attributes (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifInformation">TV</a> applications), such as width, height, orientation, and flash.</p>
</li>
-<li>To retrieve an EXIF thumbnail of the image:
+<li>To retrieve the EXIF thumbnail from the image:
<ol type="a"><li>Resolve the input JPEG file:
<pre class="prettyprint">
<div id="container"><div id="contents"><div class="content">
<h1>Media Controller</h1>
- <p>Tizen provides a functionality for you to communicate between the media controller server and client.</p>
+ <p>You can have your client application communicate with a media server.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>You can <a href="#request">send a request</a> 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.</p></li>
<li>Receiving notifications from the server
- <p>You can <a href="#noti">receive notifications on changed made by the server</a> by registering a listener with the <code>addPlaybackInfoChangeListener()</code> method.</p> </li>
+ <p>You can <a href="#noti">receive notifications on changes made by the server</a> by registering a listener with the <code>addPlaybackInfoChangeListener()</code> method.</p> </li>
<li>Sending custom commands
<p>You can <a href="#send_command">use the client to send commands</a> with the <code>sendCommand()</code> method.</p>
</pre>
</li>
-<li>Define a success (and optionally error) event handler by implementing the <code>MediaControllerServerInfoArraySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">wearable</a> applications):
+<li>Define a success (and optionally
, an error) event handler by implementing the <code>MediaControllerServerInfoArraySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">wearable</a> applications):
<pre class="prettyprint">
var mcServerInfo;
</pre>
</li>
-<li>Define a success (and optionally error) callback implementing the <code>MediaControllerSendCommandSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">wearable</a> applications):
+<li>Define a success (and optionally
, an error) callback implementing the <code>MediaControllerSendCommandSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">wearable</a> applications):
<pre class="prettyprint">
function sendCommandSuccessCallback(response) {
<div id="container"><div id="contents"><div class="content">
<h1>Media Key Events</h1>
- <p>
Tizen enables you to handle media keys in your application. The media keys are used to <a href="#state">control multimedia playback</a>. The user can click keys, such as <strong>PLAY</strong> and <strong>FAST FORWARD</strong>, and you can detect the key clicks in your application and change the playback accordingly.</p>
+ <p>
You can manage media key events in your application. The media keys are used to <a href="#state">control multimedia playback</a>. The user can click keys, such as <strong>PLAY</strong> and <strong>FAST FORWARD</strong>, and you can detect the key clicks in your application and change the playback accordingly.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Audio Latency</h1>
- <p>Tizen enables you to control the audio latency mode of the W3C player.</p>
+ <p>You can control the audio latency mode of the W3C player.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>The main features of the Player Util API include:</p>
<div id="container"><div id="contents"><div class="content">
<h1>Radio</h1>
-<p>Tizen enables you to access and control the FM radio on the device.</p>
+<p>You can access and control the FM radio on the device.</p>
<p>This feature is supported in mobile applications only.</p>
<li>Getting information about interruptions
<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>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> enumeration 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>
<p align="center"><img alt="FM radio states and transitions" src="../../images/fmradio-state.png" /></p>
-<p></p>
<h2 id="manage" name="manage">Managing the FM Radio</h2>
<div id="container"><div id="contents"><div class="content">
<h1>Messages</h1>
-<p>Tizen enables you to create applications with messaging functionalities for SMS, MMS, and email.</p>
+<p>You can use messaging functionalities, such as SMS, MMS, and email.</p>
<p>This feature is supported in mobile applications only.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Push Notification</h1>
- <p>Tizen enables you to receive notifications from a push server. The push service is a client daemon that maintains a permanent connection between the device and the push server. Push enables you to push events from an application server to your application on a Tizen device. Connection with the push service is used to deliver push notifications to the application, and process the registration and deregistration requests.</p>
+ <p>You can receive notifications from a push server. The push service is a client daemon that maintains a permanent connection between the device and the push server. Push enables you to push events from an application server to your application on a Tizen device. Connection with the push service is used to deliver push notifications to the application, and process the registration and deregistration requests.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
- <p>Push notification helps your application server send data to the application on devices over network even if the application is not running. Push service can reduce battery consumption and data transfer.</p>
+ <p>Push notification helps your application server send data to your application on a device over a network, even if the application is not running. Using the push service can reduce battery consumption and data transfer.</p>
<p>If a push message arrives when the application is running, the message is automatically delivered to the application. If the application is not running, the push service makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. If the application server sends a message with a <code>LAUNCH</code> option, the push service forcibly launches the application and hands over the message to the application.</p>
</li>
<li>
<p>Make sure the following requirements are fulfilled:</p>
- <ol type="a">
+ <ul>
<li>Internet access
<p>To connect to the Tizen push server and receive notifications from it, the target device or emulator must be able to contact any IP address with the port 5223. If you are in an enterprise network, ensure that the proxy setting in your local network allows outgoing traffic destined for this port number.</p></li>
<li>Package ID
<p>When you create a project in the Tizen Studio, you are given the package ID (randomly generated by the Tizen Studio or entered by yourself). The Tizen push server identifies your applications using the package ID.</p></li>
- <li id="permission" name="permission">Permission to Tizen push servers
- <p>To use the push messaging service, the application needs the permission to access the Tizen push server. Request the permission from the Tizen push service team using one of the following online request forms:</p>
+ <li id="permission" name="permission">Push server access
+ <p>To use the push messaging service, the application needs permission to access the Tizen push server. Request permission from the Tizen push service team using one of the following online request forms:</p>
<ul>
<li>
- <p><a href="https://developer.tizen.org/webform/request-permission-tizen-push-service" target="_blank">Request the permission for a new application</a></p>
+ <p><a href="https://developer.tizen.org/webform/request-permission-tizen-push-service" target="_blank">Request permission for a new application</a></p>
</li>
<li>
- <p><a href="https://developer.tizen.org/webform/request-extend-expiration-date-or-change-quota" target="_blank">Extend the expiration date or change the quota</a> for an application that already has the permission to use the push messaging service</p>
+ <p><a href="https://developer.tizen.org/webform/request-extend-expiration-date-or-change-quota" target="_blank">Extend the expiration date or change the quota</a> for an application that already has permission to use the push messaging service</p>
</li>
</ul>
<p>When the team approves the request, you receive a push app ID corresponding to your package ID.</p>
</li>
- </ol>
+ </ul>
</li>
</ol>
<h1>Notifications</h1>
- <p>Tizen enables you to provide notifications about application events.</p>
+<p>You can provide notifications to the user about application events.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
}
};
</pre>
-<p>The path in the <code>iconPath</code> and <code>soundPath</code> parameters means a relative file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li>
+<p>The path in the <code>iconPath</code> and <code>soundPath</code> parameters means a relative file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm#roots">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li>
<li><p>To be able to display the notification, create a <code>UserNotification</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#UserNotification">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#UserNotification">wearable</a> applications) with the notification type, title, and the additional notification properties defined in the previous step.</p>
<pre class="prettyprint">
var notification = new tizen.UserNotification('SIMPLE', 'Simple notification', notificationGroupDict);
},
};
</pre>
-<p>The path in the <code>iconPath</code> parameter means a file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li>
+<p>The path in the <code>iconPath</code> parameter means a file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm#roots">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li>
<li><p>To be able to display the notification, create a <code>UserNotification</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#UserNotification">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#UserNotification">wearable</a> applications) with the notification type, title, and the additional notification properties defined in the previous step:</p>
<pre class="prettyprint">
var notification = new tizen.UserNotification('PROGRESS', 'Progress notification', notificationGroupDict);
}
}
</pre></li>
- <li><p>To post the notification, use the <code>post()</code> method of the <code>NotificationManager</code> interface. If the progress value is set, the progress bar is displayed in the notification. The progress value can change the amount of progress as it moves forward or backward.</p><p>The application must keep the progress value for its job, because the saved value in the notification status tray can be different (rounded) from the exact progress value.</p>
+ <li>To post the notification, use the <code>post()</code> method of the <code>NotificationManager</code> interface. If the progress value is set, the progress bar is displayed in the notification. The progress value can change the amount of progress as it moves forward or backward.
+ <p>The application must keep the progress value for its job, because the saved value in the notification panel can be different (rounded) from the exact progress value.</p>
<pre class="prettyprint">
tizen.notification.post(notification);
updateProgressNotification(0);
<h1>Calendar</h1>
-<p>Tizen enables you to manage your schedule and tasks in calendars. A calendar is a collection of events or tasks, depending upon the calendar type. Each event or task has a series of attributes, such as purpose, starting time, and duration.</p>
+<p>You can manage your schedule and tasks in calendars. A calendar is a collection of events or tasks, depending on the calendar type. Each event or task has a series of attributes, such as purpose, starting time, and duration.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<div class="note">
<strong>Note</strong>
- Due to time zone and daylight saving time, an event for "today" can actually occur in the past or in the future.
+ Depending on the time zone and daylight saving time, an event for "today" can actually occur in the past or in the future.
</div>
<p>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), you can:</p>
/* Second filter example */
var numberFilter = new tizen.AttributeFilter('remoteParties.remoteParty', 'EXACTLY', '123456789');
</pre></li>
- <li> <p> The <code>CompositeFilter</code> type represents a set of filters. The <code>UNION</code> type composite filter matches any object that is matched by any of its filters; the <code>INTERSECTION</code> type composite filter matches all objects that are matched by all
of its filters.</p> <p>For example, the following code snippet defines a set of filters that include in the query results only the video calls where the remote party has the telephone number 123456789 and the call has started during the year 2009 or 2011:</p>
+ <li> <p> The <code>CompositeFilter</code> type represents a set of filters. The <code>UNION</code> type composite filter matches any object that is matched by any of its filters; the <code>INTERSECTION</code> type composite filter matches all objects that are matched by all its filters.</p> <p>For example, the following code snippet defines a set of filters that include in the query results only the video calls where the remote party has the telephone number 123456789 and the call has started during the year 2009 or 2011:</p>
<pre class="prettyprint">
/* Create the ranges for the time filter */
var y2009Filter = new tizen.AttributeRangeFilter('startTime',
<h1>Contacts</h1>
-<p>
Tizen enables you to manage the contacts and persons listed in your address books. A <code>Contact</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/contact.html#Contact">wearable</a> applications) is always associated with a specific address book. A <code>Person</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Person">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/contact.html#Person">wearable</a> applications) is an aggregation of 1 or more contacts associated with the same person.</p>
+<p>
You can manage the contacts and persons listed in your address books. A <code>Contact</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/contact.html#Contact">wearable</a> applications) is always associated with a specific address book. A <code>Person</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Person">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/contact.html#Person">wearable</a> applications) is an aggregation of 1 or more contacts associated with the same person.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
function addressBooksCB(addressBooks) {
if (addressBooks.length > 0) {
addressBook = addressBooks[0];
- console.log('The addressbook name is ' + addressBook.name);
+ console.log('The address book name is ' + addressBook.name);
}
}
}
</pre></li>
</ol> </li>
- <li>To get and reset the number of person's calls, messages, and emails:
+ <li>To get or reset the number of person's calls, messages, and emails:
<p>You can get the total number of each person's calls, messages, and emails by using the <code>getUsageCount()</code> method. You can also reset the usage count of a person using the <code>resetUsageCount()</code> method of the <code>Person</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Person">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/contact.html#Person">wearable</a> applications), which works in a synchronous mode. To reset the usage count for multiple persons, use the <code>resetUsageCountBatch()</code> method, which works in an asynchronous mode.</p>
<ul>
<li><p>Retrieve the total number of calls, messages, and emails of a particular person:</p>
</pre></li>
<li>
-<p>To set a permission for an application to remove the data, use the <code>setPermission()</code> method in the data saving callback.</p>
-<p>In this example, the permission is granted for an application with the 9PdoiICQ4c ID:</p>
+<p>To grant an application permission to remove the data, use the <code>setPermission()</code> method in the data saving callback.</p>
+<p>In this example, permission is granted for an application with the 9PdoiICQ4c ID:</p>
<pre class="prettyprint">
function onPermissionSet() {
console.log('Successfully set permission');
<div id="container"><div id="contents"><div class="content">
<h1>Device Sensors</h1>
-<p>
Tizen provides interfaces and methods to manage sensor data from <a href="#capability">various sensors on the device</a>. The main purpose of a sensor is to provide a value for the relevant environment parameter.</p>
+<p>
You can access and manage sensor data from <a href="#capability">various sensors on the device</a>. The main purpose of a sensor is to provide a value for the relevant environment parameter.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Human Activity Monitor</h1>
-<p>
Tizen enables you to access and record human activity data from various <a href="#capability">sensors</a> and <a href="#recorder">recorders</a> on the device.</p>
+<p>
You can access and record human activity data from various <a href="#capability">sensors</a> and <a href="#recorder">recorders</a> on the device.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<pre class="prettyprint">
function onchangedCB() {
- console.log('You are looking at your smartwatch');
+ console.log('You are looking at your smart watch');
}
tizen.humanactivitymonitor.start('WRIST_UP', onchangedCB)
<div id="container"><div id="contents"><div class="content">
<h1>Input Device</h1>
- <p>Tizen enables you to manage input device keys.</p>
+ <p>You can manage input device keys and monitor key events.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<h2 id="hw" name="hw">Hardware Key Events</h2>
- <p>The Web IME is capable of not only showing a soft keyboard and emitting key events to client application, but also handling hardware key events and translating them to a specific language. This is very common when entering texts in CJK (Chinese, Japanese, and Korean) languages, where each key event must be composed to produce a final result string.</p>
+ <p>The Web IME is capable of not only showing a soft keyboard and emitting key events to the client application, but also handling hardware key events and translating them to a specific language. This is very common when entering texts in CJK (Chinese, Japanese, and Korean) languages, where each key event must be composed to produce a final result string.</p>
<p>When a hardware key is pressed, the client application receives the key event and requests the Input Service framework to translate the key event. The request is then delivered to the currently selected Web IME through the event handler.</p>
<p>When creating the handler object for <code>WebHelperClient</code>, implement the <code>onProcessKeyEvent()</code> method if you want to translate each hardware key event.</p>
</pre>
<h3 id="chaining">Chaining</h3>
-<p>The animation is inserted to the animation queue automatically before playing. At first, this feature does not seem important for making an animation, but if this method is supported, the LOC (Line Of Code) is decreased significantly.</p>
+<p>The animation is inserted to the animation queue automatically before playing. At first, this feature does not seem important for making an animation, but if the animation is implemented in this way, the LOC (lines of code) can be decreased significantly.</p>
<pre class="prettyprint">
<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
</pre>
<p>The chaining feature makes an intuitive sequence group animation.</p>
<h3 id="effects">Predefined Effects</h3>
+To make an effect, you can combine many single animations, or use a predefined effect.
<p>The following predefined effects are available:</p>
<p><code>bounce</code>, <code>flash</code>, <code>pulse</code>, <code>rubberBand</code>, <code>shake</code>, <code>swing</code>, <code>tada</code>, <code>wobble</code>, <code>jello</code>, <code>bounceIn</code>, <code>bounceInDown</code>, <code>bounceInLeft</code>, <code>bounceInRight</code>, <code>bounceInUp</code>, <code>bounceOut</code>, <code>bounceOutDown</code>, <code>bounceOutLeft</code>, <code>bounceOutRight</code>, <code>bounceOutUp</code>, <code>fadeIn</code>, <code>fadeInDown</code>, <code>fadeInLeft</code>, <code>fadeInRight</code>, <code>fadeInUp</code>,
<code>fadeOut</code>, <code>fadeOutDown</code>, <code>fadeOutLeft</code>, <code>fadeOutRight</code>, <code>fadeOutUp</code>, <code>flip</code>, <code>flipInX</code>, <code>flipInY</code>, <code>flipOutX</code>, <code>flipOutY</code>,
<code>slideOutUp</code>, <code>slideOutDown</code>, <code>slideOutLeft</code>, <code>slideOutRight</code>, <code>zoomIn</code>, <code>zoomInDown</code>, <code>zoomInLeft</code>, <code>zoomInRight</code>, <code>zoomInUp</code>, <code>zoomOut</code>, <code>zoomOutDown</code>, <code>zoomOutLeft</code>, <code>zoomOutRight</code>, <code>zoomOutUp</code>, <code>hinge</code>, <code>rollIn</code>, <code>rollOut</code></p>
-<p>To make an identical effect, you can make many single animations. The following example shows the <code>shake</code> effect:</p>
+<p>The following example shows how you can make a shake effect:</p>
+<ul>
+<li>Using multiple animations:
<pre class="prettyprint">
<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
</pre>
t('#blueBox').tween({translateX: 10}, 100);
t('#blueBox').tween({translateX: -10}, 100);
t('#blueBox').tween({translateX: 0}, 100);
-</pre>
-<p>Or instead, you can use a predefined animation:</p>
+</pre></li>
+<li>Using the predefined <code>shake</code> effect:
<pre class="prettyprint">
<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
</pre>
var t = tau.animation.target;
t('#blueBox').tween('shake', 1000);
</pre>
+</li></ul>
<h3 id="group">Group</h3>
-<p>Sometimes, you need to animate all objects with the same animation. To make an animation group for this purpose, the <code>target()</code> method is provided. If all classes of DOM are <code>box</code>, you can create a box group. Like a CSS selector, '.' means a class selector and '#' means an ID selector. Also, a pure HTML element can be a parameter of the <code>target()</code> method.</p>
+<p>Sometimes, you need to animate all objects with the same animation. To make an animation group for this purpose, the <code>target()</code> method is provided. If all classes of DOM are <code>box</code>, you can create a box group. Like in CSS selectors, '.' is a class selector and '#' is an ID selector. Also, a pure HTML element can be a parameter of the <code>target()</code> method.</p>
<pre class="prettyprint">
<div class="box"></div>
<div class="box"></div>
}
});
</pre>
-<p>In the above animation, the box is translated by Y axis from 0 to 150 and rotated from 0 to 180. Before translating and rotating, the <code>start</code> text is inserted into the box. After translating and rotating, the box's background color is changed to navy.</p>
+<p>In the above animation, the box is translated along the Y axis from 0 to 150 and rotated from 0 to 180. Before translating and rotating, the <code>start</code> text is inserted into the box. After translating and rotating, the box's background color is changed to navy.</p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<p>You can create a simple application using TAU Animation. With the following example, you can learn how to import TAU Animation into your application and create a basic simple application with animation.</p>
<h2 id="load">Loading a TAU Animation</h2>
-<p>You can import the TAU Animation with HTML:</p>
+<p>You can import the TAU Animation module with HTML:</p>
<pre class="prettyprint">
<head>
<title>TAU Animation Sample</title>
<script src="lib/tau/animation/tau.animation.min.js" type="text/javascript"></script>
</head>
</pre>
-<p><code>tau.animation</code> is the namespace of the TAU Animation. You can call TAU Animation methods through this namespace.</p>
+<p><code>tau.animation</code> is the namespace of the TAU Animation module. You can call TAU Animation methods through this namespace.</p>
<div class="note">
<strong>Note</strong>
t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
</pre>
-<p>If you want to animate the HTML element directly, you can use <code>mixin</code>. You can animate any effect, transform, or CSS property. You can use the 'target' method. Like a CSS selector, '.' means class selector, '#' means ID selector. Also, a pure HTML element can be a parameter of the target method.</p>
+<p>If you want to animate the HTML element directly, you can use <code>mixin</code>. You can animate any effect, transform, or CSS property. You can use the 'target' method. Like in CSS selectors, '.' is a class selector and '#' is an ID selector. Also, a pure HTML element can be a parameter of the target method.</p>
<p>Available animation methods:</p>
<ul><li>Predefined effects
</pre></li></ul>
-<p>The following code snippet shows the full code for the first animation example described above.</p>
+<p>The following example shows the full code for the first animation described above.</p>
<pre class="prettyprint">
<!DOCTYPE html>
<html>
<div id="container"><div id="contents"><div class="content">
<h1>Globalization</h1>
- <p>The TAU Globalize utility supports internationalization and localization. It wraps the <a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> functionality for easy access from Tizen Web applications, and it is extended to support the right-to-left (RTL) languages.</p>
+ <p>The TAU Globalize utility supports internationalization and localization. It wraps the <a href="https://github.com/jquery/globalize" target="_blank">Globalize</a> functionality for easy access from Tizen Web applications, and it is extended to support right-to-left (RTL) languages.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<li><code>formatMessage()</code>:
<p>This method supports custom locale data.</p>
<ol>
- <li>Create a directory for each locale that has localized content under the locales directory in the project root. The locale names are defined in the <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA language subtag registry</a>.
+ <li>Create a directory for each locale that has localized content under the locales directory in the project root. The locale names are defined in the <a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank">W3C IANA Language Subtag Registry</a>.
<pre class="prettyprint">
index.html
locale
<ul class="toc">
<li><a href="#structure">Page Structure</a></li>
<li><a href="#createone">Creating Single Page</a></li>
- <li><a href="#createtwo">Creating Multiple Pages in One HTML Code</a></li>
+ <li><a href="#createtwo">Creating Multiple Pages in One HTML File</a></li>
<li><a href="#pageRouting">Page Routing</a></li>
</ul>
<p class="toc-title">Related Info</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<h2 id="structure">Page Structure</h2>
-<p>The page consist of:</p>
+<p>A page consists of:</p>
<ul>
<li>Header area
<p>Shows the user which page is currently open. The header can contain buttons, menus, and toolbars. The header is optional.</p></li>
</li>
</ol>
-<h2 id="createtwo">Creating Multiple Pages in One HTML Code</h2>
+<h2 id="createtwo">Creating Multiple Pages in One HTML File</h2>
<p>You can implement a template containing multiple <code>page</code> containers in the application's <code>index.html</code> file.</p>
</div>
</div>
</pre>
-<p>With multiple pages in one HTML code, you can use only the ID of the page in the <code>href</code> attribute:</p>
+<p>With multiple pages in one HTML file, you can use only the ID of the page in the <code>href</code> attribute:</p>
<pre class="prettyprint">
<div class="ui-page ui-page-active" id="first">
<div class="ui-content">
<h2 id="event">Event Handling</h2>
-<p>Some events are changed. The following examples illustrate how to handle events:</p>
+<p>Some events have changed. The following examples illustrate how to handle events:</p>
<ul>
<li>Swipe event
<p>In the previous version, the <code>swipe</code> event was triggered in every area in the page automatically, but since 2.4, for efficient trigger and handling, the <code>swipe</code> event is only triggered when the Gesture event is created.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Vibration</h1>
-<p>To provide tactile feedback to the user or to interact with the user even when the device volume is low, you can <a href="#manage">make a Tizen device vibrate</a>. The vibration provides better user experience and therefore improves the perception of your application. </p>
+<p>To provide tactile feedback to the user or to interact with the user even when the device volume is low, you can <a href="#manage">make a Tizen device vibrate</a>. The vibration can provide a better user experience and improve the perception of your application. </p>
<p>This feature is supported in mobile and wearable applications only.</p>
<div id="container"><div id="contents"><div class="content">
<h1>File</h1>
- <p>Tizen enables you to access local storage to read file information. In mobile applications, you can also manipulate files by accessing sandboxed file systems.</p>
+<p>You can access a local storage to read file information. In mobile applications, you can also manipulate files by accessing sandboxed file systems.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<div id="container"><div id="contents"><div class="content">
<h1>Indexed Database</h1>
- <p>In HTML5, an indexed database is a local storage used to store and manipulate data in a client. You can implement effective searches using an index as a simple storage structure in key-value format.
+ <p>In HTML5, an indexed database is a local storage used to store and manipulate key-value format data in a client. You can implement effective searches using an index, which is a specialized persistent key-value storage containing entries from the database based on specific property values.
</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<h2 id="execute_a" name="execute_a">Executing SQL Statements Asynchronously</h2>
-<p>To provide users with SQL database features, you must learn to execute SQL statements asynchronously:</p>
+<p>To execute SQL statements asynchronously:</p>
<ol>
<li>
<p>In the Web SQL Database API, each SQL statement must be executed under a transaction. To create a transaction, use either <code>transaction()</code> or <code>readTransaction()</code> method returned by the <code>openDatabase()</code> method:</p>
<h2 id="execute" name="execute">Executing SQL Statements Synchronously</h2>
-
-<p>To provide users with SQL database features, you must learn to execute SQL statements synchronously:</p>
+<p>To execute SQL statements synchronously:</p>
<ol>
<li>
<p>In the Web SQL Database API, each SQL statement must be executed under a transaction. To create a transaction, use either <code>transaction()</code> or <code>readTransaction()</code> method returned by the <code>openDatabaseSync()</code> method:</p>
<h2 id="import" name="import">Importing the WebGL™ Context</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to import the WebGL™ context from the HTML5 <code><canvas></code> element:</p>
+<p>To import the WebGL™ context from the HTML5 <code><canvas></code> element:</p>
<ol>
<li><p>Define the <code><canvas></code> element ID and set its width and height:</p>
<pre class="prettyprint">
<h2 id="shader" name="shader" >Initializing Programs and Shaders</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to bind the shaders and GLSL ES in WebGL™ by using shaders and programs:
+<p>To bind the shaders and GLSL ES in WebGL™ by using shaders and programs:
</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
<h2 id="buffer" name="buffer">Initializing Buffers</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to create buffers, bind them, and store data in them:
+<p>To create buffers, bind them, and store data in them:
</p>
<ol>
<h2 id="draw" name="draw">Drawing Shapes on the Screen</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to display shapes on the screen using attribute array data and a drawing buffer:
+<p>To display shapes on the screen using attribute array data and a drawing buffer:
</p>
<ol>
<h2 id="color" name="color">Setting Colors</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to set colors using attributes and a buffer:</p>
+<p>To set colors using attributes and a buffer:</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
<h2 id="texture" name="texture">Setting Textures</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to use a texture, which is an image applied to the surface:</p>
+<p>To apply an image from a file to a surface as a texture:</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES). In this example, the texture coordinate attribute is used instead of the vertex coordinate attribute.</p>
<div class="note">
<strong>Note</strong>
- The texture coordinates uses the <code>s, t</code> pair.
+ The texture coordinates use the <code>s, t</code> pair.
</div>
</li>
<h2 id="animation" name="animation">Creating an Animation</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to adjust and move object coordinates to create an animation:</p>
+<p>To create an animation by adjusting and moving object coordinates:</p>
<ol>
<li>Calculate the central point:
<h2 id="threed" name="threed">Creating a 3D Perspective</h2>
- <p>To
enhance the user experience of your application with WebGL™ features, you must learn to create 3D perspective using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>:</p>
+ <p>To
create a 3D perspective, you can use the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>:</p>
<ol>
<li><p>Set the vertex coordinate and color buffer values to draw 2 triangles:</p>
<h2 id="touch" name="touch">Using Touch Events</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to apply a texture and 3D perspective with touch events using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>. The following example demonstrates how to display and turn a dice on the screen based on touch events.</p>
+<p>You can apply a texture and 3D perspective with touch events by using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>. The following example demonstrates how to display and turn a dice on the screen based on touch events:</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
<h2 id="framework" name="framework">Using WebGL™ Frameworks</h2>
-<p>To enhance the user experience of your application with WebGL™ features, you must learn to use the three.js framework:</p>
+<p>To use the three.js framework for your WebGL™ application:</p>
<ol>
<li><p>Download the <a href="http://threejs.org/" target="_blank">three.js library</a> and include it in the HTML file:</p>
<li><p>Add an animation:</p>
<pre class="prettyprint">
function animate() {
- var speed= 0.2;
+ var speed = 0.2;
var lastTime = 0;
var angle = 0.0;
<h2 id="create" name="create">Creating a Logo Animation</h2>
-<p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or the emulator) is switched on:</p>
+<p>You can create an animation where element properties can be assigned and changed for each element and keyframe. The logo animation in the following example is similar to the animation that appears when a Tizen device (or the emulator) is switched on:</p>
<ol>
<li>No elements are initially shown on the screen. </li>
<h2 id="create" name="create">Creating Backgrounds</h2>
-<p>
To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>
+<p>
You can create a multilayer background with a parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>
<p align="center"><strong>Figure: Background with the parallax effect</strong></p>
<p align="center"><img alt="Background with the parallax effect" src="../../../images/css_bg_tutorial1.png" /></p>
<h2 id="selector" name="selector">Using Pseudo-element Selectors</h2>
-<p>To enhance the user experience of your application, you must learn how to use pseudo-element selectors:</p>
+<p>To use pseudo-element selectors:</p>
<ol>
<li><p>Use the pseudo-classes, such as <code>:enabled</code> and <code>:disabled</code>, to add different styles based on the state of the DOM elements:</p>
<pre class="prettyprint">
<h2 id="boxmodel" name="boxmodel">Using Box Model Properties</h2>
-<p>To enhance the user experience of your application, you must learn how to use box model properties:</p>
+<p>To use the box model properties in your application:</p>
<div class="note">
<strong>Note</strong>
<h2 id="copy" name="copy">Copying Content</h2>
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>copy</code> event:</p>
+<p>To copy content using the <code>copy</code> event:</p>
<ol>
<li> Add an event listener to detect the <code>copy</code> event:
<pre class="prettyprint lang-js">
<h2 id="cut" name="cut">Cutting Content</h2>
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>cut</code> event:</p>
+<p>To cut content using the <code>cut</code> event:</p>
<ol>
<li> Add an event listener to detect the <code>cut</code> event:
<pre class="prettyprint lang-js">
<h2 id="paste" name="paste">Pasting Content</h2>
-<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <code>paste</code> event:</p>
+<p>To paste content using the <code>paste</code> event:</p>
<ol>
<li> Add an event listener to detect the <code>paste</code> event:
<pre class="prettyprint lang-js">
<h2 id="target" name="target">Copying and Pasting Content into an Editable Element</h2>
-<p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p>
+<p>To copy and paste content in an editable HTML element:</p>
<ol>
<li><p>Define the editable element into which copied data is to be pasted:</p>
<p align ="center"><img alt="Flexible box layout" src="../../../images/flex_container.png"/></p>
<h2 id="usecont" name="usecont">Using the Flex Container</h2>
-<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex container:</p>
+<p>To assign size and alignment to a flex container:</p>
<ol>
<li>Assign the area (flex container) where the flexible box layout is applied by using the <code>display: flex</code> property:
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_6.html</a></li>
</ul>
- <h2 id="item" name="item">Using the Flex Items</h2>
+<h2 id="item" name="item">Using the Flex Items</h2>
- <p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex items:</p>
+<p>To assign size and alignment to the flex items in a flex container:</p>
<ol>
<li>Assign the area (flex container) where the flexible box layout is applied, and define the flex items for it:
<h2 id="create" name="create">Creating a Flexible Layout with CSS3</h2>
-<p>To enhance the user experience of your application, you must learn how to create flexible box layout:</p>
+<p>To create a flexible box layout with CSS3:</p>
<ol>
<li>Define the HTML content for the flexible layout. In this example, create 2 articles areas, 1 for a text list and 1 for an icon list:
<pre class="prettyprint">
<h2 id="font" name="font">Manipulating Fonts</h2>
-<p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>
+<p>To manipulate fonts using CSS font properties:</p>
<ol>
<li><p>Define the <code>font-style</code> property within a <code><style></code> element in the <code><head></code> section of the Web page to apply different font styles:</p>
<h2 id="create" name="create">Creating a Liquid Layout</h2>
- <p>To enhance the user experience of your application, you must learn to define media queries to determine the styles to be used in the Web document. This example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show the optimized layout on both portrait and landscape modes.</p>
+<p>You can use media queries to determine the styles to be used in a Web document. The following example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show an optimized layout on both portrait and landscape modes:</p>
<ol>
<h2 id="size" name="size">Setting the Column Number and Width</h2>
<p> When the layout is set to a constant number of columns using the <code>column-count</code> (or <code>-webkit-column-count)</code> property, the column width is set to fill the available horizontal space.</p>
-<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown at the top), the column width is 116 px, whereas on a 720 x 1280 display (shown at the bottom), the column with is 143 px.</p>
+<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown at the top), the column width is 116 px, whereas on a 720 x 1280 display (shown at the bottom), the column width is 143 px.</p>
<p>The following code snippet demonstrates how to use the <code>column-count</code> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_count" target="_blank">multi_column_column_count/renamed_index.html</a>.</p>
<pre class="prettyprint">
article {
<p align="center"><img alt="Column break" src="../../../images/column_break.png" /></p>
<h2 id="basic" name="basic">Creating a Basic Layout</h2>
-
-<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a basic layout using CSS:</p>
+<p>To create a basic layout for your application using CSS, providing consistent behavior across a wide range of displays with different resolutions and orientations:</p>
<ol>
<li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
</ul>
- <h2 id="dynamic" name="dynamic">Creating a Layout with Dynamic Content</h2>
+<h2 id="dynamic" name="dynamic">Creating a Layout with Dynamic Content</h2>
+
+<p>To use CSS to create a layout that provides varying amounts of content, providing consistent behavior across a wide range of displays with different resolutions and orientations:</p>
- <p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:</p>
<ol>
<li>
<p>Create the HTML layout. The <code>article</code> element displays the columns, and the <code>nav</code> element contains buttons to add and remove content in the columns.</p>
<p>You can also <a href="#create">create an accordion menu</a>.</p>
<h2 id="single" name="single">Selecting a Single Node</h2>
-<p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select a single node:</p>
+<p>To use selectors for handling page elements and selecting a single node:</p>
<ol>
<li>To select the first matching element found in the child nodes, use the <code>querySelector()</code> method with CSS selectors. You get the same result as when using the <code>getElementById()</code>, <code>getElementsByTagName()</code>, and <code>getElementsByClassName()</code> methods.
<pre class="prettyprint">
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
</ul>
- <h2 id="multi" name="multi">Selecting Multiple Nodes</h2>
- <p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select multiple nodes in a node list:</p>
+<h2 id="multi" name="multi">Selecting Multiple Nodes</h2>
+
+<p>To use selectors for handling page elements and selecting multiple nodes in a node list:</p>
+
<ol>
<li>Select an element in the node list using the <code>querySelector()</code> method:
<pre class="prettyprint">
var targetObj = obj.querySelectorAll('thead th, tbody td');
var i = targetObj.length;
</pre>
-<p> The <code>querySelectorAll()</code> method returns an array containing all of the matching element nodes within the subtrees of the context node, in the document order, and saves the elements in a node list. If there are no matching nodes, the method returns an empty array. The query above selects the <code><th></code> elements in the table head and the <code><td></code> elements in the table body.</p>
+<p> The <code>querySelectorAll()</code> method returns an array containing all matching element nodes within the subtrees of the context node, in the document order, and saves the elements in a node list. If there are no matching nodes, the method returns an empty array. The query above selects the <code><th></code> elements in the table head and the <code><td></code> elements in the table body.</p>
</li>
<li>Apply a defined style to all elements stored in the <code>targetObj</code> node list:
<pre class="prettyprint">
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
</ul>
- <h2 id="create" name="create">Creating an Accordion Menu</h2>
+<h2 id="create" name="create">Creating an Accordion Menu</h2>
+
+<p>You can retrieve element nodes from the DOM tree and create a simple accordion menu.</p>
- <p>To enhance the user experience of your application, you must learn to retrieve element nodes from the DOM tree to create a simple accordion menu.</p>
- <p>The accordion menu is created using the CSS3 Basic User Interface Module Level 3 API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">wearable</a> applications). When a title is touched, the relevant content is shown, and other content is hidden.</p>
+ <p>The accordion menu is created using the CSS3 Basic User Interface Module Level 3 API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">mobile</a>, <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">wearable</a>, and <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_tv.html#basicui">TV</a> applications). When a title is touched, the relevant content is shown, and other content is hidden.</p>
<ol>
<li>Create the HTML layout:
<pre class="prettyprint">
<h2 id="text" name="text">Manipulating Text</h2>
-<p>To enhance the user experience of your application, you must learn to handle line breaking, justification, alignment, white space handling, and text transformations using CSS text properties:</p>
+<p>To use CSS text properties to manipulate line breaking, justification, alignment, white space handling, and text transformations:</p>
<ol>
<li>Define the <code>text-transform</code> property within a <code><style></code> element in the <code><head></code> section of the Web page to control the text capitalization:
<li><code>perspective-origin</code>
<p>This property defines the location facing the element.</p></li>
<li><code>backface-visibility</code>
-<p>This property defines whether the backface of the transformed element is expressed.</p></li>
+<p>This property defines whether the backside of the transformed element is expressed.</p></li>
</ul>
<pre class="prettyprint">
<h2 id="animation" name="animation">Creating an Animation with Transforms</h2>
-<p>
To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <code>transform</code> property. In the modified animation:</p>
+<p>
You can create an animation with transforms. The following example uses the animation from the <a href="animation_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <code>transform</code> property. In the modified animation:</p>
<ul>
<li>As in the original animation, no elements are initially shown on the screen.</li>
<h2 id="effect" name="effect">Creating Fade Animation Effects</h2>
-
- <p>To enhance the user experience of your application, you must learn to use fade animation effects.</p>
-<p>The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:</p>
+<p>You can create fade animation effects using a modal layer pop-up. The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:</p>
<ul>
<li>If an event is fired, it gradually becomes visible. This is known as the Fade In effect.</li>
<li>The existing background is covered with a translucent layer to make the user focus on the pop-up.</li>
<h2 id="hw" name="hw">Using Hardware Acceleration</h2>
<p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
- <p>In hardware acceleration, GPU is used to perform a method faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
+ <p>With hardware acceleration, the GPU is used to perform a method faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
<h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
<p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <code>-webkit-transition</code> CSS attribute, or 3D transform with the <code>-webkit-transform</code> attribute. For the best performance, set the <code>-webkit-transform</code> attribute to the 3D type.</p>
-<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
+<p>In the following examples, a blue box moves from the top left diagonally downward for 1 second.</p>
<p align="center"><strong>Figure: Blue box</strong></p>
<p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
<ul>
<li>Use CPU painting:
- <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <code>setTimeout()</code> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <code>setTimeout()</code> method over the changing top-left coordinate. This approach does not use hardware acceleration, only the CPU.</p>
<ol>
<li>Construct the blue box and set its position on the screen:
<pre class="prettyprint">
</style>
</pre>
-<p>The <code>transition</code> property connects movement more naturally than the more generally used the pseudo classes, such as <code>:hover</code> or <code>:active</code>. The smooth effect can be achieved more conveniently and easily with the <code>transition</code> property than with JavaScript or Flash, and the <code>transition</code> property also supports the browser side to provide excellent performance.</p>
+<p>The <code>transition</code> property connects movement more naturally than the more generally used pseudo classes, such as <code>:hover</code> or <code>:active</code>. The smooth effect can be achieved more conveniently and easily with the <code>transition</code> property than with JavaScript or Flash, and the <code>transition</code> property also supports the browser side to provide excellent performance.</p>
<h2 id="modify" name="modify">Modifying Element Properties</h2>
-<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <code>http://tizen.org</code> Web site, where the current "UPCOMING EVENTS" area only has the <code>text-decoration: underline</code> property in a <code>mouseover</code> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <code>transitions</code> properties in this area.</p>
+<p>You can use transitions to change element property values naturally. The following example uses a partial section of the <code>http://tizen.org</code> Web site, where the current "UPCOMING EVENTS" area only has the <code>text-decoration: underline</code> property in a <code>mouseover</code> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <code>transitions</code> properties in this area.</p>
<p align="center"><strong>Figure: Tizen site section to be transitioned</strong></p>
<h3 id="css" name="css">Using CSS Transition and 3D Transform</h3>
<p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <code>-webkit-transition</code> CSS attribute, or 3D transform with the <code>-webkit-transform</code> attribute. For the best performance, set the <code>-webkit-transform</code> attribute to the 3D type.</p>
-<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
+<p>In the following examples, a blue box moves from the top left diagonally downward for 1 second.</p>
<p align="center"><strong>Figure: Blue box</strong></p>
<p align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
<ul>
<li>Use CPU painting:
- <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <code>setTimeout()</code> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
+ <p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <code>setTimeout()</code> method over the changing top-left coordinate. This approach does not use hardware acceleration, only the CPU.</p>
<ol>
<li>Construct the blue box and set its position on the screen:
<pre class="prettyprint">
<li>
<strong>Designing for multiple screens</strong>
<p>Tizen supports various device types with several different screen sizes.</p>
-<p>To provide optimal user experiences, it is important to design your application to support different screen sizes. In addition to different devices, you must also consider system configuration changes, such as the default home screen layout and system fonts after OS upgrades, since they can change the size of the viewable content screen. Such changes affect the application layout, and can lead to an undesirable UI design layout. Use the following topics to design your application to be highly flexible and adaptive against these possibilities.</p>
+<p>To provide an optimal user experience, it is important to design your application to support different screen sizes. In addition to different devices, you must also consider system configuration changes, such as the default home screen layout and system fonts after OS upgrades, since they can change the size of the viewable content screen. Such changes affect the application layout, and can lead to an undesirable UI design layout. Use the following topics to design your application to be highly flexible and adaptive against these possibilities.</p>
<ul>
<li><a href="ui_layout_ww.htm">Multiple UI Layouts</a> <strong>in wearable applications only</strong>
<p>Allows you to design your application layout so that your application can run on multiple Tizen devices.</p></li>
<h3 id="viewport" name="viewport">Viewport and Other Meta Tags</h3>
-<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <code>viewport</code> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <code>viewport</code> meta tag was introduced by Apple to fill the screen resolution gap between initial Smartphone (for example, 320 px) and PC (for example, 980 px). Basically, the <code>viewport</code> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>
+<p>The viewport is a screen area that the Web engine displays in the UI and, in the Web world, the <code>viewport</code> meta tag is used to inform the Web engine that this content is written for a specific form factor, such as device width. The <code>viewport</code> meta tag was introduced by Apple to fill the screen resolution gap between initial Smart phone (for example, 320 px) and PC (for example, 980 px). Basically, the <code>viewport</code> meta tag helps the Web engine to determine the scale factor for the content on the current device.</p>
<p>To use the tag in an HTML file, set its name and content:</p>
<pre class="prettyprint">
<h2 id="woff" name="woff">Using the WOFF File Format</h2>
-<p>To enhance the user experience of your application, you must learn to use the WOFF (Web Open Font Format) file format 1.0, which is a W3C standard font packaging format used in Web pages:</p>
+<p>To use the WOFF (Web Open Font Format) file format, which is a W3C standard font packaging format used in Web pages:</p>
<ol>
<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/#font-face-rule" target="_blank"><code>@font-face</code> rules</a>. Within the rules, you can define the following properties:
<th>Removing an unused DOM element</th>
<td>
<pre class="prettyprint">
-var el= $('#myelem');
+var el = $('#myelem');
el.parentNode.removeChild(el);
</pre></td>
</tr>
projects / sdk / online-doc.git / commitdiff