Dev.Opera - Follow the standards, break the rulesDev.Opera - Follow the standards, break the rules

Login

Lost password?

Opera Widgets SDK

By Opera Software · 21 May, 2008

Published in: , , ,

Korean

Table of contents

  1. Introduction
  2. New in version 0.4
  3. Prerequisites
  4. Getting started
  5. The Opera Widget manager application
  6. Documentation
  7. Mobile and cross-device development
  8. Resources
    1. Tools
    2. Libraries
    3. Assets
  9. Working with Web technologies
  10. Web sites

The Opera Widgets SDK has been updated to version 0.4 with added examples and new features. Download the Widgets SDK version 0.4 (ZIP file, 14.1MB).

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.

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 to get up to speed on the main features and learn how to create a basic widget.

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

Screenshot of the ARCHOS Calendar widget Screenshot of a UIQ weather widget Screenshot of a S60 bubbles widget Screenshot of a WM Twitter widget

Figure 1: Widgets for handheld devices.

New in version 0.4

In version 0.4 of the Opera Widgets SDK we have:

See the README file in the SDK download package.

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

To get you 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.

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.

The Opera Widget runtime for Desktop

From 10.2 and onward, widgets can be installed, run and removed independently of the Opera Desktop browser, promoting them to first-class applications. Widgets are installed with start menu and desktop shortcuts and can be removed from the list of installed applications. Widgets in the runtime support application mode, which gives them a window with native chrome, making them look more like native applications.

Note that widgets running in the runtime need to be remotely debugged.

Read more about the Desktop Widget runtime

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 with 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
  • Opera Widget manager developer version for S60 platform
Screenshot of a application screen on S60 Screenshot of the Widget manager on WM

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 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 Widgets Core DOM reference section, downloads, and licensing information.
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.
Widget control buttons
This article explains how to use widget control buttons which fade into view when a widget is hovered on desktop.

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.
Mobile characteristics
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 development process advice
Here you will find some general tips on mobile 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 Opera Widget graphics for mobile and devices
This article gives several tips on optimizing Widgets graphics for use on mobile and devices.
Custom Opera Widget icon tutorial
This tutorial shows how to create effective sets of widget icons that will work across devices with varying resolutions.
Remote debugging of widgets on mobile devices
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.
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.)
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.

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.

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, and are featured in the Widget icon tutorial. To get hold of the icon templates, 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 education site - here you will find documentation, tutorials and expert advice, as well as forums for discussing topics with fellow web developers.

Article categories