<li><a href="web/w3c/device/task_compass_w.htm" target="content">Task: Compass</a></li>
</ul>
</li>
- <li><a href="web/w3c/device/touch_w.htm" target="content">Touch Events version 1</a>
+ <li><a href="web/w3c/device/touch_w.htm" target="content">Touch Events</a>
<ul>
<li><a href="web/w3c/device/task_touch_paint_mw.htm" target="content">Task: Touch Paint in Mobile Applications</a></li>
<li><a href="web/w3c/device/task_touch_paint_ww.htm" target="content">Task: Touch Paint in Wearable Applications</a></li>
<li><a href="web/w3c/graphics/task_basicwatch_w.htm" target="content">Task: Basic Watch</a></li>
</ul>
</li>
- <li><a href="web/w3c/graphics/svg_w.htm" target="content">HTML5 SVG</a></li>
+ <li><a href="web/w3c/graphics/svg_w.htm" target="content">SVG</a></li>
</ul>
</li>
<li><a href="web/w3c/media/media_guide_w.htm" target="content">Media</a>
<ul>
<li><a href="web/w3c/communication/web_messaging_w.htm" target="content">HTML5 Web Messaging</a></li>
<li><a href="web/w3c/communication/websocket_w.htm" target="content">WebSocket</a></li>
- <li><a href="web/w3c/communication/xmlhttprequest_w.htm" target="content">XMLHttpRequest (Level 1 and 2)</a></li>
+ <li><a href="web/w3c/communication/xmlhttprequest_w.htm" target="content">XMLHttpRequest</a></li>
<li><a href="web/w3c/communication/server_sent_w.htm" target="content">Server-Sent Events</a></li>
</ul>
</li>
<li><a href="web/w3c/ui/text_module_w.htm" target="content">CSS Text Module (Level 3)</a></li>
<li><a href="web/w3c/ui/basic_ui_w.htm" target="content">CSS Basic User Interface Module (Level 3)</a></li>
<li><a href="web/w3c/ui/font_w.htm" target="content">CSS Fonts Module (Level 3)</a></li>
- <li><a href="web/w3c/ui/woff_w.htm" target="content">WOFF File Format (1.0)</a></li>
+ <li><a href="web/w3c/ui/woff_w.htm" target="content">WOFF File Format (1.0 and 2.0)</a></li>
</ul>
</li>
</ul>
<p>Enables you to send and receive data between Web sites and through a message channel.</p></li>
<li><a href="websocket_w.htm">WebSocket</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to connect to the socket server, and send and receive data.</p></li>
- <li><a href="xmlhttprequest_w.htm">XMLHttpRequest (Level 1 and 2)</a> <strong>in mobile and wearable applications only</strong>
+ <li><a href="xmlhttprequest_w.htm">XMLHttpRequest</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to use cross-origin resource sharing (CORS) to request and send data of various content types, and to monitor the operation progress.</p></li>
<li><a href="server_sent_w.htm">Server-Sent Events</a> <strong>in mobile applications only</strong>
<p>Enables you to exchange push data with the server.</p></li>
<p>This feature is supported in mobile applications only.</p>
-<p>The Server-Sent Events API defines a simple data structure and interface, and a communication mechanism to realize the server push. In addition, it can handle the received data in the general DOM event format. However, the API repeatedly requests the data from the client to the server, so it is not a complete server push. The repeat period of the server request is determined by the <code>retry</code> value of the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream data format</a>. If the value is not defined, the repeat period is the default value of the browser.</p>
+<p>The Server-Sent Events API defines a simple data structure and interface, and a communication mechanism to realize the server push. In addition, it can handle the received data in the general DOM event format. However, the API repeatedly requests the data from the client to the server, so it is not a complete server push. The repeat period of the server request is determined by the <code>retry</code> value of the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#event-stream-interpretation" target="_blank">event stream data</a>. If the value is not defined, the repeat period is the default value of the browser.</p>
<p>The main features of the Server-Sent Events API include:</p>
<ul>
-<li>Creating an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> instance
+<li>Creating an <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#the-eventsource-interface" target="_blank">EventSource</a> instance
<p>The <code>EventSource</code> interface is the core object of server-sent event implementation. <a href="#Triggering">Creating a new EventSource instance</a> triggers repeated server request automatically, and allows you to use the receiving data event. When creating the <code>EventSource</code> instance, you must use the URL of the server page sending the event stream as a parameter.</p></li>
<li>Receiving server push data
-<p>After triggering the server requests, you can <a href="#Receiving">receive push data from the server</a> by implementing the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#handler-eventsource-onmessage" target="_blank">message</a> event.</p>
-<p>The received event stream data is parsed as a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#event-definitions" target="_blank">MessageEvent</a> object, to make the target data easily accessible. </p>
+<p>After triggering the server requests, you can <a href="#Receiving">receive push data from the server</a> by implementing the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#handler-eventsource-onmessage" target="_blank">message</a> event.</p>
+<p>The received event stream data is parsed as a <a href="http://www.w3.org/TR/2015/REC-webmessaging-20150519/#the-messageevent-interfaces" target="_blank">MessageEvent</a> object, to make the target data easily accessible. </p>
</li>
</ul>
<p>To take advantage of the server push feature, you must learn to connect to the server to request push data:</p>
<ol>
-<li>Create an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> interface instance:
+<li>Create an <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#the-eventsource-interface" target="_blank">EventSource</a> interface instance:
<pre class="prettyprint lang-js">
<script>
var serverPage = "http://165.213.198.151:8080/server_sent_events_server.php";
For the server push to work, the <code>serverPage</code> parameter must contain the actual push server URL.
</div>
</li>
-<li>Implement the event handler for the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#handler-eventsource-onopen" target="_blank">open</a> event:
+<li>Implement the event handler for the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#handler-eventsource-onopen" target="_blank">open</a> event:
<pre class="prettyprint">
var log = document.getElementById("log")
};
</script>
</pre>
-<p>The <code>open</code> event is triggered repeatedly based on the <code>retry</code> value of the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream data format</a>, to request push messages from the server.</p>
+<p>The <code>open</code> event is triggered repeatedly based on the <code>retry</code> value of the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#event-stream-interpretation" target="_blank">event stream data format</a>, to request push messages from the server.</p>
</li>
</ol>
<p>In the following figure, the <code>open</code> event is fired every 2 seconds.</p>
<p>To take advantage of the server push feature, you must learn to handle the push data events:</p>
<ol>
-<li><p>Define the data server that the client connects to, according to the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream interpretation rules</a>.</p>
-<p>Set the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#text-event-stream" target="_blank">MIME type</a> to <code>text/event-stream</code> so that the event stream can be sent, and set the header not to be cached.</p>
+<li><p>Define the data server that the client connects to, according to the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#event-stream-interpretation" target="_blank">event stream interpretation rules</a>.</p>
+<p>Set the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#text-event-stream" target="_blank">MIME type</a> to <code>text/event-stream</code> so that the event stream can be sent, and set the header not to be cached.</p>
<pre class="prettyprint">
<?php
header('Content-Type: text/event-stream');
</pre>
</li>
<li>
-<p>Create an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> interface instance and implement the event handler for the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#handler-eventsource-onmessage" target="_blank">message</a> event:</p>
+<p>Create an <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#the-eventsource-interface" target="_blank">EventSource</a> interface instance and implement the event handler for the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#handler-eventsource-onmessage" target="_blank">message</a> event:</p>
<pre class="prettyprint">
<script>
var serverPage = "http://localhost/server_sent_events_server.php";
<li>Cross-document messaging
<p>You can <a href="#Cross-document_Messaging">send and receive data between more than 2 Web pages</a>. Because the <a href="http://www.w3.org/2001/tag/dj9/scriptorigin.html" target="_blank">Same Origin Policy</a> is not applied for cross-document messaging, communication between other domains is also possible.</p></li>
<li>Channel messaging
-<p>You can <a href="#Channel_Messaging">send and receive messages through the port</a> of the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">MessageChannel</a> interface.</p></li>
+<p>You can <a href="#Channel_Messaging">send and receive messages through the port</a> of the <code>MessageChannel</code> interface (in <a href="http://www.w3.org/TR/2015/REC-webmessaging-20150519/#message-channels" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">wearable</a> applications).</p></li>
</ul>
-<p>With the Web Messaging API, messages are sent and received asynchronously using the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#event-definitions" target="_blank">MessageEvent</a> object, within 1 domain or between different domains.</p>
+<p>With the Web Messaging API, messages are sent and received asynchronously using the <code>MessageEvent</code> object (in <a href="http://www.w3.org/TR/2015/REC-webmessaging-20150519/#the-messageevent-interfaces" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#event-definitions" target="_blank">wearable</a> applications), within 1 domain or between different domains.</p>
<h2 id="Cross-document_Messaging" name="Cross-document_Messaging">Using Cross-document Messaging</h2>
-<p>Send the message from the sending page using the <code>postMessage()</code> method of the <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#posting-messages" target="_blank">receiving page window object</a>. To receive the page, the receiving page window object must be registered to receive messages.</p>
+<p>Send the message from the sending page using the <code>postMessage()</code> method of the receiving page window object (in <a href="http://www.w3.org/TR/2015/REC-webmessaging-20150519/#posting-messages" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#posting-messages" target="_blank">wearable</a> applications). To receive the page, the receiving page window object must be registered to receive messages.</p>
<p>The <code>postMessage()</code> method supports the following parameters:</p>
<ul>
<li><code>message</code>: Message to be sent.</li>
<p>The <code>MessageChannel</code> instance broadcasts message sending and receiving, and has 2 properties: <code>port1</code> and <code>port2</code>. Each port is used to send and receive messages, and a message that is sent from one port with the <code>postMessage()</code> method is received by the other through the <code>message</code> event.</p>
<p>Learning how to use channel messaging enhances the communication capabilities of your application:</p>
<ol>
-<li>To send a message from document A to document B, create in document A a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">MessageChannel</a> interface instance, which has 2 <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-ports" target="_blank">message port</a> attributes: <code>port1</code> and <code>port2</code>.
+<li>To send a message from document A to document B, create in document A a <code>MessageChannel</code> interface instance (in <a href="http://www.w3.org/TR/2015/REC-webmessaging-20150519/#message-channels" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">wearable</a> applications), which has 2 <code>message port</code> attributes (in <a href="http://www.w3.org/TR/2015/REC-webmessaging-20150519/#message-ports" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-ports" target="_blank">wearable</a> applications): <code>port1</code> and <code>port2</code>.
<p>The <code>port2</code> attribute of the <code>MessageChannel</code> instance is delivered to document B through the <code>postMessage()</code> method of the document B window object:</p>
<pre class="prettyprint">
<script>
<div class="note">
<strong>Note</strong>
- The <code>postMessage()</code> method can have 3 parameters: <code>message</code>, <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#security-postmsg" target="_blank">origin</a>, and <code>ports</code>.
+ The <code>postMessage()</code> method can have 3 parameters: <code>message</code>, <code>origin</code> (in <a href="http://www.w3.org/TR/2015/REC-webmessaging-20150519/#security-postmsg" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#security-postmsg" target="_blank">wearable</a> applications), and <code>ports</code>.
<p>According to the W3C specifications, the arguments are ordered as <code>message</code>, <code>origin</code>, and <code>ports</code>. However, in Tizen, the order used is actually <code>message</code>, <code>ports</code>, and <code>origin</code>. This approach is used in all browsers that currently support the <code>MessageChannel</code> interface.</p>
</div>
</li>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
- <title>XMLHttpRequest (Level 1 and 2)</title>
+ <title>XMLHttpRequest</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</ul>
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#mobile">XMLHttpRequest Level 2</a></li>
- <li><a href="#wearable">XMLHttpRequest Level 1</a></li>
<li><a href="#Sending_Request">Sending a Cross-origin Request</a></li>
<li><a href="#Uploading_Files">Uploading Files with Ajax</a></li>
<li><a href="#Handling_Requests">Handling Request Events</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API for Mobile Web</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API for Wearable Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest API for Wearable Web</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/General/News_Feed" target="_blank">News Feed Sample Description</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>XMLHttpRequest (Level 1 and 2)</h1>
+<h1>XMLHttpRequest</h1>
-<p>You can send requests to and receive them from a Web server using JavaScript.</p>
+<p>You can send HTTP (or HTTPS) <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#request" target="_blank">requests</a> to and receive <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#response" target="_blank">responses</a> from a Web server using JavaScript. The API is based on the <a href="http://www.w3.org/TR/2014/CR-html5-20140429/" target="_blank">HTML5</a> specification and the Ajax mechanism widely used in the Web environment, and it has been enhanced from the older <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/" target="_blank">XMLHttpRequest</a> API.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
-<h2 name="mobile" id="mobile">XMLHttpRequest Level 2 in Mobile Applications</h2>
-
-<p>You can send HTTP (or HTTPS) <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#request" target="_blank">requests</a> to and receive <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#response" target="_blank">responses</a> from a Web server using JavaScript. The API is based on the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/" target="_blank">HTML5</a> specification and the Ajax mechanism widely used in the Web environment, and it has been enhanced from the older <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/" target="_blank">XMLHttpRequest</a> API.</p>
-
-<p>The main features of the XMLHttpRequest Level 2 API include:</p>
-<ul>
-<li>Supporting cross-origin request sharing (CORS)
-<p>In the older XMLHttpRequest API, only same-origin resource sharing was possible. However, the XMLHttpRequest Level 2 API supports <a href="../security/cors_w.htm">CORS</a>.</p>
-<p>To <a href="#Sending_Request">send a cross-origin request</a>, you must create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and use its <code>open()</code> method. Set the request URL method parameter as the cross-origin URL.</p>
-
-<div class="note">
- <strong>Note</strong>
- For the cross-origin request to work, <a href="../security/cors_w.htm#Using_Simple_Requests">the authority for the external domain access must be set</a> in the server belonging to the cross-origin URL.
-</div>
-</li>
-<li>Supporting various response types
-<p>The older XMLHttpRequest API only supported the <code>text/html</code> format for sending requests. The XMLHttpRequest Level 2 API supports various response types, such as <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, and <code>text</code>.
-</p>
-</li>
-<li>Supporting form data
-<p>The newly supported <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#interface-formdata" target="_blank">FormData</a> interface makes it possible to upload data from an entire form. For more information, see <a href="#Uploading_Files">Uploading Files with Ajax</a>.</p>
-</li>
-<li>Receiving a more fragmented response state on the request progress status
-<p>The XMLHttpRequst Level 2 API provides more <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#event-handlers" target="_blank">event handlers</a> for <a href="#Handling_Requests">tracking the request status and response</a>. In addition, the <code>onprogress</code> event handler allows you to <a href="#Tracking_Download">check the send status of a large capacity file download</a>.</p>
-</li>
-</ul>
-
-<h2 name="wearable" id="wearable">XMLHttpRequest Level 1 in Wearable Applications</h2>
-<p>You can send HTTP (or HTTPS) <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#request" target="_blank">requests</a> to and receive <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#response" target="_blank">responses</a> from a Web server using JavaScript. The API is based on the <a href="http://www.w3.org/TR/2014/CR-html5-20140429/" target="_blank">HTML5</a> specification and the Ajax mechanism widely used in the Web environment, and it has been enhanced from the older <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/" target="_blank">XMLHttpRequest</a> API.</p>
-<p>The main features of the XMLHttpRequest Level 1 API include:</p>
+<p>The main features of the XMLHttpRequest API include:</p>
<ul>
<li>Supporting cross-origin request sharing (CORS)
-<p>In the older XMLHttpRequest API, only same-origin resource sharing was possible. However, the
XMLHttpRequest Level 1 API supports <a href="../security/cors_w.htm">CORS</a>.</p>
+<p>In the older XMLHttpRequest API, only same-origin resource sharing was possible. However, the
latest XMLHttpRequest API supports <a href="../security/cors_w.htm">CORS</a>.</p>
<p>To <a href="#Sending_Request">send a cross-origin request</a>, you must create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and use its <code>open()</code> method. Set the request URL method parameter as the cross-origin URL.</p>
<div class="note">
</div>
</li>
<li>Supporting various response types
-<p>The older XMLHttpRequest API only supported the <code>text/html</code> format for sending requests. The XMLHttpRequest Level 1 API supports various response types, such as <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, and <code>text</code>.
+<p>The older XMLHttpRequest API only supported the <code>text/html</code> format for sending requests. The latest XMLHttpRequest API supports various response types, such as <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, and <code>text</code>.
</p>
</li>
<li>Supporting form data
<p>The newly supported <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#interface-formdata" target="_blank">FormData</a> interface makes it possible to upload data from an entire form. For more information, see <a href="#Uploading_Files">Uploading Files with Ajax</a>.</p>
</li>
<li>Receiving a more fragmented response state on the request progress status
-<p>The XMLHttpRequst
Level 1 API provides more <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#event-handlers" target="_blank">event handlers</a> for <a href="#Handling_Requests">tracking the request status and response</a>. In addition, the <code>onprogress</code> event handler allows you to <a href="#Tracking_Download">check the send status of a large capacity file download</a>.</p>
+<p>The XMLHttpRequst API provides more <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#event-handlers" target="_blank">event handlers</a> for <a href="#Handling_Requests">tracking the request status and response</a>. In addition, the <code>onprogress</code> event handler allows you to <a href="#Tracking_Download">check the send status of a large capacity file download</a>.</p>
</li>
</ul>
<p>To use the XML HTTP request features in your application, you must learn to send a cross-origin request:</p>
<ol>
-<li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance:</p>
+<li><p>Create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance:</p>
<pre class="prettyprint lang-js">
<script>
var client = new XMLHttpRequest();
<input type="button" value="upload" onclick="upload()"/>
</pre>
</li>
-<li><p>In the <code>upload()</code> method, create a <a href="http://www.w3.org/TR/201
0/WD-XMLHttpRequest2-20100907/#the-formdata-interface" target="_blank">FormData</a> interface instance, and add the <a href="http://www.w3.org/wiki/HTML/Elements/input/file" target="_blank">file</a> element with the attached file into it. Use the <code>send()</code> method to send the <code>FormData</code> to the server.
+<li><p>In the <code>upload()</code> method, create a <a href="http://www.w3.org/TR/201
4/WD-XMLHttpRequest-20140130/#interface-formdata" target="_blank">FormData</a> interface instance, and add the <a href="http://www.w3.org/wiki/HTML/Elements/input/file" target="_blank">file</a> element with the attached file into it. Use the <code>send()</code> method to send the <code>FormData</code> to the server.
</p>
<pre class="prettyprint">
<script>
<div id="divText"></div>
</pre>
</li>
-<li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define event handlers for it:</p>
+<li><p>Create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define event handlers for it:</p>
<pre class="prettyprint lang-js">
<script>
var html = "";
client.send();
</pre>
</li>
-<li><p>Define the actions of each <a href="http://www.w3.org/TR/XMLHttpRequest/#event-handlers" target="_blank">event handler</a>:</p>
+<li><p>Define the actions of each <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#event-handlers" target="_blank">event handler</a>:</p>
<pre class="prettyprint">
/* When the request begins */
function onloadstarthandler(e)
<div id="divText"></div>
</pre>
</li>
-<li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define the handlers for the <code>onprogress</code> and <code>onabort</code> events to track the download progress and cancellation events:</p>
+<li><p>Create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define the handlers for the <code>onprogress</code> and <code>onabort</code> events to track the download progress and cancellation events:</p>
<pre class="prettyprint">
<script>
var client = new XMLHttpRequest();
<pre class="prettyprint">
function onprogresshandler(e)
{
- document.getElementById("divText").innerHTML = "DownLoading... (" + parseInt(e.loaded / e.totalSize * 100) + "%)";
+ document.getElementById("divText").innerHTML = "DownLoading... (" + parseInt(e.loaded / e.total * 100) + "%)";
}
function onaborthandler(e)
<p>The main features of the Battery Status API include:</p>
<ul>
<li>Retrieving the battery status
- <p>You can use the attributes of the <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">BatteryManager</a> interface to <a href="#retrieve">check the battery status information</a>, such as battery charging status and battery level.</p></li>
+ <p>You can use the attributes of the <code>BatteryManager</code> interface (in <a href="https://www.w3.org/TR/2016/CR-battery-status-20160707/#the-batterymanager-interface" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">wearable</a> applications) to <a href="#retrieve">check the battery status information</a>, such as battery charging status, remaining charging time (until fully charged), remaining battery life (until battery is empty), and battery level.</p></li>
<li>Detecting battery status changes
<p>You can set event listeners with the <code>BatteryManager</code> interface attributes to <a href="#detect">detect changes in the battery status</a>.</p>
</li>
<li>
-<p>Use the attributes of the <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">BatteryManager</a> interface to display the battery charging status and battery level:</p>
+<p>Use the attributes of the <code>BatteryManager</code> interface (in <a href="https://www.w3.org/TR/2016/CR-battery-status-20160707/#the-batterymanager-interface" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">wearable</a> applications) to display the battery charging status, remaining charging time, remaining battery life, and battery level:</p>
<pre class="prettyprint">
</pre>
</li>
-<li>Set event listeners with the <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">BatteryManager</a> interface attributes to detect changes in the battery status:
+<li>Set event listeners with the <code>BatteryManager</code> interface (in <a href="https://www.w3.org/TR/2016/CR-battery-status-20160707/#the-batterymanager-interface" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-battery-status-20120508/#batterymanager-interface" target="_blank">wearable</a> applications) attributes to detect changes in the battery status:
<pre class="prettyprint">
<script>
<p>Enables you to retrieve the battery status and detect changes in it.</p></li>
<li><a href="device_orientation_w.htm">DeviceOrientation Event Specification</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to detect rotation and acceleration motions on the device.</p></li>
- <li><a href="touch_w.htm">Touch Events version 1</a> <strong>in mobile and wearable applications only</strong>
+ <li><a href="touch_w.htm">Touch Events</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to implement various types of touch events, coordinate touch points, and control multi-touch.</p></li>
<li><a href="vibration_w.htm">Vibration</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to implement different vibration patterns on a Tizen device.</p></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1 API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events API for Mobile Web</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="_blank">Touch Paint Sample Description</a></li>
</ul>
</div></div>
<h1>Task: Touch Paint</h1>
-<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events
version 1</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="blank">Touch Paint</a>.</p>
+<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="blank">Touch Paint</a>.</p>
<p>This task consists of the following parts:</p>
<ul>
<h3 id="initialize" name="initialize">Initializing the Canvas</h3>
<ol>
<li><strong>main.js Source File</strong>
-<p>Define event listeners and handlers to manage the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events on the canvas.</p>
+<p>Define event listeners and handlers to manage the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchstart-event" target="_blank">touchstart</a>, <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchmove-event" target="_blank">touchmove</a>, and <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchend-event" target="_blank">touchend</a> events on the canvas.</p>
<pre class="prettyprint">
window.onload = function()
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1 API for Wearable Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events API for Wearable Web</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="_blank">Touch Paint Sample Description</a></li>
</ul>
</div></div>
<h1>Task: Touch Paint</h1>
-<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events
version 1</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="blank">Touch Paint</a>.</p>
+<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="blank">Touch Paint</a>.</p>
<p>This task consists of the following parts:</p>
<ul>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
- <title>Touch Events version 1</title>
+ <title>Touch Events</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1 API for Mobile Web</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1 API for Wearable Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events API for Wearable Web</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/General/Hello_Tizen" target="_blank">Hello Tizen (Mobile) Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/General/Hello_Tizen_1" target="_blank">Hello Tizen (Wearable) Sample Description</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/General/Page_Navigation" target="_blank">Page Navigation Sample Description</a></li>
<div id="container"><div id="contents"><div class="content">
- <h1>Touch Events version 1</h1>
+ <h1>Touch Events</h1>
<p>As there is no mouse in a mobile device, the user actions must be handled with touch events, instead of mouse events.</p>
<li>Touch event types
<p>You can <a href="#handle"> define event handlers</a> for different types of touch events:</p>
<ul>
-<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> handles an event which occurs when a finger comes in contact with the device screen.</li>
-<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a> handles an event which occurs when a finger moves while it is in contact with the screen.</li>
-<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> handles an event which occurs when a finger is removed from the screen.</li>
-<li><a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> handles an event which occurs when a touch is cancelled.</li>
+<li><a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchstart-event" target="_blank">touchstart</a> handles an event which occurs when a finger comes in contact with the device screen.</li>
+<li><a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchmove-event" target="_blank">touchmove</a> handles an event which occurs when a finger moves while it is in contact with the screen.</li>
+<li><a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchend-event" target="_blank">touchend</a> handles an event which occurs when a finger is removed from the screen.</li>
+<li><a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchcancel-event" target="_blank">touchcancel</a> handles an event which occurs when a touch is cancelled.</li>
</ul>
<p>These events are similar to the <code>mousedown</code>, <code>mousemove</code>, and <code>mouseup</code> mouse events.</p>
<p>When a touch event occurs, you can <a href="#retrieve">retrieve the coordinate of the event point occurrence</a>. Because the finger, and consequently the contact area of the screen, is quite large, the retrieved coordinate is the average value of the contact area.</p>
<p>Since a mobile device has no sub-devices to provide event inputs, you can use gesture events, such as the page turning effect or image drawing, based on the finger movement coordinates of the <code>touchmove</code> event.</p></li>
<li>Multi-point touch control
-<p>Unlike with mouse events, multiple concurrent touch events (represented by the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-Touch" target="_blank">Touch</a> interface) can occur. To <a href="#control">control multi-point touch events</a>, the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-TouchList" target="_blank">TouchList</a> interface is used to save the respective event status (based on the <code>touches</code>, <code>targetTouches</code>, and <code>changedTouches</code> attributes). The status stored in the <code>TouchList</code> instance is renewed every time a new touch event occurs.</p></li>
+<p>Unlike with mouse events, multiple concurrent touch events (represented by the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#idl-def-Touch" target="_blank">Touch</a> interface) can occur. To <a href="#control">control multi-point touch events</a>, the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#idl-def-TouchList" target="_blank">TouchList</a> interface is used to save the respective event status (based on the <code>touches</code>, <code>targetTouches</code>, and <code>changedTouches</code> attributes). The status stored in the <code>TouchList</code> instance is renewed every time a new touch event occurs.</p></li>
</ul>
<p>For a practical example of drawing a simple image by using touch events and canvas elements, see the Touch Paint sample task (in <a href="task_touch_paint_mw.htm">mobile</a> and <a href="task_touch_paint_ww.htm">wearable</a> applications).</p>
<p>Depending on the touch type, different touch events occur:</p>
<ul>
-<li>When the user first touches the element and removes their finger from the screen, the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events occur.
+<li>When the user first touches the element and removes their finger from the screen, the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchend-event" target="_blank">touchend</a> events occur.
<p align="center"><strong>Figure: Simple touch (in mobile applications only)</strong></p>
<p align="center"><img alt="Simple touch (in mobile applications only)" src="../../../images/touch1.png" /></p>
</li>
-<li>When the user moves their finger across the element, and then removes their finger, the <code>touchstart</code>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <code>touchend</code> events occur.
+<li>When the user moves their finger across the element, and then removes their finger, the <code>touchstart</code>, <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchmove-event" target="_blank">touchmove</a>, and <code>touchend</code> events occur.
<p align="center"><strong>Figure: Moving touch (in mobile applications only)</strong></p>
<p align="center"><img alt="Moving touch (in mobile applications only)" src="../../../images/touch2.png" /></p>
</li>
-<li>When the user long-presses the DOM element, such as text or image, in the element, the <code>touchstart</code> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> events occur.
+<li>When the user long-presses the DOM element, such as text or image, in the element, the <code>touchstart</code> and <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchcancel-event" target="_blank">touchcancel</a> events occur.
<p align="center"><strong>Figure: Canceling touch with a long press (in mobile applications only)</strong></p>
<p align="center"><img alt="Canceling touch with a long press (in mobile applications only)" src="../../../images/touch3.png" /></p>
</pre>
</li>
-<li>Add an event listener and handler for the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a> event to the defined element:
+<li>Add an event listener and handler for the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchmove-event" target="_blank">touchmove</a> event to the defined element:
<pre class="prettyprint">
<script>
var log = document.getElementById("log");
</script>
</pre>
-<p>Each time the <code>touchmove</code> event is triggered, the position of the touch point is renewed. The position is returned in 2D coordinates of the page, client, and screen. You can use the position to compare the coordinates to the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events, and to analyze the gesture of the user by using the consequent <code>touchmove</code> events to determine the movement direction.
+<p>Each time the <code>touchmove</code> event is triggered, the position of the touch point is renewed. The position is returned in 2D coordinates of the page, client, and screen. You can use the position to compare the coordinates to the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchend-event" target="_blank">touchend</a> events, and to analyze the gesture of the user by using the consequent <code>touchmove</code> events to determine the movement direction.
</p>
</li>
</ol>
</pre>
</li>
-<li>Add an event listener and handler for the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> event to the defined element:
+<li>Add an event listener and handler for the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchstart-event" target="_blank">touchstart</a> event to the defined element:
<pre class="prettyprint">
<script>
var touchable = document.getElementById("touchable");
</script>
</pre>
-<p>When a touch events is triggered, its details, such as the event coordinates, identification number, and the subject of the touch, are stored in the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#idl-def-Touch" target="_blank">Touch</a> interface instance. To access the details, the <code>touches.item()</code> method can be used in an array format.</p>
+<p>When a touch events is triggered, its details, such as the event coordinates, identification number, and the subject of the touch, are stored in the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#idl-def-Touch" target="_blank">Touch</a> interface instance. To access the details, the <code>touches.item()</code> method can be used in an array format.</p>
<p>A multi-point touch event refers to additional instances being pushed to the <code>touches.item(index)</code> array. For example, the first touch event is pushed to <code>touches.item(0)</code>, and if a second touch event is triggered without removing the first finger from the screen, the second event is pushed to <code>touches.item(1)</code>.
</p>
</li>
<p>For all canvas objects (images, shapes, text, and lines), you can define colors (the <code>fillStyle</code> and <code>strokeStyle</code> attributes), shadows (the <code>shadowColor</code> and <code>shadowBlur</code> attributes), and gradation (the <code>createLinearGradient()</code> method). You can also use the transformation methods, such as <code>scale()</code>, <code>translate()</code>, <code>transform()</code>, and <code>rotate()</code>, to implement, for example, transparency or shape gradient transformations.</p>
-<p>In mobile applications only, in HTML5, the
HTML5 SVG API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">wearable</a> applications) provides similar features as the canvas. Their difference is that SVG expresses graphics using vectors, while the canvas is based on pixels. To express complex graphics, use the canvas, and to express graphics with a liberal expansion or reduction, use <a href="svg_w.htm">SVG</a>.
+<p>In mobile applications only, in HTML5, the
<a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">Scalable Vector Graphics (SVG) 2</a> API provides similar features as the canvas. Their difference is that SVG expresses graphics using vectors, while the canvas is based on pixels. To express complex graphics, use the canvas, and to express graphics with a liberal expansion or reduction, use <a href="svg_w.htm">SVG</a>.
</p>
<div class="note">
<li>To check the information of the image connected to the canvas, use the <code>toDataURL([Optional], [Variadic])</code> method to restore the URL of the image used in the canvas. To create a blob object of the image file, use the <code>getContext(contextId)</code> method.
</li>
-<li>Use the <a href="http://www.w3.org/TR/2012/WD-2dcontext-20120329/#canvasrenderingcontext2d" target="_blank">CanvasRenderingContext2D</a> interface to connect to the canvas and get the canvas context:
+<li>Use the <code>CanvasRenderingContext2D</code> interface (in <a href="http://www.w3.org/TR/2015/REC-2dcontext-20151119/#canvasrenderingcontext2d" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-2dcontext-20121217/#canvasrenderingcontext2d" target="_blank">wearable</a> applications) to connect to the canvas and get the canvas context:
<pre class="prettyprint">
var canvas = document.querySelector("canvas"),
var context = canvas.getContext('2d');
<ul>
<li><a href="canvas_w.htm">HTML5 Canvas</a>
<p>Enables you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context.</p></li>
- <li><a href="svg_w.htm">HTML5 SVG</a>
+ <li><a href="svg_w.htm">SVG</a>
<p>Enables you to create and modify SVG elements in your application.</p></li>
</ul>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
- <title>HTML5 SVG</title>
+ <title>SVG</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">HTML5 SVG API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#svg">Scalable Vector Graphics (SVG) 2 API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#svg">HTML5 SVG API for Wearable Web</a></li>
<li><a href="https://developer.tizen.org/development/sample/web/Graphics/Shape_Editor" target="_blank">Shape Editor Sample Description</a></li>
</ul>
</div>
<div id="container"><div id="contents"><div class="content">
- <h1>HTML5 SVG</h1>
+ <h1>SVG</h1>
-<p>The SVG supports 2D graphics through SVG (Scalable Vector Graphics). Prior to HTML5, SVG functioned based on XML, so it was only used in XHTML or with a separate SVG plug-in. Since HTML5, however, an <code>svg</code> tag is used in the XML format, and can be added as an inline element in HTML.</p>
+<p>The HTML5 SVG supports 2D graphics through SVG (Scalable Vector Graphics). Prior to HTML5, SVG functioned based on XML, so it was only used in XHTML or with a separate SVG plug-in. Since HTML5, however, an <code>svg</code> tag is used in XML, and can be added as an inline element in HTML.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
-<p>The main HTML5 SVG API features include:</p>
+<p>The main SVG API features include:</p>
<ul>
<li>Creating text and images
<p>You can <a href="#svg_tag">create add text and images</a> to your application as SVG elements.</p></li>
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol>
<li><strong>index.html Source File</strong>
- <p>The main screen displays a <a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" target="_blank">canvas</a> element on which the watch face and needles are placed.</p>
+ <p>The main screen displays a <a href="http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#the-canvas-element" target="_blank">canvas</a> element on which the watch face and needles are placed.</p>
<pre class="prettyprint lang-html">
<head>
<h1>Geolocation API Specification</h1>
-<p>Geolocation defines a location information interface. Common sources of location information are GPS, location inferred from the network (such as IP address), RFID, Wi-Fi, Bluetooth MAC address, and GSM/CDMA cell IDs. The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface is implemented by the <code>Navigator</code> object instances. The location information is represented by the latitude and longitude coordinates.</p>
+<p>Geolocation defines a location information interface. Common sources of location information are GPS, location inferred from the network (such as IP address), RFID, Wi-Fi, Bluetooth MAC address, and GSM/CDMA cell IDs. The <a href="http://www.w3.org/TR/2013/REC-geolocation-API-20131024/#geolocation_interface" target="_blank">Geolocation</a> interface is implemented by the <code>Navigator</code> object instances. The location information is represented by the latitude and longitude coordinates.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>To provide users with location-based features, you must learn to create a mobile GPS application to retrieve location information:</p>
<ol>
<li>Create event handlers for the location requests.
- <p>The <a href="http://www.w3.org/TR/2012/PR-geolocation-API-20120510/#geolocation_interface" target="_blank">Geolocation</a> interface allows 2 types of location requests: "one-shot" position request and repeated position updates. Both request types use the same event handlers. The success event handler is invoked when an attempt to obtain the current location is successful, while the error event handler is invoked when the attempt fails. The success event handler is mandatory, and contains a <code>position</code> parameter that hold the actual position information.</p>
+ <p>The <a href="http://www.w3.org/TR/2013/REC-geolocation-API-20131024/#geolocation_interface" target="_blank">Geolocation</a> interface allows 2 types of location requests: "one-shot" position request and repeated position updates. Both request types use the same event handlers. The success event handler is invoked when an attempt to obtain the current location is successful, while the error event handler is invoked when the attempt fails. The success event handler is mandatory, and contains a <code>position</code> parameter that hold the actual position information.</p>
<pre class="prettyprint">
function successCallback(position)
In the current version of the Tizen Studio, the <code>microphone</code> format for the capture attribute is not available as the voice recorder application is not included.\r
</div>\r
\r
-<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#attr-input-accept" target="_blank">accept</a> attribute indicates which file types are appropriate. If used with a device that has a camera, it activates the device camera. With a device without a camera, it activates the My photo folder.</p>\r
+<p>The <code>accept</code> attribute (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#attr-input-accept" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#attr-input-accept" target="_blank">wearable</a> applications) indicates which file types are appropriate. If used with a device that has a camera, it activates the device camera. With a device without a camera, it activates the My photo folder.</p>\r
<p align="center"><img alt="Activating media features" src="../../../images/media_capture_activating_features.png" /></p>\r
\r
\r
\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
-<p>Using JavaScript, the playback can be controlled with <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media events</a>. The audio and video elements used as media elements inherit all the properties and methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-element" target="_blank">HTMLMediaElement</a> interface.</p>\r
+<p>Using JavaScript, the playback can be controlled with <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media events</a>. The audio and video elements used as media elements inherit all the properties and methods of the <code>HTMLMediaElement</code> interface (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#media-element" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#media-element" target="_blank">wearable</a> applications).</p>\r
\r
<p>The main features of the audio and video elements with JavaScript include:</p>\r
<ul>\r
<li>Creating a player\r
<p>You can <a href="#create">create a simple audio and video player</a>.</p></li>\r
<li>Controlling the playback\r
-<p>You can use the <code>Play()</code> and <code>Pause()</code> methods of the <
a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-elements" target="_blank">Media</a> object to <a href="#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>
\r+<p>You can use the <code>Play()</code> and <code>Pause()</code> methods of the <
code>Media</code> object (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#media-elements" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#media-elements" target="_blank">wearable</a> applications) to <a href="#play">control playing and pausing</a> media files. With media events, additional features can be used.</p>
\r </li>\r
<li>Retrieving duration and play time\r
<p>You can <a href="#retrieve">retrieve the duration and play time</a> of the media file, if its metadata (such as playing time, duration, and video's width and height) is loaded.</p>\r
</li>\r
<li>Playing from a random position\r
-<p>You can indicate the playback time by <a href="#move">playing the media file from a random position</a>. To do this, you must change the <code>currentTime</code> value of the <code>Media</code> object to trigger the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#event-media-timeupdate" target="_blank">timeupdate</a> event.</p>\r
+<p>You can indicate the playback time by <a href="#move">playing the media file from a random position</a>. To do this, you must change the <code>currentTime</code> value of the <code>Media</code> object to trigger the <code>timeupdate</code> event (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#event-media-timeupdate" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#event-media-timeupdate" target="_blank">wearable</a> applications).</p>\r
</li>\r
<li>Retrieving progress state\r
<p>You can <a href="#display">retrieve and display the download progress state</a> using the <code>Progress</code> media event, which is triggered when information related to the progress of a media object loading media contents is updated.</p></li>\r
\r
<div class="note">\r
<strong>Note</strong>\r
- Carefully consider before using the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-media-autoplay" target="_blank">autoplay</a> feature, which plays content automatically in the mobile environment without user interaction. The user can face unintended Internet packet fees or interfering factors, such as playback being stopped unintentionally.\r
+ Carefully consider before using the <code>autoplay</code> feature (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-media-autoplay" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#attr-media-autoplay" target="_blank">wearable</a> applications), which plays content automatically in the mobile environment without user interaction. The user can face unintended Internet packet fees or interfering factors, such as playback being stopped unintentionally.\r
</div>\r
\r
<h3>Source Code</h3>\r
</pre>\r
<p>The <strong>Pause</strong> button is disabled until the play event occurs.</p>\r
</li>\r
-<li>Define the button functions. Play and pause the media file using the <code>play()</code> and <code>pause()</code> methods of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#media-element" target="_blank">HTMLMediaElement</a> interface.\r
+<li>Define the button functions. Play and pause the media file using the <code>play()</code> and <code>pause()</code> methods of the <code>HTMLMediaElement</code> interface (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#media-element" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#media-element" target="_blank">wearable</a> applications).\r
\r
<pre class="prettyprint lang-js">\r
<script>\r
</div>\r
</pre>\r
</li>\r
-<li><p>Use the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#dom-navigator-canplaytype" target="_blank">canPlayType()</a> method to check, whether the selected media files have an acceptable MIME type, and can be played:</p>\r
+<li><p>Use the <code>canPlayType()</code> method (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#dom-navigator-canplaytype" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#dom-navigator-canplaytype" target="_blank">wearable</a> applications) to check, whether the selected media files have an acceptable MIME type, and can be played:</p>\r
<pre class="prettyprint">\r
<script>\r
var video1 = document.getElementById("video1");\r
<li>Loading source data\r
<p>You must <a href="#load">load source data</a> before using the Web Audio API. You can do this using <a href="../communication/xmlhttprequest_w.htm">XMLHttprequest</a>.</p>\r
\r
-<p>The <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> interface is used to manage and play the sound. It creates a high quality sound and connects to the destination of the sound.</p>\r
+<p>The <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioContext" target="_blank">AudioContext</a> interface is used to manage and play the sound. It creates a high quality sound and connects to the destination of the sound.</p>\r
</li>\r
<li>Modular routing\r
-<p><a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#ModularRouting-section" target="_blank">Modular routing</a> means <a href="#use">routing audio data</a> either in a direct manner, such as speaker output, or through a connection to <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a>, which handle, for example, volume adjustment and filters.</p></li>\r
+<p><a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#ModularRouting" target="_blank">Modular routing</a> means <a href="#use">routing audio data</a> either in a direct manner, such as speaker output, or through a connection to <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#the-audionode-interface" target="_blank">AudioNodes</a>, which handle, for example, volume adjustment and filters.</p></li>\r
<li>Playing sound\r
<p>Use the <code>noteOn(time)</code> or <code>start(time)</code> method to <a href="#play">play sound</a> with the time parameter for specifying the time interval in seconds after which the audio is played. For example, the <code>0</code> time value implies playing the audio immediately and the <code>currentTime + 0.75</code> time value implies that the audio is played after 0.75 seconds.</p>\r
-<p>You can use the <code>noteOff(time)</code> or <code>stop(time)</code> methods similarly to stop the sound. After stopping sound, recreate the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBufferSourceNode" target="_blank">AudioBufferSourceNode</a> interface instance to play sound again.</p></li>\r
+<p>You can use the <code>noteOff(time)</code> or <code>stop(time)</code> methods similarly to stop the sound. After stopping sound, recreate the <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioBufferSourceNode" target="_blank">AudioBufferSourceNode</a> interface instance to play sound again.</p></li>\r
</ul>\r
\r
<h2 id="load" name="load">Loading Data and Creating Audio Context</h2>\r
\r
-<p>To provide users with sophisticated audio features, you must learn to modulate source data into decoded audio data using <a href="../communication/xmlhttprequest_w.htm">XMLHttpRequest</a>, and create an instance of the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> interface:</p>\r
+<p>To provide users with sophisticated audio features, you must learn to modulate source data into decoded audio data using <a href="../communication/xmlhttprequest_w.htm">XMLHttpRequest</a>, and create an instance of the <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioContext" target="_blank">AudioContext</a> interface:</p>\r
\r
<ol>\r
<li>To load source audio data:\r
};\r
</script>\r
</pre>\r
-<p>This data is used in the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBuffer-section" target="_blank">AudioBuffer</a>.</p>\r
+<p>This data is used in the <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioBuffer" target="_blank">AudioBuffer</a>.</p>\r
</li>\r
</ol>\r
</li>\r
</script>\r
</pre>\r
<p>AudioContext instance supports various sound inputs, and it is possible to create an audio graph. You can create 1 or more sound sources to manage sound and connect to the sound destination.</p>\r
-<p>The majority of the Web Audio API features, such as creating audio file data, decoding it, and creating <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a> are managed using the methods of the <code>AudioContext</code> interface.</p>\r
+<p>The majority of the Web Audio API features, such as creating audio file data, decoding it, and creating <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#the-audionode-interface" target="_blank">AudioNodes</a> are managed using the methods of the <code>AudioContext</code> interface.</p>\r
</li>\r
\r
<li>To create an audio buffer:\r
-<p>Create an <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBuffer-section" target="_blank">AudioBuffer</a> interface using the array buffer of audio data response attributes of the <code>XMLHttpRequest()</code> method. Select from the following options:</p>\r
+<p>Create an <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioBuffer" target="_blank">AudioBuffer</a> interface using the array buffer of audio data response attributes of the <code>XMLHttpRequest()</code> method. Select from the following options:</p>\r
<ul>\r
<li><p>Create the audio buffer using the <code>createBuffer()</code> method:</p>\r
<pre class="prettyprint">\r
\r
<h2 id="use" name="use">Using Modular Routing</h2>\r
\r
-<p>To provide users with sophisticated audio features, you must learn to enable routing audio source data using <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNode</a> objects:</p>\r
+<p>To provide users with sophisticated audio features, you must learn to enable routing audio source data using <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#the-audionode-interface" target="_blank">AudioNode</a> objects:</p>\r
\r
<ol>\r
<li>To route to speaker output in a direct sound destination:\r
<ol type="a">\r
-<li><p>Create a WebKit-based <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> instance:</p>\r
+<li><p>Create a WebKit-based <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioContext" target="_blank">AudioContext</a> instance:</p>\r
<pre class="prettyprint">\r
<script>\r
var context;\r
}\r
</script>\r
</pre>\r
-<p>All routing occurs within an <code>AudioContext</code> containing a single <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioDestinationNode-section" target="_blank">AudioDestinationNode</a>.</p>\r
+<p>All routing occurs within an <code>AudioContext</code> containing a single <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioDestinationNode" target="_blank">AudioDestinationNode</a>.</p>\r
\r
<p align="center"><img alt="Direct routing" src="../../../images/web_audio1.png" /></p>\r
</li>\r
</ol>\r
</li>\r
</ol>\r
-<p><code>AudioNodes</code> can be used to activate sound effects, and create tweaks, audio parameters, and audio graphs using the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#GainNode-section" target="_blank">GainNode</a> interface, or filter sounds using the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#BiquadFilterNode" target="_blank">BiquadFilterNode</a> interface.</p>\r
+<p><code>AudioNodes</code> can be used to activate sound effects, and create tweaks, audio parameters, and audio graphs using the <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#GainNode" target="_blank">GainNode</a> interface, or filter sounds using the <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#the-biquadfilternode-interface" target="_blank">BiquadFilterNode</a> interface.</p>\r
\r
<h3>Source Code</h3>\r
<p>For the complete source code related to this use case, see the following file:</p>\r
\r
<p>To provide users with sophisticated audio features, you must learn to play sound:</p>\r
<ol>\r
-<li><p>Create a WebKit-based <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> instance:</p>\r
+<li><p>Create a WebKit-based <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioContext" target="_blank">AudioContext</a> instance:</p>\r
<pre class="prettyprint">\r
<script>\r
var context;\r
</li>\r
</ol>\r
\r
-<p>The <code>AudioContext</code> instance digitally modulates the audio source file into audio data. After creating the sound source, playback is implemented by processing audio data using <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNodes</a> either directly to the speaker, or in the middle.</p>\r
+<p>The <code>AudioContext</code> instance digitally modulates the audio source file into audio data. After creating the sound source, playback is implemented by processing audio data using <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#the-audionode-interface" target="_blank">AudioNodes</a> either directly to the speaker, or in the middle.</p>\r
\r
<h3>Source Code</h3>\r
<p>For the complete source code related to this use case, see the following file:</p>\r
\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
-<p>Making script-based animations requires updating the properties of the animated objects in each frame. In computerized animations, the frame rate is normally 30 or 60 fps (frames per second), because the human eye perceives a sequence of images as an animation when they change at least 12-15 times per second. The <code>requestAnimationFrame()</code> (or <code>webkitRequestAnimationFrame()</code>) method
of the <a href="http://www.w3.org/TR/2012/WD-animation-timing-20120221/?cp=25_6_3_8_2#the-WindowAnimationTiming-interface" target="_blank">WindowAnimationTiming</a> interface enables <a href="#Creating_App">scheduling the animation frame update requests</a>. The frame update rate depends on implementation. In Tizen 2.2, it is about 60 fps.</p>
\r+<p>Making script-based animations requires updating the properties of the animated objects in each frame. In computerized animations, the frame rate is normally 30 or 60 fps (frames per second), because the human eye perceives a sequence of images as an animation when they change at least 12-15 times per second. The <code>requestAnimationFrame()</code> (or <code>webkitRequestAnimationFrame()</code>) method enables <a href="#Creating_App">scheduling the animation frame update requests</a>. The frame update rate depends on implementation. In Tizen 2.2, it is about 60 fps.</p>\r
\r
<div class="note">\r
<strong>Note</strong>\r
</ul>\r
\r
<h2 id="multi" name="multi">Multi-threading</h2>\r
-<p>Generally, Web applications are built and run using a single UI thread. Since only 1 task can be handled at a time, the Web application may not respond due to the execution time of a script block, resulting in lower application performance. To solve these performance-related issues, multi-thread <a href="http://www.w3.org/TR/2012/CR-workers-20120501/" target="_blank">Web workers</a> can be used to provide distributed processing in applications. Use Web workers in applications that require complex calculations or parallel processing for better application performance.</p>\r
+<p>Generally, Web applications are built and run using a single UI thread. Since only 1 task can be handled at a time, the Web application may not respond due to the execution time of a script block, resulting in lower application performance. To solve these performance-related issues, multi-thread Web workers (in <a href="http://www.w3.org/TR/2015/WD-workers-20150924/" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-workers-20120501/" target="_blank">wearable</a> applications) can be used to provide distributed processing in applications. Use Web workers in applications that require complex calculations or parallel processing for better application performance.</p>\r
\r
<p>Since the task of changing the image color using a canvas involves allocating a color value for each pixel of the image displayed on the screen, the program requires a complicated calculation to execute loops by the number of the pixels. The following examples of applying a color filter effects to an image to change the color show:</p>\r
<ul>\r
\r
<h1>Cross-Origin Resource Sharing</h1>\r
\r
- <p>Tizen supports the mechanism of cross-origin resource sharing (CORS), which can activate a client-side <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#cross-origin-request-0" target="_blank">cross-origin request</a> (COR).</p>\r
+ <p>Tizen supports the mechanism of cross-origin resource sharing (CORS), which can activate a client-side <a href="http://www.w3.org/TR/2014/REC-cors-20140116/#cross-origin-request-0" target="_blank">cross-origin request</a> (COR).</p>\r
\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
<p>In CORS, new headers related to HTTP communication have been added to allow you to accept or reject CORs:</p>\r
<ul>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#origin-request-header" target="blank">Origin</a> request header\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#origin-request-header" target="blank">Origin</a> request header\r
<p>Includes the domain information which has incurred the COR, and is used for the purpose of checking the source of the domain side that has received the relevant request. In addition, this header is protected in the browser side and cannot be changed from the application side.</p></li>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> response header\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> response header\r
<p>Allows a relevant response only when the information in the <code>Origin</code> request header matches. If the <code>Access-Control-Allow-Origin</code> header is a wildcard (*), it unconditionally allows the response regardless of the <code>Origin</code> request header information.</p>\r
\r
<div class="note">\r
<p>CORS supports 2 request types: simple and preflight.</p>\r
\r
<h2 name="simple" id="simple">Simple Request</h2>\r
-<p>The request is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-requests" target="_blank">simple request</a>, if all the conditions following conditions are met:</p>\r
+<p>The request is considered to be a <a href="http://www.w3.org/TR/2014/REC-cors-20140116/#resource-requests" target="_blank">simple request</a>, if all the conditions following conditions are met:</p>\r
<ul>\r
<li>HTTP methods can only use <code>GET</code>, <code>POST</code>, and <code>HEAD</code>.</li>\r
<li>No custom header is allowed.</li>\r
\r
<p>When <a href="#Using_Simple_Requests">using simple requests</a>, the response is set in the server side with the following response headers:</p>\r
<ul>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>\r
\r
</ul>\r
\r
\r
<h2 name="preflight" id="preflight">Preflight Request</h2>\r
\r
-<p>If a request is not a simple request, it is considered to be a <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#resource-preflight-requests" target="_blank">preflight (non-simple) request</a>, which is <a href="http://www.w3.org/TR/2012/WD-cors-20120403/#terminology" target="_blank">case-insensitive</a>.</p>\r
+<p>If a request is not a simple request, it is considered to be a <a href="http://www.w3.org/TR/2014/REC-cors-20140116/#resource-preflight-requests" target="_blank">preflight (non-simple) request</a>, which is <a href="http://www.w3.org/TR/2014/REC-cors-20140116/#terminology" target="_blank">case-insensitive</a>.</p>\r
<p>If the access authority is allowed through the preflight request, the actual request for sending the actual data is made. The preflight request can allow access based on various standards other than <code>Origin</code>, such as HTTP certification, HTTP method (for example, <code>GET</code>, <code>POST</code>, or <code>PUT…</code>), or the existence of a certain header.</p>\r
<p>When <a href="#Using_Preflight_Requests">using preflight requests</a>, the response is set in the server side with the following response headers:</p>\r
<ul>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-methods-response-header" target="_blank">Access-Control-Allow-Methods</a> (mandatory)</li>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-headers-response-header" target="_blank">Access-Control-Allow-Headers</a> (mandatory, if a custom header is used)</li>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>\r
-<li><a href="http://www.w3.org/TR/2012/WD-cors-20120403/#access-control-max-age-response-header" target="_blank">Access-Control-Max-Age</a> (optional)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-allow-origin-response-header" target="_blank">Access-Control-Allow-Origin</a> (mandatory)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-allow-methods-response-header" target="_blank">Access-Control-Allow-Methods</a> (mandatory)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-allow-headers-response-header" target="_blank">Access-Control-Allow-Headers</a> (mandatory, if a custom header is used)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-allow-credentials-response-header" target="_blank">Access-Control-Allow-Credentials</a> (optional)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-expose-headers-response-header" target="_blank">Access-Control-Expose-Headers</a> (optional)</li>\r
+<li><a href="http://www.w3.org/TR/2014/REC-cors-20140116/#access-control-max-age-response-header" target="_blank">Access-Control-Max-Age</a> (optional)</li>\r
\r
</ul>\r
\r
\r
<h2 id="Using_Simple_Requests" name="Using_Simple_Requests">Using Simple Requests</h2>\r
\r
-<p>Learning how to handle a simple request based on XML HTTP Request level 2 enhances the security features of your application:</p>\r
+<p>Learning how to handle a simple request based on an XML HTTP Request enhances the security features of your application:</p>\r
\r
<ol>\r
<li>Create an <a href="../communication/xmlhttprequest_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication:\r
\r
<h2 id="Using_Preflight_Requests" name="Using_Preflight_Requests">Using Preflight Requests</h2>\r
\r
-<p>Learning how to handle a preflight request based on XML HTTP Request level 2 enhances the security features of your application.</p>\r
+<p>Learning how to handle a preflight request based on an XML HTTP Request enhances the security features of your application.</p>\r
\r
<ol>\r
<li>Create an <a href="../communication/xmlhttprequest_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication. In addition, define the request <code>Content-Type</code> and add a custom header.\r
<li><a href="#Sandboxed_Page">Redirecting a Sandboxed Page</a></li>\r
<li><a href="#Sandboxed_Form">Submitting a Sandboxed Form</a></li>\r
<li><a href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a></li>\r
- <li><a href="#Parent_Document">Including Rendered Content in the Parent Document</a>\r
- </li>\r
</ul>\r
<p class="toc-title">Related Info</p>\r
<ul class="toc">\r
\r
<p>This feature is supported in mobile and wearable applications only.</p>\r
\r
-<p>The main features of the <code>iframe</code> element include:</p>\r
+<p>The main feature of the <code>iframe</code> element is the <code>sandbox</code> attribute (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-iframe-sandbox" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#attr-iframe-sandbox" target="_blank">wearable</a> applications):</p>\r
\r
<ul>\r
-<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> attribute\r
-<p>To enhance application security, you can use the <code>sandbox</code> attribute of the <code>iframe</code> object to control the execution of tasks that can result in unreliable content.</p>\r
-<p>If an empty value is assigned to the <code>sandbox</code> attribute, the following restrictions are applied:</p>\r
+<li><p>To enhance application security, you can use the <code>sandbox</code> attribute of the <code>iframe</code> object to control the execution of tasks that can result in unreliable content.</p></li>\r
+<li><p>If an empty value is assigned to the <code>sandbox</code> attribute, the following restrictions are applied:</p>\r
<ul>\r
<li>Content is treated as belonging to a unique origin. Access to cookies, local storage, and other pages within the same domain are not allowed.</li>\r
<li>Form submission is disabled.</li>\r
<li><code>allow-popups</code>\r
<p>Enables <a href="#Sandboxed_Popups"> opening a pop-up window from the sandboxed element</a>.</p></li>\r
</ul></li>\r
-\r
-<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute\r
-<p>You can use the <code>seamless</code> attribute provided in the <code>iframe</code> object to <a href="#Parent_Document"> render a page as a part of the parent document and include it in the <code>iframe</code> element</a>.</p></li>\r
</ul>\r
\r
<div class="note">\r
<strong>Note</strong>\r
- The <code>scrolling</code>, <code>align</code>, <code>frameborder</code>, <code>marginheight</code>, <code>marginwidth</code>, and <code>longdesc</code> HTML5 attributes are no longer supported in the latest HTML5 version.\r
+ The <code>scrolling</code>, <code>align</code>, <code>frameborder</code>, <code>marginheight</code>, <code>marginwidth</code>, <code>longdesc</code>, and <code>seamless</code> HTML5 attributes are no longer supported in the latest HTML5 version.\r
</div>\r
\r
<h2 id="Sandboxed_Cookies" name="Sandboxed_Cookies">Accessing Sandboxed Cookies</h2>\r
\r
<p>Learning how to control <code>iframe</code> element content when accessing the cookies of the parent document enhances the security features of your application:</p>\r
<ol>\r
-<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow script execution in the <code>iframe</code> element content and cookie access, set the <code>sandbox</code> attribute value as <code>allow-same-origin</code>:\r
+<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <code>sandbox</code> property (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-iframe-sandbox" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#attr-iframe-sandbox" target="_blank">wearable</a> applications). To allow script execution in the <code>iframe</code> element content and cookie access, set the <code>sandbox</code> attribute value as <code>allow-same-origin</code>:\r
<pre class="prettyprint">\r
<input type="checkbox" id="chkSandbox" name="chkSandbox"\r
onclick="setSandbox()"/> Enable Sandbox\r
\r
<iframe src="iframe_cookie_stolen.html"\r
sandbox="allow-scripts allow-same-origin"\r
- id="iframe" seamless\r
+ id="iframe"\r
width="100%" height="350px"\r
style="border: 1px solid #DCDCDC;"></iframe>\r
</pre></li>\r
\r
<p>Learning how to control <code>iframe</code> element content when redirecting a page enhances the security features of your application:</p>\r
<ol>\r
-<li>Create an <code><input></code> element of the <code>checkbox</code> type that disables the sandbox. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property:\r
+<li>Create an <code><input></code> element of the <code>checkbox</code> type that disables the sandbox. In addition, create an <code>iframe</code> element with the <code>sandbox</code> property (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-iframe-sandbox" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#attr-iframe-sandbox" target="_blank">wearable</a> applications):\r
<pre class="prettyprint">\r
<input type="checkbox" id="chkSandbox" name="chkSandbox"\r
onclick="setSandbox()"/> Disable Sandbox\r
\r
<iframe src="iframe_page_redirection.html"\r
sandbox="allow-scripts"\r
- id="iframe" seamless></iframe>\r
+ id="iframe"></iframe>\r
</pre></li>\r
<li>If the <code>sandbox</code> attribute is deactivated, set the <code>allow-top-navigation</code> attribute to the <code>sandbox</code> attribute value:\r
<pre class="prettyprint">\r
<h2 id="Sandboxed_Form" name="Sandboxed_Form">Submitting a Sandboxed Form</h2>\r
<p>Learning how to control <code>iframe</code> element content when submitting a form enhances the security features of your application:</p>\r
<ol>\r
-<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow form submission, set the <code>sandbox</code> attribute value as <code>allow-forms</code>:\r
+<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <code>sandbox</code> property (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-iframe-sandbox" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#attr-iframe-sandbox" target="_blank">wearable</a> applications). To allow form submission, set the <code>sandbox</code> attribute value as <code>allow-forms</code>:\r
<pre class="prettyprint">\r
<input type="checkbox" id="chkSandbox" name="chkSandbox"\r
onclick="setSandbox()"/> Enable Sandbox\r
\r
<p>Learning how to control the opening of the <code>iframe</code> element content enhances the security features of your application:</p>\r
<ol>\r
-<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow pop-ups, set the <code>sandbox</code> attribute value as <code>allow-popups</code>:\r
+<li>Create an <code><input></code> element of the <code>checkbox</code> type that enables the sandbox activation. In addition, create an <code>iframe</code> element with the <code>sandbox</code> property (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-iframe-sandbox" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#attr-iframe-sandbox" target="_blank">wearable</a> applications). To allow pop-ups, set the <code>sandbox</code> attribute value as <code>allow-popups</code>:\r
<pre class="prettyprint">\r
<input type="checkbox" id="chkSandbox" name="chkSandbox"\r
onclick="setSandbox()"/> Enable Sandbox\r
\r
<iframe src="iframe_popup.html"\r
sandbox="allow-scripts allow-same-origin allow-popups"\r
- id="iframe" seamless\r
+ id="iframe"\r
style="border: 1px solid #DCDCDC;"></iframe>\r
</pre></li>\r
<li>If the <code>sandbox</code> attribute is activated, remove the <code>allow-popups</code> flag from the <code>sandbox</code> attribute value:\r
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">popup.html</a></li>\r
</ul>\r
\r
- <h2 id="Parent_Document" name="Parent_Document">Including Rendered Content in the Parent Document</h2>\r
-\r
- <p>Learning how to include rendered content seamlessly in the parent document using the <code>iframe</code> element enhances the security features of your application:</p>\r
-<ol>\r
-<li>Create the needed HTML elements, including the CSS style of the parent document. Create an <code>iframe</code> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute setting, and another <code>iframe</code> element without the setting:\r
-<pre class="prettyprint">\r
-<head>\r
- <style>\r
- body, html\r
- {\r
- margin: 0; padding: 0;\r
- }\r
- body\r
- {\r
- font-size: 12px;\r
- }\r
- h3\r
- {\r
- color: blue;\r
- }\r
- </style>\r
-</head>\r
-<body>\r
- <h2>HTML5 iframe</h2>\r
- <iframe seamless src="iframe.html"></iframe>\r
- <iframe src="iframe.html"></iframe>\r
-</body>\r
-</pre></li>\r
-<li>Create the <code>iframe</code> element content. The <code>iframe</code> element with the <code>seamless</code> attribute set displays the content with the inherited CSS style:\r
-<pre class="prettyprint">\r
-<body>\r
- <h3>iframe! h3 Content</h3>\r
- <ul>\r
- <li><a href="http://tizen.org">tizen.org</a></li>\r
- <li><a href="http://tizen.org" target="_self">\r
- tizen.org target="_self"</a>\r
- </li>\r
- </ul>\r
-</body>\r
-</pre></li>\r
-</ol>\r
-<p align="center"><strong>Figure: Seamless content appending (in mobile applications only)</strong></p>\r
-<p align="center"><img alt="Seamless content appending (in mobile applications only)" src="../../../images/execution_screen.png"/></p>\r
-<h3>Source Code</h3>\r
- <p>For the complete source code related to this use case, see the following files:</p>\r
- <ul>\r
- <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_seamless.html</a></li>\r
- <li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">seamless.html</a></li>\r
- </ul>\r
-\r
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>\r
<script type="text/javascript" src="../../../scripts/showhide.js"></script>\r
</div></div></div>\r
<li>Cache updating
<p>To update a cached item in the client, you need to <a href="#update">change the manifest file</a>.</p></li>
<li>Cache management
-<p>Application cache can control JavaScript based on <a href="http://www.w3.org/TR/201
2/WD-html5-20120329/offline.html#appcacheevents" target="_blank">events</a>. It can <a href="#manage">check or update the current cache status</a>.</p></li>
+<p>Application cache can control JavaScript based on <a href="http://www.w3.org/TR/201
4/REC-html5-20141028/browsers.html#appcacheevents" target="_blank">events</a>. It can <a href="#manage">check or update the current cache status</a>.</p></li>
</ul>
<h2 id="set" name="set">Setting the Cache Manifest</h2>
<p>To set the cache manifest file content:</p>
<ol>
<li>
-<p>Begin the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#writing-cache-manifests" target="_blank">manifest file</a> with CACHE MANIFEST content:</p>
+<p>Begin the <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#writing-cache-manifests" target="_blank">manifest file</a> with CACHE MANIFEST content:</p>
<pre class="prettyprint">
CACHE MANIFEST
# 2013-03-18 v2.0.0
<li>Local file management
<ul>
<li>Reading local file information
-<p>You can select a local file to upload using the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">FileList</a> interface, which creates and returns a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">File</a> object.</p>
+<p>You can select a local file to upload using the <code>FileList</code> interface (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#dfn-filelist" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">wearable</a> applications), which creates and returns a <code>File</code> object (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#file" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">wearable</a> applications).</p>
<p>The <code>File</code> object is used to <a href="#read_info">read basic file information</a>.
</p>
</li>
<li>Reading local file content
-<p>You can use the reading methods of the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> interface to <a href="#read_content">read file content</a> in text, binary, or <code>dataURL</code> format. If the data is loaded, the <code>onload</code> event occurs. This event uses the data reading methods according to file format.</p></li>
+<p>You can use the reading methods of the <code>FileReader</code> interface (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#dfn-filereader" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">wearable</a> applications) to <a href="#read_content">read file content</a> in text, binary, or <code>dataURL</code> format. If the data is loaded, the <code>onload</code> event occurs. This event uses the data reading methods according to file format.</p></li>
<li>Slicing local files
-<p>You can use the <code>slice()</code> method with a local file or the <
a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">Blob</a> interface to <a href="#slice">slice data objects</a>. You can use the created blob to read data as a binary string using the <code>FileReader</code> interface. </p>
+<p>You can use the <code>slice()</code> method with a local file or the <
code>Blob</code> interface (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#blob" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">wearable</a> applications) to <a href="#slice">slice data objects</a>. You can use the created blob to read data as a binary string using the <code>FileReader</code> interface. </p>
</li>
</ul>
</li>
</div>
</li>
-<li>Create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">FileList</a> instance:
+<li>Create a <code>FileList</code> instance (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#dfn-filelist" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">wearable</a> applications):
<pre class="prettyprint">
<script>
var files = document.getElementById("tizenFiles").files;
</pre>
</li>
-<li>Create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> instance to read the content of the local image file. Use the <code>readAsDataURL()</code> method to read data in the <code>dataURL</code> format.
+<li>Create a <code>FileReader</code> instance (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#dfn-filereader" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">wearable</a> applications) to read the content of the local image file. Use the <code>readAsDataURL()</code> method to read data in the <code>dataURL</code> format.
<p>If the data is loaded, an <code>onload</code> event is fired. Create an <code>img</code> element to allocate the event result property value for rendering:</p>
<pre class="prettyprint">
<script>
<h2 id="slice" name="slice">Slicing Blob</h2>
-<p>Slicing a local file using the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">Blob</a> interface is a useful file management skill:</p>
+<p>Slicing a local file using the <code>Blob</code> interface (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#blob" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">wearable</a> applications) is a useful file management skill:</p>
<ol>
<li>Create the <code><input type="file"></code> element, the element for inputting the start byte and the end byte for slice, and the element for displaying the slicing result:
</pre>
</li>
-<li>To read the local file, create a <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">FileReader</a> instance:
+<li>To read the local file, create a <code>FileReader</code> instance (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#dfn-filereader" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">wearable</a> applications):
<pre class="prettyprint">
<script>
var reader = new FileReader();
</pre>
</li>
-<li>Slice the defined byte range (from <code>startByte</code> to <code>endByte</code>) using the <code>slice()</code> method of the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">File</a> interface:
+<li>Slice the defined byte range (from <code>startByte</code> to <code>endByte</code>) using the <code>slice()</code> method of the <code>File</code> interface (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#file" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#file" target="_blank">wearable</a> applications):
<pre class="prettyprint lang-js">
<script>
<ul>
<li>Creating a database
<p>
-Use the <code>IndexedDB.open()</code> method to <a href="#db">create a database</a>. In a <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#database-concept" target="_blank">database</a>, at least 1 <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> must be present.</p>
+Use the <code>IndexedDB.open()</code> method to <a href="#db">create a database</a>. In a database (in <a href="http://www.w3.org/TR/2015/REC-IndexedDB-20150108/#database-concept" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/#database-concept" target="_blank">wearable</a> applications), at least 1 object store (in <a href="http://www.w3.org/TR/2015/REC-IndexedDB-20150108/#object-store-concept" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/#object-store-concept" target="_blank">wearable</a> applications) must be present.</p>
</li>
<li>Creating an object store
<div class="note">
<strong>Note</strong>
- Tizen supports the <code>READ_ONLY</code>, <code>READ_WRITE</code>, and <code>VERSION_CHANGE</code> <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#transaction" target="_blank">transactions</a> with the <code>unsigned short</code> type.
+ Tizen supports the <code>READ_ONLY</code>, <code>READ_WRITE</code>, and <code>VERSION_CHANGE</code> transactions (in <a href="http://www.w3.org/TR/2015/REC-IndexedDB-20150108/#transaction" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/#transaction" target="_blank">wearable</a> applications) with the <code>unsigned short</code> type.
</div>
</li>
<li>Creating an index
<p>In the object store, you can use the <code>createIndex()</code> method to <a href="#index">generate an
-index</a>. You can search and retrieve records stored in the
-<a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#index-concept" target="_blank">index</a> using other properties than the key, as the key is not always unique. You can also retrieve records containing arrays as keys.</p>
+index</a>. You can search for and retrieve records stored in the index (in <a href="http://www.w3.org/TR/2015/REC-IndexedDB-20150108/#index-concept" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/#index-concept" target="_blank">wearable</a> applications) using other properties than the key, as the key is not always unique. You can also retrieve records containing arrays as keys.</p>
</li>
</ul>
<ol>
<li>
-<p>Use the <code>window.webkitIndexedDB.open()</code> method to generate a database named <code>TizenIndexedDB</code> in order to create an <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> for storage:</p>
+<p>Use the <code>window.webkitIndexedDB.open()</code> method to generate a database named <code>TizenIndexedDB</code> in order to create an object store for storage:</p>
<pre class="prettyprint">
<script>
<div class="note">
<strong>Note</strong>
- The name of the database can be any string type, including an empty string. To change the version of the database, use the <code>VERSION_CHANGE</code> <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#transaction-concept" target="_blank">transaction</a>.
+ The name of the database can be any string type, including an empty string. To change the version of the database, use the <code>VERSION_CHANGE</code> transaction.
</div>
</li>
<li>
<p>An object store can derive keys from the following sources:
</p>
<ul>
-<li>
<a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#dfn-key-generator" target="_blank">Key generator</a><p>Generates an increasing number every time a key is needed.</p>
+<li>
Key generator (in <a href="http://www.w3.org/TR/2015/REC-IndexedDB-20150108/#dfn-key-generator" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/#dfn-key-generator" target="_blank">wearable</a> applications) <p>Generates an increasing number every time a key is needed.</p>
</li>
-<li>
-<a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#key-path-construct" target="_blank">Keypath</a> <p>Key is derived through a key path. </p>
+<li>Key path (in <a href="http://www.w3.org/TR/2015/REC-IndexedDB-20150108/#key-path-construct" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/#key-path-construct" target="_blank">wearable</a> applications) <p>Key is derived through a key path. </p>
</li>
-<li>
<a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#value-construct" target="_blank">Value</a> <p>Key is specified when a value is stored in the object store.</p></li>
+<li>
Value (in <a href="http://www.w3.org/TR/2015/REC-IndexedDB-20150108/#value-construct" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/#value-construct" target="_blank">wearable</a> applications) <p>Key is specified when a value is stored in the object store.</p></li>
</ul>
-<p>Creating and deleting an <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> is a useful data management skill:</p>
+<p>Creating and deleting an object store is a useful data management skill:</p>
<ol>
<li>
<p>To generate an object store for data storage, use the <code>createObjectStore()</code> method:</p>
<p>The Web Storage API provides 2 storage types:</p>
<ul>
-<li><a href="http://www.w3.org/TR/2011/CR-webstorage-20111208/#the-localstorage-attribute" target="_blank">Local storage</a>
+<li>Local storage (in <a href="http://www.w3.org/TR/2015/CR-webstorage-20150609/#the-localstorage-attribute" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-webstorage-20110901/#the-localstorage-attribute" target="_blank">wearable</a> applications)
<p>Stores data to be used in multiple windows, beyond the current session, with no expiration date. The stored data is not deleted when the browser window is closed, and can be shared between browser windows.</p>
</li>
-<li><a href="http://www.w3.org/TR/2011/CR-webstorage-20111208/#the-sessionstorage-attribute" target="_blank">Session storage</a>
+<li>Session storage (in <a href="http://www.w3.org/TR/2015/CR-webstorage-20150609/#the-sessionstorage-attribute" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-webstorage-20110901/#the-sessionstorage-attribute" target="_blank">wearable</a> applications)
<p>Valid for only a single session.
</p><p>
The data stored in a temporary storage can be shared in all browser windows within the same domain, but once the browser window is closed, data is deleted.
<ul>
<li><a href="webgl_w.htm">WebGL™</a></li>
<li><a href="../graphics/canvas_w.htm">Canvas</a></li>
-<li><a href="../communication/xmlhttprequest_w.htm">XMLHttpRequest Level 2</a></li>
+<li><a href="../communication/xmlhttprequest_w.htm">XMLHttpRequest</a></li>
</ul></li>
</ul>
</div>
</li>
-<li>For the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2 API</a>, set the response type of the <code>XMLHttpRequest</code> object as <code>arraybuffer</code> to receive a typed array response. This way by delivering data directly in multimedia, you can parse the binary file through the network:
+<li>For the XMLHttpRequest API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">wearable</a> applications), set the response type of the <code>XMLHttpRequest</code> object as <code>arraybuffer</code> to receive a typed array response. This way by delivering data directly in multimedia, you can parse the binary file through the network:
<pre class="prettyprint">
this.setSound = function()
{
<p>Tizen supports the CSS Flexible Box Layout Module API that enables you to create an easily manageable flexible layout, which fluidly adjusts the layout according to viewport size changes. When you <a href="#create">create and use a flexible box layout</a>, the alignment method or object (flex item) size within a specific area (flex container) can be adjusted.</p>
<p>The main components of the flexible box layout include:</p>
<ul>
-<li>
<a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-containers" target="_blank">Flex container</a>, which refers to flex or inline-flex DOM elements assigned by the display.<p>You can <a href="#usecont">use the flex container</a> to assign a flex area and the flex items included in it. The flex container properties are used to assign the indication area and alignment method.</p></li>
-<li><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items" target="_blank">Flex item</a>, which refers to the child nodes of the flex container.
+<li>
Flex container (in <a href="http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/#flex-containers" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#flex-containers" target="_blank">wearable</a> applications), which refers to flex or inline-flex DOM elements assigned by the display.<p>You can <a href="#usecont">use the flex container</a> to assign a flex area and the flex items included in it. The flex container properties are used to assign the indication area and alignment method.</p></li>
+<li>Flex item (in <a href="http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/#flex-items" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#flex-items" target="_blank">wearable</a> applications), which refers to the child nodes of the flex container.
<p>The flex item changes its size fluidly according to the area of the flex container. You can <a href="#item">define flex item properties</a> to assign the sizes of the respective items and the alignment method.</p></li>
</ul>
<p align="center"><strong>Figure: Flexible box layout</strong></p>
<div class="note">
<strong>Note</strong>
- For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#property-index" target="_blank">Property index</a>.
+ For a complete list of CSS Fonts Module Level 3 font properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#font">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#font">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/#property-index" target="_blank">Property index</a>.
</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<th>Example</th>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-datalist-element" target="_blank">datalist</a></td>
+ <td><code>datalist</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-datalist-element" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-datalist-element" target="_blank">wearable</a> applications)</td>
<td>Defines a set of option elements that represent predefined options for other controls. The element is used together with the <code>input</code> element to predefine its value.
<p>In Tizen, the value selected in the <code>datalist</code> element can be edited.</p></td>
<td>
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-keygen-element" target="_blank">keygen</a></td>
+ <td><code>keygen</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-keygen-element" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-keygen-element" target="_blank">wearable</a> applications)</td>
<td>Defines a control for generating a public-private key pair and for submitting the public key from that key pair. The element creates an encrypted key with the value of the <code>name</code> attribute, saves it in the user's computer and Web server, and activates the next procedure when the 2 values match.</td>
<td rowspan="1" colspan="1">
<pre class="prettyprint">
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-meter-element" target="_blank">meter</a></td>
+ <td><code>meter</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-meter-element" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-meter-element" target="_blank">wearable</a> applications)</td>
<td>Represents a scalar measurement within a known range (the distribution of the assigned range), or a fractional value.</td>
<td>
<pre class="prettyprint">
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-output-element" target="_blank">output</a></td>
+ <td><code>output</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-output-element" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-output-element" target="_blank">wearable</a> applications)</td>
<td>Represents the result of a calculation. The element generally shows the calculated result of the value that the user has entered, and is used within the <code>form</code> element.</td>
<td rowspan="1" colspan="1">
<pre class="prettyprint">
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-progress-element" target="_blank">progress</a></td>
+ <td><code>progress</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-progress-element" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-progress-element" target="_blank">wearable</a> applications)</td>
<td>Represents the progress of a task.
</td>
<td>
<th>Example</th>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#color-state" target="_blank">color</a></td>
+ <td><code>color</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#color-state-(type=color)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#color-state-(type=color)" target="_blank">wearable</a> applications)</td>
<td>Select an HSL color from the color picker. The value format is HEX (#0099ff).
</td>
<td rowspan="13">
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#date-state" target="_blank">date</a></td>
+ <td><code>date</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#date-state-(type=date)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#date-state-(type=date)" target="_blank">wearable</a> applications)</td>
<td>Enter a date with no time zone (yyyy-mm-dd).
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#date-and-time-state" target="_blank">datetime</a></td>
+ <td><code>datetime</code></td>
<td>Enter a date and time with the (UTC) time zone (yyyy-mm-ddTtt:mmZ).
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#local-date-and-time-state" target="_blank">datetime-local</a></td>
+ <td><code>datetime-local</code></td>
<td>Enter a date and time with no time zone (yyyy-mm-ddTtt:mm).
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#e-mail-state" target="_blank">email</a></td>
+ <td><code>email</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#e-mail-state-(type=email)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#e-mail-state-(type=email)" target="_blank">wearable</a> applications)</td>
<td>Enter an email address with the email keyboard.
<p>If the <code>required</code> attribute is used, the system checks whether the input format is in line with the ABNF regular expression (<code>1*(atext / ".") "@" ldh-str 1*("." ldh-str)</code>).</p>
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#month-state" target="_blank">month</a></td>
+ <td><code>month</code></td>
<td>Enter a year and month with no time zone (yyyy-mm).
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#number-state" target="_blank">number</a></td>
+ <td><code>number</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#number-state-(type=number)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#number-state-(type=number)" target="_blank">wearable</a> applications)</td>
<td>Enter numbers with the number keyboard.
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#range-state" target="_blank">range</a> </td>
+ <td><code>range</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#range-state-(type=range)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#range-state-(type=range)" target="_blank">wearable</a> applications)</td>
<td>Select a value from the slider.
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#text-state-and-search-state" target="_blank">search</a></td>
+ <td><code>search</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#text-(type=text)-state-and-search-state-(type=search)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#text-(type=text)-state-and-search-state-(type=search)" target="_blank">wearable</a> applications)</td>
<td>No specific functionality is defined for this element in the HTML5 specifications.
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#telephone-state" target="_blank">tel</a></td>
+ <td><code>tel</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#telephone-state-(type=tel)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#telephone-state-(type=tel)" target="_blank">wearable</a> applications)</td>
<td>Enter a phone number with the number keyboard.
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#time-state" target="_blank">time</a></td>
+ <td><code>time</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#time-state-(type=time)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#time-state-(type=time)" target="_blank">wearable</a> applications)</td>
<td>Enter a time with no time zone (tt:mm:ss).
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#url-state" target="_blank">url</a></td>
+ <td><code>url</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#url-state-(type=url)" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#url-state-(type=url)" target="_blank">wearable</a> applications)</td>
<td>Enter a URL with the URL keyboard.
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#week-state" target="_blank">week</a></td>
+ <td><code>week</code></td>
<td>Enter a year and week with no time zone (yyyy-week).
</td>
</tr>
<th>Example</th>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-autocomplete" target="_blank">autocomplete</a></td>
+ <td><code>autocomplete</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#autofilling-form-controls:-the-autocomplete-attribute" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#autofilling-form-controls:-the-autocomplete-attribute" target="_blank">wearable</a> applications)</td>
<td>Prefilling feature, which helps the users by, for example, prefilling the user's address based on earlier user input.
<p>The text used by the user before (such as an <code>input</code> element) is listed in a <code>datalist</code> form. The attribute can be used in all form elements, and is activated if the value is "on" and deactivated if the value is "off".</p>
</td>
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-min" target="_blank">min and max</a></td>
+ <td><code>min</code> and <code>max</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-min-and-max-attributes" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-min-and-max-attributes" target="_blank">wearable</a> applications)</td>
<td>Allowed range of values for the element.
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-pattern" target="_blank">pattern</a></td>
+ <td><code>pattern</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-pattern-attribute" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-pattern-attribute" target="_blank">wearable</a> applications)</td>
<td>Regular expression against which the control's value is checked.
<p>The attribute can be used to check the validity of the form data. During service, a guide requiring the input format from the user is necessary.</p>
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-placeholder" target="_blank">placeholder</a></td>
+ <td><code>placeholder</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-placeholder-attribute" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-placeholder-attribute" target="_blank">wearable</a> applications)</td>
<td>Short hint intended to aid the user with the data entry.
<p>The attribute can be used in the majority of form elements for various purposes, such as hint text or advertisement.</p>
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-required" target="_blank">required</a></td>
+ <td><code>required</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-required-attribute" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-required-attribute" target="_blank">wearable</a> applications)</td>
<td>Boolean attribute which, when specified, defines that the element is mandatory.
</td>
</tr>
<tr>
- <td><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-step" target="_blank">step</a></td>
+ <td><code>step</code> (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-step-attribute" target="_blank">mobile</a> and <a href="https://www.w3.org/TR/2014/CR-html5-20140429/forms.html#the-step-attribute" target="_blank">wearable</a> applications)</td>
<td>Granularity expected of the value, limiting the allowed values.
</td>
</tr>
<h2 id="resolution" name="resolution">Image Resolution Optimization</h2>
<p>In Web applications, optimization of applications for various platforms (regarding devices, OS, and resolution) is efficient.</p>
- <p><a href="media_query_w.htm">Media Queries</a> and <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/" target="blank">Flexible Box Layout</a> can be used to create flexible layouts, and to build the deployable package easily.</p>
+ <p><a href="media_query_w.htm">Media Queries</a> and <a href="flexible_w.htm">Flexible Box Layout</a> can be used to create flexible layouts, and to build the deployable package easily.</p>
<p>Images can be used in Web applications in the following ways:</p>
<ul><li><code>IMG</code> tag linking images directly to HTML</li>
<p>The main features of the Selectors API Level 1 and Level 2 include:</p>
<ul>
<li>Selecting a single element
-<p>Use
<a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS Selectors</a> to <a href="#single">select a single element</a>.</p></li>
+<p>Use
CSS selectors to <a href="#single">select a single element</a>.</p></li>
<li>Selecting multiple elements simultaneously
<p><a href="#multi">Select multiple elements</a> using the <code>querySelectorAll()</code> method.</p></li>
</ul>
<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>
<ol>
- <li>To select the first matching element found in the child nodes, use the <code>querySelector()</code> method with <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS selectors</a>. You get the same result as when using the <code>getElementById()</code>, <code>getElementsByTagName()</code>, and <code>getElementsByClassName()</code> methods.
+ <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">
/* First <td> element in the document */
var obj1 = document.getElementsByTagName('td')[0];
<h1>HTML5 Session History</h1>
- <p>You can manage the session history of browsing contexts. The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface is used to save in the session history the page information that has been read by the user. You can also use the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to directly store the page information which has already been analyzed in the URL, or general information which is not stored in the URL (such as location, or the scroll state of the page or a certain DOM element).</p>
+ <p>You can manage the session history of browsing contexts. The <code>history</code> interface (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#the-history-interface" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#the-history-interface" target="_blank">wearable</a> applications) is used to save in the session history the page information that has been read by the user. You can also use the <code>state</code> object (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#state-object" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#state-object" target="_blank">wearable</a> applications) to directly store the page information which has already been analyzed in the URL, or general information which is not stored in the URL (such as location, or the scroll state of the page or a certain DOM element).</p>
<p>This feature is supported in mobile and wearable applications only.</p>
<p>You can use the <code>pushState()</code> method of the <code>history</code> interface to <a href="#Managing_Session_History">add an entry to the session history</a>. With the <code>replaceState()</code> method, you can update the session history details.
</p></li>
<li>Detecting session history status changes
-<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event is fired when the user navigates to a page stored in the session history. The <code>popstate</code> event
+<p>The <code>popstate</code> event (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#event-popstate" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#event-popstate" target="_blank">wearable</a> applications) is fired when the user navigates to a page stored in the session history. The <code>popstate</code> event
references the information stored with the <code>pushState()</code> or <code>replaceState()</code> methods, and enables you to <a href="#Detecting_Session_History">change the status of the page based on the stored session history</a> (such as moving focus to a certain DOM element).</p>
</li>
</ul>
<p>Learning how to manage the session history enhances the user browsing experience in your application:</p>
<ol>
-<li>To add an entry to the session history, use the <code>pushState()</code> method of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface:
+<li>To add an entry to the session history, use the <code>pushState()</code> method of the <code>history</code> interface (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#the-history-interface" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#the-history-interface" target="_blank">wearable</a> applications):
<pre class="prettyprint">
<script>
history.pushState({index: currentIndex}, document.title);
<a href="http://tizen.org/">Tizen.org</a>
</pre>
</li>
-<li>When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object of the <code>history</code> interface:
+<li>When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the <code>state</code> object (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#state-object" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#state-object" target="_blank">wearable</a> applications) of the <code>history</code> interface:
<pre class="prettyprint">
var currentIndex = 0;
var prev = document.querySelector('.paging > a:nth-child(1)');
<p>Learning how to track session history changes enhances the user browsing experience in your application: </p>
-<ol><li>A page with data stored in the session history fires a <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event when the page is loaded (for example, because it is refreshed or moved to from the previous page).
+<ol><li>A page with data stored in the session history fires a <code>popstate</code> event (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#event-popstate" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#event-popstate" target="_blank">wearable</a> applications) when the page is loaded (for example, because it is refreshed or moved to from the previous page).
<p>Register the event listener:</p>
<pre class="prettyprint">
window.addEventListener("popstate", foo, false);
</pre></li>
-<li>Define the event handler for the event. You can use the data stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to retrieve the correct location on the page to be loaded.
+<li>Define the event handler for the event. You can use the data stored in the <code>state</code> object (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#state-object" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#state-object" target="_blank">wearable</a> applications) to retrieve the correct location on the page to be loaded.
<pre class="prettyprint">
var output = document.querySelector('output');
<div class="note">
<strong>Note</strong>
- For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2012/WD-css3-text-20121113/#appendix-h-full-property-index" target="_blank">Property index</a>.
+ For a complete list of CSS Text Module Level 3 text properties (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#text">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#text">wearable</a> applications) and their possible values, see the <a href="http://www.w3.org/TR/2013/WD-css-text-3-20131010/#property-index" target="_blank">Property index</a>.
</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<li><a href="font_w.htm">CSS Fonts Module (Level 3)</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to change the text fonts.</p></li>
- <li><a href="woff_w.htm">WOFF File Format (1.0)</a> <strong>in mobile and wearable applications only</strong>
+ <li><a href="woff_w.htm">WOFF File Format (1.0 and 2.0)</a> <strong>in mobile and wearable applications only</strong>
<p>Enables you to encode and decode font data easily.</p></li>
</ul>
</li>
<script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
- <title>WOFF File Format (1.0)</title>
+ <title>WOFF File Format (1.0 and 2.0)</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 1.0 API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#woff">WOFF File Format 2.0 API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#woff">WOFF File Format 1.0 API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>WOFF File Format (1.0)</h1>
+<h1>WOFF File Format (1.0 and 2.0)</h1>
<p>You can decode and restore font data easily.</p>
<p>This feature is supported in mobile and wearable applications only.</p>
-<p>The new text features in WOFF File Format 1.0 include:</p>
+<p>The new text features in WOFF File Format 2.0 (in mobile applications) and 1.0 (in wearable applications) include:</p>
<ul>
-<li>WOFF file format 1.0
-<p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/201
2/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><code>@font-face</code> rule</a> to display it identically with the input font. The <code>@font-face</code> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="#woff">use WOFF</a> within a Web page. </p></li>
+<li>Decoding and restoring font data
+<p>WOFF (Web Open Font Format) is a packaging format used to decode and restore font data according to the <a href="http://www.w3.org/TR/201
3/CR-css-fonts-3-20131003/#font-face-rule" target="_blank"><code>@font-face</code> rule</a> to display it identically with the input font. The <code>@font-face</code> rule is a CSS rule that allows linking to fonts and finding a suitable font to display if the original font is not available. You can <a href="#woff">use WOFF</a> within a Web page. </p></li>
</ul>
<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>
<ol>
-<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><code>@font-face</code> rules</a>. Within the rules, you can define the following properties:
+<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:
<ul>
<li><code>font-family</code>
<p>Defines a name for the font. This property is mandatory.</p></li>
<topic href="html/web/w3c/device/device_orientation_w.htm" label="DeviceOrientation Event Specification">
<topic href="html/web/w3c/device/task_compass_w.htm" label="Task: Compass"></topic>
</topic>
- <topic href="html/web/w3c/device/touch_w.htm" label="Touch Events version 1">
+ <topic href="html/web/w3c/device/touch_w.htm" label="Touch Events">
<topic href="html/web/w3c/device/task_touch_paint_mw.htm" label="Task: Touch Paint in Mobile Applications"></topic>
<topic href="html/web/w3c/device/task_touch_paint_ww.htm" label="Task: Touch Paint in Wearable Applications"></topic>
</topic>
<topic href="html/web/w3c/graphics/canvas_w.htm" label="HTML5 Canvas">
<topic href="html/web/w3c/graphics/task_basicwatch_w.htm" label="Task: Basic Watch"></topic>
</topic>
- <topic href="html/web/w3c/graphics/svg_w.htm" label="HTML5 SVG"></topic>
+ <topic href="html/web/w3c/graphics/svg_w.htm" label="SVG"></topic>
</topic>
<topic href="html/web/w3c/media/media_guide_w.htm" label="Media">
<topic href="html/web/w3c/media/getusermedia_w.htm" label="getUserMedia">
<topic href="html/web/w3c/communication/comm_guide_w.htm" label="Communication">
<topic href="html/web/w3c/communication/web_messaging_w.htm" label="HTML5 Web Messaging"></topic>
<topic href="html/web/w3c/communication/websocket_w.htm" label="WebSocket"></topic>
- <topic href="html/web/w3c/communication/xmlhttprequest_w.htm" label="XMLHttpRequest (Level 1 and 2)"></topic>
+ <topic href="html/web/w3c/communication/xmlhttprequest_w.htm" label="XMLHttpRequest"></topic>
<topic href="html/web/w3c/communication/server_sent_w.htm" label="Server-Sent Events"></topic>
</topic>
<topic href="html/web/w3c/storage/storage_guide_w.htm" label="Storage">
<topic href="html/web/w3c/ui/text_module_w.htm" label="CSS Text Module (Level 3)"></topic>
<topic href="html/web/w3c/ui/basic_ui_w.htm" label="CSS Basic User Interface Module (Level 3)"></topic>
<topic href="html/web/w3c/ui/font_w.htm" label="CSS Fonts Module (Level 3)"></topic>
- <topic href="html/web/w3c/ui/woff_w.htm" label="WOFF File Format (1.0)"></topic>
+ <topic href="html/web/w3c/ui/woff_w.htm" label="WOFF File Format (1.0 and 2.0)"></topic>
</topic>
</topic>
</topic>
</table>
<h2 id="elements" name="elements">Configuration Elements</h2>
- <p>The following tables summarize of the W3C configuration elements used in the <code>config.xml</code> file of the Web application. For more information on the W3C element details, see <a href="http
://www.w3.org/TR/widgets/" target="_blank">Packaging and XML Configuration</a> (the details of the Tizen extending configuration elements are described in <a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a> and <a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a>). For a quick view of the element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
+ <p>The following tables summarize of the W3C configuration elements used in the <code>config.xml</code> file of the Web application. For more information on the W3C element details, see <a href="http
s://www.w3.org/TR/2011/REC-widgets-20110927/" target="_blank">Widget Packaging and XML Configuration</a> (the details of the Tizen extending configuration elements are described in <a href="#mw_extend">Extending Configuration Elements in Mobile Applications</a> and <a href="#ww_extend">Extending Configuration Elements in Wearable Applications</a>). For a quick view of the element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
<table id="widget">
<tbody>
<h2 id="mw_extend" name="mw_extend">Extending Configuration Elements in Mobile Applications</h2>
- <p>The following sections show additional configuration elements used in the <code>config.xml</code> file of the Web application, but not included in the <a href="http
://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
+ <p>The following sections show additional configuration elements used in the <code>config.xml</code> file of the Web application, but not included in the <a href="http
s://www.w3.org/TR/2011/REC-widgets-20110927/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
<div class="note">
<strong>Note</strong>
</tbody></table>
<h2 id="ww_extend" name="ww_extend">Extending Configuration Elements in Wearable Applications</h2>
- <p>The following sections show additional configuration elements used in the <code>config.xml</code> file of the Web application, but not included in the <a href="http
://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
+ <p>The following sections show additional configuration elements used in the <code>config.xml</code> file of the Web application, but not included in the <a href="http
s://www.w3.org/TR/2011/REC-widgets-20110927/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. For a quick view of the entire element hierarchy, see <a href="#hierarchy">Configuration Element Hierarchy</a>.</p>
<div class="note">
<strong>Note</strong>
<ul>
<li>WebSocket API</li>
<li>Web messaging</li>
- <li>XMLHttpRequest Level 2</li>
+ <li>XMLHttpRequest</li>
<li>Cross-origin resource sharing (CORS)</li>
<li>Server-sent events</li>
</ul></li>
<h3 id="config" name="config">Web Package Configuration</h3>
<p>Each Web application package has a configuration file, <code>config.xml</code>, which indicates a packaging format and metadata for the application.</p>
- <p>The Tizen Web application must follow the guidelines of <a href="http
://www.w3.org/TR/widgets/" target="_blank">W3C Widget Packaging</a> and Tizen extended configuration (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_extend">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">wearable</a> applications).</p>
+ <p>The Tizen Web application must follow the guidelines of <a href="http
s://www.w3.org/TR/2011/REC-widgets-20110927/" target="_blank">W3C Widget Packaging and XML Configuration</a> and Tizen extended configuration (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_extend">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">wearable</a> applications).</p>
<p>For more information on the configuration elements, see <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#hierarchy">Configuration Element Hierarchy</a>.</p>
<h3 id="wap" name="wap">Web Application Package</h3>
</tr>
<tr>
<td><code>http://tizen.org/feature/network.internet</code></td>
- <td>Specify this key, if the application requires Internet access for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest
Level 1</a>, or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> API.</td>
+ <td>Specify this key, if the application requires Internet access for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest</a>, or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> API.</td>
<td>2.3.1</td>
</tr>
<tr>
<td>public</td>
<td></td>
<td>2.3</td>
- <td>The application can access the Internet using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest
Level 2</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches</a>, and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
+ <td>The application can access the Internet using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches</a>, and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
</tr>
<tr>
<td class="key">http://tizen.org/privilege/mediacapture</td>
<td>public</td>
<td></td>
<td>2.2.1</td>
- <td>The application can access the Internet using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest
Level 1</a>, and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
+ <td>The application can access the Internet using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest</a>, and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
</tr>
<tr>
<td class="key">http://tizen.org/privilege/mediacapture</td>
<h2 id="specification">Signature Specification</h2>
-<p>The application signing scheme of Tizen follows the specification of the <a href="http://www.w3.org/TR/widgets-digsig/" target="_blank">XML Digital signature for widget specified by W3C</a>.</p>
+<p>The application signing scheme of Tizen follows the specification of the <a href="http://www.w3.org/TR/2011/PR-widgets-digsig-20110811/" target="_blank">XML Digital Signatures for Widgets specified by W3C</a>.</p>
<p>The following figure shows the signature file structure.</p>
<li><p>Packaged Web applications</p></li>
<li><p>Hosted Web applications</p></li>
</ul>
- <p>All Web applications must be packaged according to <a href="http
://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. However, unlike packaged Web applications, the hosted Web applications have an externally hosted document as their starting page. For more information, see Extending Configuration Elements (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_extend">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">wearable</a> applications).</p>
+ <p>All Web applications must be packaged according to <a href="http
s://www.w3.org/TR/2011/REC-widgets-20110927/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. However, unlike packaged Web applications, the hosted Web applications have an externally hosted document as their starting page. For more information, see Extending Configuration Elements (in <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#mw_extend">mobile</a> and <a href="../../../../org.tizen.studio/html/web_tools/config_editor_w.htm#ww_extend">wearable</a> applications).</p>
<p>You can manage Web applications by:</p>
<ul>
- <li>Installing Web applications <p>To install a Web application, see the <a href="http
://www.w3.org/TR/widgets/#steps-for-processing-a-widget-package" target="_blank">guidelines for processing a Web application package</a>. After the installation is completed, the WRT sends a notification of the result.</p> <p>The Web Runtime also registers the Web application on the device's idle screen. It uses an icon and Web application name derived according to Web application packaging rules.</p>
+ <li>Installing Web applications <p>To install a Web application, see the <a href="http
s://www.w3.org/TR/2011/REC-widgets-20110927/#steps-for-processing-a-widget-package" target="_blank">guidelines for processing a Web application package</a>. After the installation is completed, the WRT sends a notification of the result.</p> <p>The Web Runtime also registers the Web application on the device's idle screen. It uses an icon and Web application name derived according to Web application packaging rules.</p>
<p>If a Web application installation fails due to power failure, the Web Runtime reinstalls it during next booting. The Web Runtime aborts the installation in the following situations:</p>
<ul>
</ul></li>
<li>Uninstalling Web applications <p>The WRT supports the uninstallation of Web applications. During the uninstallation process, all Web application data, such as preferences, local storage data, cookies, and the local storage folder, are removed.</p></li>
<li>Managing Web application life-cycle <p>The WRT supports W3C DOM load and unload, and the <a href="http://www.w3.org/TR/page-visibility/" target="_blank">Page Visibility</a> events for all pages.</p> <p>When a Web application is sent to the background or hidden, the JavaScript execution and rendering, including CSS animations, is suspended, unless the application is specifically configured to be a background service.</p> <p>When a Web application returns to the foreground, the JavaScript execution and rendering is resumed.</p> <p>The Web Runtime supports the following URI schemes: <code>sms://</code>, <code>mmsto://</code>, and <code>mailto://</code>. </p>
- <p>For each supported URI scheme, the Web Runtime launches a registered platform scheme handler with appropriate parameters.</p><p>The content localization is supported according to the <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and Configuration</a>.</p>
+ <p>For each supported URI scheme, the Web Runtime launches a registered platform scheme handler with appropriate parameters.</p><p>The content localization is supported according to the <a href="https://www.w3.org/TR/2011/REC-widgets-20110927/" target="_blank">Widget Packaging and XML Configuration</a>.</p>
</li>
</ul>
</ul>
<h3 id="signature" name="signature">Web Application Signature</h3>
- <p>The Web Runtime follows the <a href="http://www.w3.org/TR/widgets-digsig/" target="_blank">XML digital widget signature</a> process:</p>
+ <p>The Web Runtime follows the <a href="http://www.w3.org/TR/2011/PR-widgets-digsig-20110811/" target="_blank">XML digital widget signature</a> process:</p>
<ul>
<li>Web application can be signed by the author and distributors.</li>
<li>The first valid Tizen distributor signature, <code>signature1.xml</code>, determines the privilege level of the Web application, which is Public, Partner, or Platform.</li>
<p>The Web applications can mitigate various kinds of content injection vulnerabilities, such as cross-site scripting (XSS). The content security policy (CSP) is a declarative policy that lets the author or server administrator of a Web application inform the client from where the application expects to load resources. To mitigate XSS, for example, a Web application can declare from where it expects to load scripts, allowing the client to detect and block malicious scripts injected into the application by an attacker.</p>
<p>Web application configuration can include 1 or more <code><tizen:content-security-policy></code>, <code><tizen:content-security-policy-report-only></code>, or <code><tizen:allow-navigation></code> element. If these are included, the Web application is set to the <strong>CSP-based security mode</strong>.</p>
-<p>In the CSP-based security mode, the Web Runtime provides content security as per <strong>Content Security Policy 1.0</strong>. CSP policies can be delivered from the following sources:</p>
+<p>In the CSP-based security mode, the Web Runtime provides content security as per <strong>Content Security Policy Level 2</strong> (in mobile applications) and <strong>Content Security Policy 1.0</strong> (in wearable applications). CSP policies can be delivered from the following sources:</p>
<ul>
<li>Default policy (enforced by WRT, if required): <code>default-src *; script-src 'self'; style-src 'self'; object-src 'none';</code></li>
<li><code>config.xml</code>: <code><tizen:content-security-policy></code> or <code><tizen:content-security-policy-report-only></code>
</tr>
<tr>
<td><strong>content-security-policy</strong></td>
- <td>Used to define an additional content security policy for a packaged or hosted application. The policy string is defined according to <a href="http://www.w3.org/TR/CSP/" target="_blank">http://www.w3.org/TR/CSP/ (v1.0)</a>.
+ <td>Used to define an additional content security policy for a packaged or hosted application. The policy string is defined according to <a href="http://www.w3.org/TR/2015/CR-CSP2-20150721/" target="_blank">Content Security Policy Level 2</a> (in mobile applications) and <a href="http://www.w3.org/TR/2012/CR-CSP-20121115/" target="_blank">Content Security Policy 1.0</a> (in wearable applications).
</td>
</tr>
<tr>
<li>
<p>To define the application layout, use the <code>index.html</code> file.</p>
-<p>By default, the BasicWatch sample application layout contains only the main screen that displays the clock on a <a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" target="_blank">canvas</a> element.</p>
+<p>By default, the BasicWatch sample application layout contains only the main screen that displays the clock on a <a href="http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#the-canvas-element" target="_blank">canvas</a> element.</p>
<pre class="prettyprint lang-html">
<head>
projects / sdk / online-doc.git / commitdiff