# Using the Opera Widgets SDK – fast track guide

## Introduction

Opera Widgets are cross platform applications made with web technologies such as HTML, CSS and JavaScript, and therefore represent a great way to rapidly create and deploy applications across different devices – for example, you can run Opera Widgets equaly well across Opera browsers on any desktop computer, mobile devices, and games consoles.

The Opera Widgets Software Development Kit (SDK) helps you to do this by providing tools, libraries, documentation and examples, but it can be a bit daunting to use if you are new to Widget development. We have therefore created this fast track guide to help you get up to speed quickly. The main resource index is available at the Opera widgets SDK homepage. This guide will link to some of the same resources you will find there, but do it in a more structured way for the benefit of those less experienced in using the SDK.

You can also get help in the Opera Widgets forum.

## Prequisite knowledge

Since Opera Widgets are built using standard web technologies, it is assumed that you already know how to develop web pages using HTML, CSS, DOM, or JavaScript. You can also use other web technologies supported by the Opera 9 platform within your widgets, but they are not, mandatory for getting an Opera Widget up and running.

You should also know that Opera widgets are distributed as ZIP archives (with a .wgt file extension, and MIME type of application/x-opera-widgets) and run using an instance of an Opera browser. Widgets are supported by Opera desktop for Mac, PC and Linux), Opera Mini, Opera Mobile, and Opera for the Nintendo Wii. You can find lots of examples of Opera Widgets at the Opera Widget homepage, which can also be accessed by selecting “Widgets > Add Widgets” from the main Opera Desktop Menu. Try a few out to get familiar with the way they work!

## Getting started

Creating a widget is a little bit different to creating a normal web page, but you’ll soon get used to it; the basics are all explained in Creating your first widget.

Once you have created a widget, you’ll want to package it up and deploy it, so tht others can download and make use of it. This is covered in Packaging and deploying your widget.

You can find graphics and code resources to help speed up Opera Widget development at our Opera Widgets resources page. And for the designers among you, we also provide an Opera Widget style guide to give you pointers on how to make widgets more graphically consistent.

## JavaScript for widgets

There are many resources available for those of you looking to add interactivity to your Opera Widgets using JavaScript. For a start, Opera Widgets have some specialised functions available to them through the Core DOM API – check this out at the Opera Widgets Core DOM reference.

Opera Software also provides many JavaScript libraries to help make development easier – the most relevant ones for Widget development are the Animation library, which makes adding JavaScript animations to your Opera Widgets easier, and the Test Media query library, which is used to detect the media type of the current device, and then optimize content appropriately.

## Debugging your widgets

The beauty of Opera Widgets is that because they are build using standard web technologies, they can be debugged in pretty much the the same way. For a start, you can Debug your widget’s DOM, CSS and JavaScript using Opera Dragonfly. To examine your widget using Opera Dragonfly, make sure it is open in your Opera desktop browser, then select “Tools > Advanced > Developer Tools” – you will be able to select your widget’s index.html file in the Opera Dragonfly main drop down menu. For more on how to operate Opera Dragonfly, check out our Introduction to Opera Dragonfly article.

It doesn’t stop there either – you can connect your running Opera Dragonfly instance to any browser that contains the Scope protocol (for example Opera Mobile 9.5), and debug widgets running on other devices. You can find out how to do this in the article Remote debugging with Opera Dragonfly

You can also run your widgets inside our Widget Emulator, which will show you how they look on different devices (different screen sizes, etc). To learn how to use this, read our Widget emulator article.

There is a useful article available that gives you a workflow for debugging Opera Widgets using Opera Dragonfly and the Widget Emulator together – check out Debugging widgets using Opera Dragonfly and the Widget Emulator.

## Opera Widget optimization across devices

Since one main focus of Opera Widgets is to provide applications that run across platforms, we have created resources to show you how to optimize your Opera Widgets so they run better on mobiles, game consoles, etc. as well as more familiar desktop environments.

Opera Widgets: cross platform applications is the best place to start here – it outlines basic issues to be aware of when creating cross-platform widgets. You can then go on to read an extensive array of practical cross-device development tips at Cross device development techniques for widgets.

There are different modes to display widgets in, which may be controlled by JavaScript, for example mobile phones might want to display a widget in fullscreen mode, whereas in a desktop browser you are more likely to want the widget in application mode (ie, in it’s own distinct window with chrome, not covering the full screen). You can find more out about controlling the modes at Widget modes: docked, widget and more, and there’s a practical solution for docked modes availale at Adding a docked mode to your widgets.

Mobile development process advice provides you with a useful workflow for creating mobile Opera Widgets.

## Other useful documentation to get started with

Some Widget features are supported in some Opera browser instances, but not others. Check out the Opera widget support notes to find out what the caveats are in this respect.

The Opera Widgets Preference Store is also worth knowing about – it’s a specialized XML-based widget data storage system, which allows you to persist information after an Opera Widget restarts.