Tizen Wearable Web Widget Specification
This document describes the complete list of features supported by the Widget engine.
Widget Specification
Contents | Description | Version (Since) | Wearable | Supported on Wearable Emulator |
---|---|---|---|---|
config.xml | This section describes how to configure config.xml to define necessary properties required by a Web widget. | 2.3.2 | Mandatory | Yes |
HTML | This section describes the complete list of supported HTML tags and attributes by the Web widget engine. | 2.3.2 | Mandatory | Yes |
DOM | This section describes the complete list of supported DOM APIs by the Web widget engine. | 2.3.2 | Mandatory | Yes |
CSS | This section describes the complete list of supported CSS properties by the Web widget engine. | 2.3.2 | Mandatory | Yes |
Selectors | This section describes the complete list of supported selectors by the Web widget engine. | 2.3.2 | Mandatory | Yes |
Additional Supported APIs | This section describes the complete list of additional APIs that are not mentioned above. | 2.3.2 | Mandatory | Yes |
Web Device API | This section describes Web device APIs supported by Widget Engine. | 2.3.2 | Mandatory | Yes |
Encoding Scheme
All files (i.e., .html, .css, and .js) are to be encoded in UTF-8. This is needed for supporting multilanguages. Widgets may not be displayed correctly especially when widgets contain non-ASCII characters when encodings other than UTF-8 are used.
config.xml
config.xml
is used to define all necessary properties required by a Web widget. It is mandatory to have a config.xml
for each Web widget. This section describes the complete list of supported elements with their usages when defining properties.
Element | Description | Occurrence | Allowed Child Elements | Attributes | |||
---|---|---|---|---|---|---|---|
Name | Required | Value | Description | ||||
<tizen:app-widget> | Defines the basic information about a Web widget | 0 or more |
<tizen:widget-label/> <tizen:widget-content/> |
id | required | String, which comprises 1 or more characters (0~9, a~z, A~Z) | Unique ID of the Web widget. The ID must be in <TIZEN_APPLICATION_ID>.<String> format |
primary | required | true | false | Defines a primary Web widget among Web widgets in a Web app | ||||
max-instance | optional | integer | Limits the number of widget instances concurrently executable for a Web app. Multi-instances is not supported in Tizen 2.3.2 for Wearable, so its value can only be 1 | ||||
<tizen:widget-label> | Defines the name of the Web widget | 1 or more | None | xml:lang | optional | String | Specifies the language of the box label (available values: the IANA Language Subtags) |
<tizen:widget-content> | Defines the starting page of the Web widget | 1 | <tizen:widget-size/> | src | required | String | Local file path, relative to the source Web app directory, of the Widget's starting page |
<tizen:widget-size> | Defines the size of the Web widget. Available value is 2x2 | 1 | None | preview | required | String | Image file path, relative to the source Web app directory, of the box content displayed in the Widget viewer |
<tizen:widget-metadata> | Defines a (key, value) pair that can be read by a Web widget via widget_service API. Its main use is to allow developers to define a constant to be read by a Web widget | 1 or more | None | key | required | String | Key of a constant |
value | required | String | Value of a constant |
HTML
This section describes the complete list of supported HTML tags and attributes by the Web widget engine.
Please note that only the tags and attributes mentioned explicitly in this section are supported. In addition, the Widget engine supports only HTML5 documents, and it assumes all input documents are HTML5 documents even if !DOCTYPE
is not explicitly specified.
HTML Tag | Attribute | Allowed Value | Usage | Note |
---|---|---|---|---|
Global Attributes | class | <string> | <element class="classname"> |
<css_styles> must conform to the widget engine's CSS rules |
dir | ltr | rtl | <element dir="ltr"> |
||
id | <string> | <element id="id"> |
||
style | <css_styles> | <element style="css_styles"> |
||
html | ||||
head | ||||
link | rel | stylesheet | <link rel="stylesheet"> |
<URL> must be a local path |
href | <URL> | <link href="local_path"> |
||
type | text/css | <link type="text/css"> |
||
meta | charset | UTF-8 | <meta charset="UTF-8"> |
name and content are used to set the widget background transparent only. To do so, both name and content must be set in the same meta tag |
name | tizen-widget-transparent-background | <meta name="tizen-widget-transparent-background" content="yes"> |
||
content | yes | no | <meta name="tizen-widget-transparent-background" content="yes"> |
||
style | type | text/css | <style type="text/css"> |
|
body | ||||
p | ||||
div | ||||
span | ||||
br | ||||
image | src | <URL> | <img src="local_path"> |
<URL> must be a local path. Supported images are of type .png , .jpg , and .bmp |
height | pixels | <img height="pixels"> |
||
width | pixels | <img width="pixels"> |
||
script | src | <URL> | <script src="local_path"> |
<URL> must be a local path |
type | text/javascript | <script type="text/javascript"> |
||
charset | UTF-8 | <script charset="UTF-8"> |
||
DOCTYPE | html | <!DOCTYPE html> |
The DOCTYPE declaration must be the first tag in your HTML document. The Web widget engine supports HTML5 only. Other versions of HTMLs and HTML modes (such as quirks mode) are not supported. |
This section describes the complete list of supported DOM interfaces by the Web widget engine. Please note that only the attributes and methods mentioned explicitly in this section are supported. DOM
Interface | Type | Name | Description |
---|---|---|---|
NonElementParentNode | method | getElementById(elementId) | Returns the first element within node's descendants whose ID is elementId |
ParentNode | attribute | children | Returns the child elements |
firstElementChild | Returns the first child that is an element, and null otherwise. | ||
lastElementChild | Returns the last child that is an element, and null otherwise. | ||
childElementCount | Returns the number of children of the context object that are elements | ||
NonDocumentTypeChildNode | attribute | previousElementSibling | Returns the first preceding sibling that is an element, and null otherwise. |
nextElementSibling | Returns the first following sibling that is an element, and null otherwise. | ||
ChildNode | method | remove() | Removes the node |
NodeList | method | item(index) (or collection[index]) | Returns the node with index index number from the collection. The nodes are sorted in tree order. |
attribute | length | Returns the number of elements in the collection. | |
HTMLCollection | attribute | length | Returns the number of elements in the collection. |
method | item(index) (or collection[index]) | Returns the element with index index number from the collection. The elements are sorted in tree order. | |
namedItem(name) (or collection[name]) | Returns the first element with ID or name name from the collection. | ||
HTMLCollection | attribute | nodeType | Returns the type of node. |
nodeName | Returns a string appropriate for the type of node. | ||
parentNode | Returns the parent. | ||
childNodes | Returns the children. | ||
firstChild | Returns the first child. | ||
lastChild | Returns the last child. | ||
previousSibling | Returns the previous sibling. | ||
nextSibling | Returns the next sibling. | ||
nodeValue | If node is Text, Comment or ProcessingInstruction, returns the context object's data. Otherwise returns Null. |
||
textContent | If node is Element, returns the concatenation of data of all the Text node descendants of the context object, in tree order. If node is Text or Comment, returns the context object's data. Otherwise returns Null. |
||
method | hasChildNodes | Returns whether node has children. | |
cloneNode(deep = false) | Returns a copy of node. If deep is true, the copy also includes the node's descendants. | ||
isEqualNode(other) | Returns whether node and other have the same properties. | ||
compareDocumentPosition(other) | Returns a bitmask indicating the position of other relative to node. | ||
contains(other) | Returns true if other is an inclusive descendant of node, and false otherwise. | ||
insertBefore(node, child) | Inserts Node before child. | ||
appendChild(node) | Adds node to the end of child list. | ||
replaceChild(node, child) | Replaces child to Node. | ||
removeChild(child) | Removes child. | ||
Document | attribute | compatMode | Returns the string "CSS1Compat". |
characterSet | Returns document's encoding type "UTF8". | ||
contentType | Returns document's content type "text/html". | ||
doctype | Returns the doctype or null if there is none. | ||
documentElement | Returns the document element. | ||
method | getElementsByTagName(localName) | If localName is "*" returns an HTMLCollection of all descendant elements.Otherwise, returns an HTMLCollection of all descendant elements whose local name is localName. | |
getElementsByClassName(classes) | Returns an HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classes. | ||
createElement(localName) | Returns an element in the HTML namespace with localName as local name. | ||
createTextNode(data) | Returns a Text node whose data is data. | ||
createComment(data) | Returns a Comment node whose data is data. | ||
DocumentType | attribute | name | Returns the name. |
Element | attribute | localName | Return the value of the attribute in element's attribute list whose namespace is namespace and local name is localName, if it has one, and null otherwise. |
tagName | If namespace prefix is not null, returns the concatenation of namespace prefix, ":", and local name. Otherwise it returns the local name. | ||
id | Reflects the "id" content attribute. | ||
className | Reflects the "class" content attribute. | ||
classList | Returns the associated DOMTokenList object representing the context object's classes. | ||
attributes | Returns a NamedNodeMap. | ||
clientLeft | Returns the width of the left border of an element in pixels. | ||
clientTop | Returns the width of the top border of an element in pixels. | ||
clientWidth | Returns the sum of contents width + padding width. Returns 0 if an element, or an ancestor of an element is set to display: none or display: inline . |
||
clientHeight | Returns the sum of contents height + padding height. Returns 0 if an element, or an ancestor of an element is set to display: none or display: inline . |
||
method | getAttribute(name) | Returns the value of the first attribute in the context object's attribute list whose name is name, and null otherwise. | |
setAttribute(name, value) | Changes the attribute whose name is name from context object to value. | ||
removeAttribute(name) | Removes the first attribute from the context object whose name is name, if any. | ||
hasAttribute(name) | Returns true if the context object has an attribute whose name is name, and false otherwise. | ||
getElementsByTagName(localName) | Returns the list of elements with local name localName for the context object. | ||
getElementsByClassName(classNames) | Returns the list of elements with class names classNames for the context object. | ||
Attr | attribute | name | Returns the name. |
value | Returns the value. | ||
specified | Always returns true | ||
CharacterData | attribute | data | Returns data, and on setting, must replace data with node context object offset 0, count length attribute value, and data new value. |
length | Returns the number of code units in data. | ||
Text | attribute | wholeText | Returns a concatenation of the data of the contiguous Text nodes of the context object, in tree order. |
Comment | Comment does not define neither attributes or methods | ||
DOMTokenList | attribute | length | Returns the number of tokens. |
method | item(index) (or tokenlist[index]) | Returns the token with the index index number. | |
contains(token) | Returns true if token is present, and false otherwise. | ||
add(tokens...) | Adds all arguments passed, except those already present. | ||
remove(tokens...) | Removes arguments passed, if they are present. | ||
toggle(token [, force]) | If force is not specified, "toggles" token, removing it if it is present and adding it if it is not. If force is true, adds token (same as add()). If force is false, removes token (same as remove()). Returns true if token is now present, and false otherwise. |
||
Window from HTML5 and CSSOM, and Named Access on the Window Object | attribute | window | Returns window. |
document | Returns the document associated with window. | ||
innerHeight | Returns the inner height of a window's content area. | ||
innerWidth | Returns the inner width of a window's content area. | ||
misc | window[id] | Named access on the Window object returns the indicated element, where id is a non-empty ID of an HTML element in the current document. | |
WindowTimers | method | setTimeout(handler [, timeout [, arguments... ]]) | Calls a function or evaluates an expression after a specified number of milliseconds. |
clearTimeout(handle) | Clears a timer set with setTimeout(). | ||
setInterval(handler [, timeout [, arguments...]]) | Calls a function or evaluates an expression at specified intervals (in milliseconds). | ||
clearInterval(handle) | Clears a timer set with setInterval(). |
Event
Interface | Type | Name | Description | Note |
---|---|---|---|---|
Global event handler attribute | attribute | onclick | The onclick event occurs when the user clicks on an element | Attributes that are common to all elements in the HTML language. |
onload | The onload event occurs when an object has been loaded | |||
DOM Event | constant | CAPTURING_PHASE | The current event phase is the capturing phase. | |
AT_TARGET | The event is currently being evaluated at the target EventTarget. | |||
BUBBLING_PHASE | The current event phase is the bubbling phase. | |||
NONE | Events not currently dispatched are in this phase. | |||
attribute | bubbles | Used to indicate whether or not an event is a bubbling event | ||
cancelable | Used to indicate whether or not an event can have its default action prevented | |||
currentTarget | Used to indicate the EventTarget whose EventListeners are currently being processed | |||
eventPhase | Used to indicate which phase of event flow is currently being evaluated. | |||
target | Used to indicate the EventTarget to which the event was originally dispatched. | |||
timeStamp | Returns the number of milliseconds (after midnight January 1, 1970), when the event occurred | |||
type | Name of the event type (case-insensitive). | |||
defaultPrevented | Checks whether the preventDefault() method was called for the event | |||
method | preventDefault() | If an event is cancelable, the preventDefault method is used to signify that the event is to be canceled | ||
stopPropagation() | Prevents further propagation of the current event in the bubbling phase | |||
stopImmediatePropagation() | Prevents other listeners of the same event from being called | |||
property | EventInit::bubbles | Initializes an Event object with bubbles | ||
EventInit::cancelable | Initializes an Event object with cancelable | |||
EventTarget | method | addEventListener(type, listener, useCapture) | Attaches an event handler to the specified element | |
removeEventListener(type, listener, useCapture) | Removes an event handler that has been attached with the addEventListener() method | |||
dispatchEvent(evt) | Allows the dispatch of events into the implementations event model | |||
EventListener | method | handleEvent(evt) | This method is called whenever an event occurs of the type for which the EventListener interface was registered. | |
ProgressEvent | attribute | lengthComputable | Progress has started | ProgressEvent is dispatched on XMLHttpRequest object. Events using the ProgressEvent interface indicate some kind of progression. |
loaded | In progress | |||
total | Progress failed | |||
property | ProgressEventInit::lengthComputable | Initialize a ProgressEvent object with lengthComputable | ||
ProgressEventInit::loaded | Initialize a ProgressEvent object with loaded | |||
ProgressEventInit::total | Initialize a ProgressEvent object with total |
CSS
Type | Property | Allowed Value | Description | Note |
---|---|---|---|---|
Margin | margin | <margin-width>{1,4} | The margin shorthand property sets all the margin properties in one declaration | The margin properties specify the width of the margin area of a box. <margin-width> may take one of the following values: <length>, <percentage>, auto. (Also check Length) |
margin-bottom | <length> | <percentage> | auto | Sets the bottom margin of an element | ||
margin-left | <length> | <percentage> | auto | Sets the left margin of an element | ||
margin-right | <length> | <percentage> | auto | Sets the right margin of an element | ||
margin-top | <length> | <percentage> | auto | Sets the top margin of an element | ||
Padding | padding | <padding-width>{1,4} | The padding shorthand property sets all the padding properties in one declaration | <padding-width> may take one of the following values: <length>, <percentage> |
padding-bottom | <length> | <percentage> | Sets the bottom padding for an element | ||
padding-left | <length> | <percentage> | Sets the left padding for an element | ||
padding-right | <length> | <percentage> | Sets the right padding for an element | ||
padding-top | <length> | <percentage> | Sets the top padding for an element | ||
Border | border | <border-width> <border-style> <border-color> | Sets all the border properties (shorthand). | The border can either be a predefined style (solid line) or it can be an image. In the former case, various properties define the style (<border-style>), color (<border-color>), and thickness (<border-width>) of the border. <border-width> may take one of the following values: thin, medium, thick, <length> |
border-top | <border-width> <border-style> <border-color> | Sets all the top border properties (shorthand). | ||
border-right | <border-width> <border-style> <border-color> | Sets all the right border properties (shorthand). | ||
border-bottom | <border-width> <border-style> <border-color> | Sets all the bottom border properties (shorthand). | ||
border-left | <border-width> <border-style> <border-color> | Sets all the left border properties (shorthand). | ||
border-color | <border-color>{1,4} | Sets the color of the four borders (shorthand). | ||
border-top-color | <color> | transparent | Sets the color of the top border. | ||
border-right-color | <color> | transparent | Sets the color of the right border. | ||
border-bottom-color | <color> | transparent | Sets the color of the bottom border. | ||
border-left-color | <color> | transparent | Sets the color of the left border. | ||
border-style | <border-style>{1,4} | Sets the style of the four borders (shorthand). | ||
border-top-style | none | solid | Sets the style of the top border. | ||
border-right-style | none | solid | Sets the style of the right border. | ||
border-bottom-style | none | solid | Sets the style of the bottom border. | ||
border-left-style | none | solid | Sets the style of the left border. | ||
border-width | <border-width> | Sets the width of the four borders (shorthand). | ||
border-top-width | medium | thin | thick | <length> | Sets the width of the top border. | ||
border-right-width | medium | thin | thick | <length> | Sets the width of the left border. | ||
border-bottom-width | medium | thin | thick | <length> | Sets the width of the bottom border. | ||
border-left-width | medium | thin | thick | <length> | Sets the width of the left border. | ||
border-image-source | <image> | none | The path to the image is to be used as a border | ||
border-image-slice | <number> && fill? | How to slice the border image. <number> value can take only one value and initial value is 0 (not 100%). |
||
border-image-width | <length> | <number> | Width of the border image. <number> value represents multiples of the corresponding border-top-width. |
||
Display | display | block | inline | inline-block | none | Displays elements as inline elements | The display property specifies the type of box used for an HTML element (Also check Visibility) |
visibility | visible | hidden | Specifies whether or not an element should be visible | ||
Position | position | static | absolute | relative | The position property specifies the type of positioning method used for an element. | Each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by box dimensions, type, positioning scheme, relationships between in the document tree and external information. *CSS |
top | <length> | <percentage> | auto | Sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. | ||
right | <length> | <percentage> | auto | Sets the right edge of an element to a unit above/below the right edge of its nearest positioned ancestor. | ||
bottom | <length> | <percentage> | auto | Sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. | ||
left | <length> | <percentage> | auto | Sets the left edge of an element to a unit above/below the left edge of its nearest positioned ancestor. | ||
z-index | auto | <integer> | Specifies the stack order of an element. | ||
direction* | ltr | Specifies the text direction/writing direction. | ||
width | <length> | <percentage> | auto | Sets the width of an element. | ||
height | <length> | <percentage> | auto | Sets the height of an element. | ||
vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | Sets the vertical alignment of an element. | ||
line-height | normal | <number> | <length> | <percentage> | Sets the line height. | ||
overflow | visible | hidden | Specifies what happens if content overflows an element's box. | ||
Color | color | <color> | Sets the color of text HSL color value is not supported |
CSS uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document. |
opacity | alpha value (0.0 ~ 1.0) | Sets the opacity level for an element | ||
Background | background | <background-color> <background-image> <background-repeat> | A shorthand property for setting all the background properties in one declaration | The background property sets all the background properties. (Also check Background) |
background-color | <color> | transparent | Specifies the background color of an element. | ||
background-image | <uri> | none | Specifies one or more background images for an element. Multiple layering is not supported. |
||
background-repeat | repeat | repeat-x | repeat-y | no-repeat | Sets how a background image will be repeated | ||
background-size | <length> | <percentage> | auto | cover | contain | Specifies the size of the background image(s). | ||
Font | font-style | normal | italic | oblique | Specifies the font style for text. | A font provides a resource containing the visual representation of characters. |
font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | Specifies the weight of a font. | ||
font-size | medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | <length> | <percentage> | Specifies the font size of text. | ||
Text | text-align | left | right | center | Specifies the horizontal alignment of text in an element | This CSS3 module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation. |
text-decoration | none | underline | line-through | Specifies the decoration added to the text | ||
Transform | transform | none | matrix | translate | translateX | translateY | scale | scaleX | scaleY | rotate | skew | skewX | skewY | Applies a 2D transformation to an element. | The transform property applies a 2D transformation to an element. This property allows you to rotate, scale, move and skew. A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element. |
transform-origin | <percentage> | <length> | top | right | bottom | left | center | Changes the position of transformed elements |
Selectors
Selectors | Type | Pattern | Usage | Description |
---|---|---|---|---|
Selectors | Universal Selector | * | * |
Selects all elements. |
Type Selector | element | p |
Selects all <p> elements The 'OR' condition is allowed (for example, element, element) |
|
Dynamic Pseudo Selector | element:active | p:active |
Selects the active element Support only :active pseudo-class |
|
Class Selector | element.class | div.intro |
Selects all <div> elements with class="intro" A subset matching of "class" values is not allowed (for example, div.class1.class2) |
|
ID Selector | element#id | div#firstname |
Selects an <div> element with id="firstname" |
Additional Supported APIs
XMLHttpRequest
XMLHttpRequest is a constructor object. It is created by a new
command, e.g., var xhr = new XMLHttpRequest();
In addition, two XHR objects are created and executed concurrently by the threadpool by default.
Interface | Type | Name | Description |
---|---|---|---|
XMLHttpRequestEventTarget | attribute | onloadstart | Function called when the request starts. Usage: onloadstart: function() {} |
onprogress | Function called when transmitting data. Usage: onprogress: function() {} |
||
onabort | Function called when the request has been aborted. For instance, by invoking the abort() method. Usage: onabort: function() {} |
||
onerror | Function called when the request has failed. Usage: onerror: function() {} |
||
onload | Function called when the request has successfully completed. Usage: onload: function() {} |
||
ontimeout | Function called when the author specified timeout has passed before the request completed. Usage: ontimeout: function() {} |
||
onloadend | Function called when the request has completed (either in success or failure). Usage: onloadend: function() {} |
||
XMLHttpRequest | attribute | onreadystatechange | The readyState attribute changes value, except when it changes to UNSENT. Usage: onreadystatechange: function() {} |
readyState* | Returns the current state, which is one of the readyState code shown below. | ||
timeout | Terminates fetching after the given time (in milliseconds) has passed. If the fetching has not completed after the time passed and the synchronous flag is unset, a timeout event will be dispatched. | ||
status | Returns 0 if the state is UNSENT or OPENED, or error flag is set. Otherwise returns the HTTP status code. | ||
responseType | Sets or returns the response type, which is either "" , "blob" , "json" , or "text" . |
||
response | Returns the response entity body, which is either string , Blob object, object , or string when responseType is "" , "blob" , "json" , or "text" , respectively. |
||
responseText | Returns an empty string if the state is not LOADING or DONE, or error flag is set. Returns the text response entity body when responseType is either "" or "text" . The allowed character set for response text is UTF-8. Otherwise returns an invalidStateError exception with either "Permission denied", "Position unavailable", or "Timeout expired". |
||
method | open(method, url [, async = true [, username = null [, password = null]]]) | Sets the request method, request URL, and synchronous flag. Supported request method : GET, POST |
|
send(data = null) | Initiates the request. The optional 'data' argument allows only UTF-8 encoded string type. The argument is ignored if request method is GET. | ||
abort() | Cancels any network activity. |
* The readyState code are as follows.
readyState Code | Description | Numeric Value |
---|---|---|
UNSENT | The object has been constructed. | 0 |
OPENED | The open() method has been successfully invoked. | 1 |
HEADERS_RECEIVED | All redirects (if any) have been followed and all HTTP headers of the final response have been received. | 2 |
LOADING | The response entity body is being received. | 3 |
DONE | The data transfer has been completed or something went wrong during the transfer (for example, infinite redirects). | 4 |
Blob
Blob object is used by an XMLHTTPRequest object to retrieve binary data. Supported binary data are the resources supported by the widget engine. When blob is used for other types of binary data, it is likely that the binary data is not recognized by the widget engine.
Interface | Type | Name | Description |
---|---|---|---|
Blob | attribute | size | Returns the size of the byte sequence in number of bytes. |
type | Returns a parsable MIME type. | ||
isClosed | Returns a boolean value that indicates whether the Blob is in the CLOSED readability state. | ||
method | slice(start = 0, end = size, contentType = "") | The slice() method returns a new Blob object with bytes ranging from the optional start parameter up to but not including the optional end parameter, and with a type attribute that is the value of the optional contentType parameter. | |
close() | The close() method closes a Blob. |
Page Visibility
Extensions to the Document Object: The document
object is extended by the following attributes.
Interface | Type | Name | Description |
---|---|---|---|
Document | attribute | hidden | Returns true if the Document contained by the top level browsing context (root window in the browser's viewport) is not visible at all. |
visibilityState | Returns one of the following strings: "hidden", or "visible" | ||
VisibilityChange Event | Event Handler | visibilitychange | Fire when the content of a tab has become visible or has been hidden. |
Timing Control for Script-based Animations
Extensions to the Window Object: The window
object is extended by the following methods.
Interface | Type | Name | Description |
---|---|---|---|
Window | method | requestAnimationFrame(callback) | Used to signal to the user agent that a script-based animation needs to be resampled. |
cancelAnimationFrame(handle) | Used to cancel a previously made request to schedule an animation frame update. |
Geolocation
Extensions to the Navigator Object: The navigator
is extended by the following attributes and methods.
Interface | Type | Name | Description |
---|---|---|---|
Navigator | attribute | geolocation | navigator.geolocation object is used to determine the location information associated with the hosting device. |
Geolocation | method | getCurrentPosition(successCallback, errorCallback, options) | Parameters are in following formats:successCallback : function(position) {} errorCallback :function (positionError) {} options : PositionOptions
|
PositionOptions | attribute | enableHighAccuracy | When enabled, use GPS only to improve the location accuracy. When disabled, use both GPS and WPS. Enabling it may result in slower response times or increased power consumption. Default: false |
timeout | The maximum length of time (expressed in milliseconds) that is allowed to pass from the call to getCurrentPosition() until the corresponding successCallback is invoked. The maximum allowed value is 120. Default: 120 | ||
maximumAge | Sets to return a cached position whose age is no greater than the specified time in milliseconds. If maximumAge is set to 0, a new position object is acquired immediately. Default: 0 | ||
Position | attribute | coords | The coords attribute contains a set of geographic coordinates together with their associated accuracy, as well as a set of other optional attributes such as altitude and speed. |
timestamp | The timestamp attribute represents the time when the Position object was acquired in milliseconds. | ||
Coordinates | attribute | latitude | The latitude attribute is a geographic coordinate specified in decimal degrees. |
longitude | The longitude attribute is a geographic coordinate specified in decimal degrees. | ||
altitude | The altitude attribute denotes the height of the position, specified in meters above the WGS84 ellipsoid. | ||
accuracy | The accuracy attribute denotes the accuracy level of the latitude and longitude coordinates. It is specified in meters, and is a non-negative real number. | ||
altitudeAccuracy | Not supported by the widget engine. Always returns null. | ||
heading | The heading attribute denotes the direction of travel of the hosting device and is specified in degrees, where 0° ≤ heading < 360°, counting clockwise relative to the true north. | ||
speed | The speed attribute denotes the magnitude of the horizontal component of the hosting device's current velocity and is specified in meters per second. The value of the speed attribute is a non-negative real number. | ||
PositionError | attribute | code* | Returns the appropriate position error code |
message | Returns an error message describing the details of the error encountered. |
Error Code | Description | Numeric Value |
---|---|---|
PERMISSION_DENIED | The location acquisition process failed because the widget does not have permission to use the Geolocation API. | 1 |
POSITION_UNAVAILABLE | The position of the device could not be determined. | 2 |
TIMEOUT | The length of time specified by the timeout property has elapsed before successfully acquiring a new Position object. | 3 |
Web Device API
The following describes Web device APIs supported by Widget Engine. Supported interfaces and methods are generally the same as the interfaces and methods supported by Tizen API, respectively. If there are exceptions, they are explicitly mentioned below.
API | Description |
---|---|
Application | This API allows a widget to launch and access installed applications. Note that launching other Web widgets installed on the same device is deprecated from Tizen 3.0, so such use is not recommended. Unsupported methods: - ApplicationManager: Application getCurrentApplication() - Application: void exit() - Application: void hide() - Application: RequestedApplicationControl getRequestedAppControl() |
Preference | This API allows to store and retrieve a (key, value) pair to set application preferences. |
Sensor | This API provides interfaces and methods for getting sensor data from the various device sensors. |
System Information | This API provides information about the device's display, network, storage and other capabilities. Unsupported feature: Getting 'LOCALE' value using addPropertyValueChangeListener() is not supported. Because when 'LOCALE' is changed, web widget will be restarted so it is not possible to get 'LOCALE' at runtime. |
SAP * | The Samsung Accessory Protocol (SAP) APIs offers services that enable mobile devices to establish connections and exchange data with web widget applications. |
Widgetservice | This API provides information about installed widgets. Unsupported methods: - WidgetInstance: void changeUpdatePeriod() - WidgetInstance: void sendContent() - WidgetInstance: void getContent() Important Notice - The WidgetInstanceId in interface WidgetInstance is not persistent, i.e., each widget instance is assigned a new WidgetInstance.id at every reboot of a wearable device. Therefore, it cannot be used to identify a widget instance existed before rebooting a device. |
* The SAP (Samsung Accessory Protocol) is a Samsung device API.