Opera Widgets SDK
From Opera DevWiki
| The author or licensor is Opera Software. The original source is Opera Widgets SDK - Dev.Opera. |
    | This contents is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License |
|
[edit] 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.
As well as using any of the resources below, you can also visit the Opera Widgets forum to get help.
 |
 |
Figure 1: Widgets for handheld devices.
[edit] 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 Opera.
[edit] 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 will teach you the basics of creating Opera Widgets 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.
- Packing 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.
[edit] Opera Widgets for Desktop
Widgets are installed, run and uninstalled on your desktop computers just like any native desktop application, for example you'll find them in your Start menu on Windows. 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.
- Opera Widgets runtime for Desktop
- This article explores the new features and functionality in the Opera Widgets Runtime for Desktop.
- Opera Widgets Style Guide
- Style guide for widget development, outlining some of the key points to help you make the most of this technology by either developing new widgets or updating existing ones.
[edit] Opera Widgets Manager for Mobile
The Opera Widgets Manager is a standalone application 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 developer versions of the Mobile Widgets Manager available from Opera Labs:
- Opera Widgets Manager for Windows Mobile
- Opera Widgets Manager for Symbian Series 60
 |
 |
Figure 2: The Opera Widgets manager application on different platforms
The Opera Widgets Manager application Read more about the Opera Widgets Manager.
[edit] Documentation
This section consists of various sources of documentation, including the official Opera Widgets specification and the Opera Widgets Core DOM Reference, and information on how to make widgets display in different modes (eg Application mode), 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.
[edit] 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.
 |
Perfecto Mobile and Opera have partnered in order to help you to easily test your widgets and websites on real mobile devices. As a widget developer, you now get 7 hours of remote access to the Perfecto Mobile Opera handset cloud free of charge, allowing you to test your widgets on a variety of mobile devices from the comfort of your Web browser. |
[edit] Resources
[edit] 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.
[edit] 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.
[edit] 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.
[edit] 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. 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.
