Opera Widgets on devices

Opera Widgets allows developers to make Web applications for devices quickly and easily.

  1. Introduction to Opera Widgets
    1. Built using standard Web technologies
    2. Cross-platform and cross-device
    3. Chromeless windows and device integration
    4. Widget security model and cross-site AJAX
    5. Widgets preference storage
    6. Moving and resizing widgets
    7. Distributing widgets on widgets.opera.com
  2. Contents of a widget
  3. Example widgets
    1. Calendar
    2. Feed reader
  4. How to use a widget in CDK
    1. Running widgets and persistent data
    2. Widgets and GOGI windows
    3. Example
  5. Known issues
  6. Resources

Introduction to Opera Widgets

Opera Widgets are small and useful Web applications implemented in Web technologies, which generally run in chromeless windows separate from other windows in the browser.

Built using standard Web technologies

Widgets use the same tried-and-tested technologies and standards as Web pages, including HTML, CSS, JavaScript, SVG, AJAX and so on. This means that authors familiar with Web pages already can start making widgets immediately, without needing any additional knowledge of special languages or frameworks.

Cross-platform and cross-device

Widgets are run using the core technology that forms the basis of the Opera browser, meaning they work on any platform supported by the browser, such as Windows, Linux and Mac. The core technology is also the same for all devices, which means that a widget should look and behave in the same way on different devices. Widgets gain access to a special JavaScript object widget, which supplies functionality that is not available in Web pages.

Chromeless windows and device integration

Widgets are displayed without any chrome, that is, without any close and minimize buttons, resize controls or window borders. Widgets are transparent by default, which means that widgets can run either in separate, chromeless windows, or cover the entire screen, which is useful on devices with smaller screens. Authors can, therefore, make exciting and useful application layouts to suit a wide variety of needs.

Widget security model and cross site AJAX

Web pages are usually restricted to only downloading data from the server from which they are served. Widgets allow download of data from multiple servers. This can be used to combine data from several public APIs, such as Flickr, Google and so on, into applications, which provides added value for the user. The security model is whitelist-based, where the widget can initially connect to any server. This can be limited by specifying protocols, hosts, paths and ports in the widget configuration file. See the Opera Widgets Specification for details on the security model and how to control the access.

Widgets preference storage

Each widget can store preferences on the disk of the device, which can be retrieved later. This can include user preferences, cached data and so on. Use the preferenceForKey() and setPreference() methods on the widget object.

Moving and resizing widgets

Widgets can be moved around on the screen and resized using the following special JavaScript functions on the widget object: resize(), resizeTo(), moveTo(), moveBy().

Distributing widgets on widgets.opera.com

The widgets.opera.com Web site works as a central distribution channel. Widgets can be uploaded and approved for specific platforms and devices so that they are only visible for these platforms. Users can browse the Web site and download widgets they find interesting or useful.

Contents of a widget

The following is the structure of a typical widget:

Of these, only config.xml and index.html are mandatory. See the Opera Widgets Specification for details on the format of the config.xml file.

Widgets are packaged using the zip format, either with a .zip or .wgt extension. When a Web server serves the widget to Opera, it should do so with the MIME type application/x-opera-widgets. The CDK does not have any support for handling these files directly from the Web server, so the integration should save them in the directory $OPERA_WIDGETS. They can then be started from the disk through the CDK.

How to use a widget in CDK

A widget acts almost like any other window in the CDK; it can be moved around, shown, hidden and so on. The basic functionality is the same as for widgets in Opera Desktop.

Running widgets and persistent data

A widget is launched using the CDK's "Widgets" menu. If the user has run the widget before (and has not uninstalled it since then), Opera automatically loads any persistent data for the widget, except the position of the widget on the screen. As an example, a game widget might save a high score, which will be loaded again when the user launches the widget. Opera identifies a widget by its handle. If the user moves a widget from one directory to another between runs, it will not keep its state, as it will have a different handle and therefore Opera will not recognize that it is the same widget.

You can have several copies of the same widget running at the same time. Any data saved by those widgets will not be synchronized between the running instances and is only saved for each, individual widget. Data is only loaded or saved when widgets are launched or closed.

Widgets and windows

A widget is also a window, which means that you can do many of the things with a widget that you can with a window. You can move a widget around and get its size and position. You can show and hide it, and also raise and lower it to the top or bottom of the window stack. However, you cannot resize it using the widget functions, as a widget is a fixed size entity.

Example

Before a widget can be opened, it needs to be located on the local file system in the $OPERA_WIDGETS. folder.

The .wgt (or .zip) file contains an assortment of files, for example, the config.xml, which is the main file. This file describes the widget, what version it is, who created it, how big it is and so on. The .wgt file also contains any HTML files, images, CSS files and JavaScript files used by the widget.

Known issues

File restriction

Widgets are generally restricted to opening files in the widget itself, and may occasionally read other files as defined in the DOM file API, if access has been granted to this.

Resources