Table of contents

1. Introduction
2. Getting started
3. Documentation
4. Mobile and cross device development
5. Tools
6. Libraries
7. Working with web technologies
8. 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.

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.

As well as using any of the resources below, you can also visit the Opera Widgets forum to get help.

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. Figure 1 shows some examples of Opera Widgets created for handheld devices.

Figure 1: Widgets for handheld devices.

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.

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: 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 PNG Graphics for Devices

This blog post gives some useful hints on optimizing PNGs for 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. Support for remote debugging with mobile phones is planned.

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.

Event Streaming to Web Browsers

This post shows how to implement Server Sent Events.

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 education site - here you will find documentation, tutorials and expert advice, as well as forums for discussing topics with fellow web developers.