Opera logo


Opera Widgets Software Development Kit

  1. Introduction
  2. Prequisites
  3. Getting started
  4. The Opera Widget Manager for S60
  5. Documentation
  6. Mobile and cross device development
  7. Tools
  8. Libraries
  9. Working with web technologies
  10. Web sites

Introduction

Opera Widgets are cross platform and cross device applications made with web technologies, therefore you can develop Opera Widgets quickly and easily and deploy them to different devices with a minimum amount of adaptation. Figure 1 shows some examples of Opera Widgets created for handheld devices.

Screenshot of the ARCHOS Calendar widget Screenshot of a UIQ weather widget

Figure 1: Widgets for handheld devices.

The Opera Widgets Software Development Kit (SDK) is made up of tools, libraries, documentation and examples on how to make Opera Widgets for different devices. This article will point you to different resources available to help create Opera Widgets. You can also watch a full widgets SDK guided tour video by clicking the image link below.

Opera Widgets SDK guided tour

To get started quickly with widget development, we have provided a fast track guide to help you get up to speed with widget development quickly; you can also visit the Opera Widgets forum to get help.

Prequisites

As a prerequisite to developing Opera Widgets and making use of these resources, it is assumed that you already know how to develop web pages using HTML, CSS, DOM, JavaScript and other web technologies supported by the Opera 9 platform.

Getting started

The Opera widget runtime is based on the Opera browser, therefore all the standard web technologies supported by the browser are available for widget developers. Opera widgets are distributed as zip archives and downloaded and run locally on the user’s computer or device.

The documents in this section are intended for beginners to the world of making Opera widgets, and will teach you the basics of creating them and how to package and distribute them, and provide some hints and tips on making resources more consistent, and some graphical and code resources to help speed up Opera Widget development.

Creating your first widget
An introduction to making widgets for the Opera Desktop browser; this is also a useful starting point for anyone wanting to make mobile widgets.
Packaging and deploying your widget
The distribution format is zip files with a file name ending in .wgt and a preliminary MIME type of application/x-opera-widgets.
Opera Widgets Style Guide
Hints on how to make widgets more graphically consistent. This version of the document has a focus on Desktop widgets.
Opera Widgets Resources
Graphics and code to help speed up the development of Opera Widgets.

The Opera Widget Manager for S60

The Opera Widgets SDK is accompanied by an Opera Widget manager for S60. Opera Widgets bring Web Applications to S60 at the touch of a button. These applications, written based on the Opera Widgets specification that is part of this SDK, work on several devices and platforms including Windows, Linux, Mac, S60, UIQ and Windows Mobile.

The Widget Manager for S60 does not include the Opera Browser component. This build is for developers to test and build Opera Widgets even before our product hits the market. We are proud to present a product that works well on multiple platforms, thus fullfilling Opera's vision - to deliver the best Internet experience on any device.

To install and run Opera Widgets:

  1. Download the Opera Widget manager installation file
  2. Send the file to your device
  3. Run the installation file on your device

If you do not have access to a bluetooth device, you can also visit this page using your Mobile Browser, and download the installation file directly to your device.

To run widgets using the Opera Widget manager on your device:

  1. Visit http://widgets.opera.com
  2. Download any widget from the website

If you would like to create and run a widget on the device, you can:

  1. Create the widget, and test it in the widget emulator
  2. Send it to your device, making sure its extension is ".wgt"
  3. Double click on your file, or simply open, to view your widget in action

If you dont have an S60 device and would like to try out the Opera Widget Manager on your device, you can download the Widget Manager for Windows Mobile and UIQ from here:
http://www.opera.com/products/mobile/

Documentation

This section consists of various sources of documentation, including the official Opera Widgets specification, the Opera Widgets Core DOM Reference, and information on how to make widgets display in different modes (eg docked and full screen), how to connect a widget to multiple servers, how to store widget data using the Opera Widgets Preference Store, and the Opera Widgets security model.

Opera Widgets Specification 1.0, third edition
Specification detailing the differences between a traditional web document and a widget.
Opera Widgets Core DOM reference
This resource covers what is available in the Widgets core DOM API for JavaScript to manipulate Opera Widgets - it includes an overview, a JavaDoc-style reference section, downloads, and licensing information.
Opera Widgets support notes
An overview of what Opera Widgets functionality is supported on different platforms.
Widget modes : Docked, widget and more
Widgets may be requested by the Widget runtime to display in more than one mode, eg full screen or docked.
Opera Widgets and Ajax: Connecting to multiple servers
This article explains how to use Ajax to create mashup Widgets.
Opera Widgets Preference Store
This allows you to save key/value pairs and make them available after your widget restarts.
Opera Widgets Security Model
This document explains the security model in operation inside Opera Widgets.

Mobile and cross device development

Opera Software has a goal of One Web, where anyone can access the same information regardless of device/platform. Opera Widget technology is designed to work across mobile phones, TVs, desktop computers, games consoles, and any other device that can access the web. This section contains articles that discuss specific issues regarding getting widgets to work across different devices.

Opera Widgets as cross platform applications.
This is an introduction to some basic issues related to making cross platform widgets.
Characteristics of widgets on mobile phones
This article discusses what kind of characteristics mobiles have, and how they affect development.
Cross device development techniques for widgets
Techniques for designing mobile applications and improving performance.
Mobile widget development process advice
Here you will find some general tips on mobile widget development.
Adding a docked mode to your widget
This articles will teach you how to add a docked or micro widget mode to your widgets.
Optimizing widget graphics for mobile and devices
This article teaches you how to optimize and use graphics effectively on mobiles and devices.

Tools

Opera Sofware supplies several tools and that can help with widget development.

Widget Emulator
Emulate how a widget appears on different devices, including devices with low bandwidth.
Opera Dragonfly
Opera Software's Developer tools for debugging JavaScript and inspecting CSS and the HTML DOM. Remote debugging of devices is also supported.
Debugging widgets using Opera Dragonfly and the Widget Emulator
Article showing how to use Opera Dragonfly and the Widget Emulator together to effectively debug widgets.
DOM Inspector
An inspector for showing the current state of the DOM, which changes dynamically as the DOM is modified by Ajax and JavaScript. This is an older tool than Dragonfly, but we have still included here for the benefit of those developers using older versions of Opera that don't support Dragonfly (pre-9.5 beta 2.)

Libraries

Opera Software has created several JavaScript libraries to help make development easier – below are some of the most relevant ones to widget creation. Visit the Libraries section on dev.opera.com for more.

Animation
Tutorial for the Opera Animation Library. Add effects and eye candy to your widgets.
Test Media query
A library function for testing media queries in JavaScript. Can be used to detect the media type of the current device.

Working with web technologies

Opera Widgets use the same core as the Opera browser, which means all web technologies used for web pages can also be used for widgets. This includes HTML5, SVG, Canvas, XHTML+Voice, XSLT and so on.

Give your widgets a voice: Widgets and XHTML+Voice
This article details how to use XHTML+Voice in your widgets.
Scalable Server Sent Events
This blog post explains how to make HTML 5 server-sent events scalable, and therefore ideal for use within widgets.

See dev.opera.com for many more articles on using web standards.

Web sites

This section contains web sites that will be useful to you when making widgets.

widgets.opera.com
Publish your widgets on Opera's widget repository to make them available to end users. Anyone can upload widgets, but Opera Software tests all of them before they are made available to end users.
Opera Widgets Forums
The place to discuss Opera Widgets in the Opera Community forums.
Opera XML Store home page
Experimental! The Opera XML Store provides general purpose server-side storage of data. You can define data access permissions for users and user groups, and the store can be used from your widgets.
dev.opera.com
Opera's web developer community site - here you will find documentation, tutorials and expert advice, as well as forums for discussing topics with fellow web developers.