Widget Interface support in Opera Presto 2.12

W3C references
The Widget Interface

This specification defines an application programming interface that enables the ability to:

Opera Presto's support for the Widget Interface is described in the following sections.

WindowWidget Interface

Support: Yes

For a widget instance, a user agent must expose a unique object that implements the widget interface to author scripts. User agents implementing HTML5's Window interface must implement the Widget interface as the widget attribute of the window object in the manner defined by the WindowWidget interface.

Widget Interface

Most of the attributes of the widget interface correspond to the metadata derived from the initialization process. An object that implements the Widget interface exposes the following attributes:

For your reference, attributes in the following sections are hyperlinked to their place in the online W3C Widget Interface document.

Metadata attribute values

Attribute Value Localizable string Support
author author name Yes Yes
version widget version Yes Yes
shortName widget short name Yes Yes
name widget name Yes Yes
description widget description Yes Yes
authorEmail author email No Yes
authorHref author href No Yes
id widget id No Yes

Widget interface attributes

Attribute Value Description Support
width CSS pixels Upon getting the width attribute, a user agent must return a number that represents the width of the widget instance's viewport in CSS pixels. Yes
height CSS pixels Upon getting the height attribute, a user agent must return a number that represents the height of the widget instance's viewport in CSS pixels. Yes
preferences
  • name
  • value
  • readonly
 The preferences attribute allows authors to manipulate a storage area that is unique for the instance of a widget. It does this by implementing the Storage interface specified in WebStorage. Yes

Example

<!doctype html>
<title>About this Widget</title>
<style>
html {
  padding: 20px;
}

#aboutBox{
  padding: 20px;
  box-shadow: 2px 2px 10px #444;
  border-radius: 15px;
  background-color: #ECEDCF;
  text-align:center;
}
</style>

<body onload="makeAboutBox()">
<div id="aboutBox">
<h1><a id="storeLink"><img src="icon.png" id="icon"></a></h1>
<h1 id="name">Name</h1>
<p id="version">Version: </p>
<hr>
<p id="description">...</p>
<hr>
<p id="author">by: </p>
</div>
<script>
  // example that generates an about box
  // using metadata from a widget's configuration document.
  function makeAboutBox(){
  var storeLink = document.getElementById("storeLink");
  storeLink     = storeLink.setAttribute("href", widget.id);

  var icon     = document.getElementById("icon");
  icon.setAttribute("alt", widget.shortName);
  var title    = document.getElementById("name");
  title.innerHTML = widget.name;

  var version       = document.getElementById("version");
  var prodKey       = widget.preferences["productKey"];
  version.innerHTML += widget.version +
" (" + prodKey + ")";
  var description   = document.getElementById("description");
  description.innerHTML = widget.description;

  var author = document.getElementById("author");
  author.innerHTML += widget.author;
  }
</script>

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.