# Opera Widgets Software Development Kit

## 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.

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.

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.

## New in version 0.4

- Updated the Opera Widgets specification to the 4th edition, adding the new security model and the feature element.
- Updated the security model article to reflect the security model in Opera 10, and how to make widgets backwards and forwards compatible.
- Added complete widgets as widget examples.
- Documented the `widgetfile` element and the `resolution` event properly.

See the README file in the package for details on previous versions.

## Prerequisites

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. They will teach you the basics of creating them and how to package and distribute them, as well as providing 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 application

The Opera Widget manager is a standalone applications allowing you to organize and run widgets independently of the browser. The manager integrates with Opera’s distribution channel for widgets – widgets.opera.com – and responds to files having a .wgt extension.

There are two versions of the Widget manager application available inside the Opera Widgets SDK (in the util/manager/ folder):
* Opera Widget manager for Windows Mobile (Download)
* Opera Widget manager developer version for S60 platform (Download)

Figure 2: The Opera Widget manager application on different platforms

Read more about the Opera Widget manager.

## 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, fourth edition
  Specification detailing the differences between a traditional web document and a widget.
Opera Widgets API reference
  This resource covers the Opera Widgets core DOM reference. These describe how to use the JavaScript APIs available to widgets.
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.
Widget icon tutorial
  This article will teach you how to make widget icons that can be used on different devices.
Remote debugging of widgets on device
  This article explains how to set up Widget managers on S60 and Windows Mobile for debugging widgets using Opera Dragonfly.

## Resources

### 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.
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. You’ll find the library files in the lib folder in the SDK package. 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.

### Assets

Opera Software provides assets, for example graphics that can be used for widgets.

Widget icon templates
  These Photoshop templates can be used as a basis for making widget icons. The templates are featured in the article with the same subject. See the resources/widget-icon-templates/ folder in the SDK package or download them from dev.opera.com.

## 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.