Using the Opera Widgets SDK - fast-track guide

By Chris Mills

Table of contents:

Introduction

Opera Widgets are cross-platform applications made with Web technologies such as HTML, CSS, and JavaScript; therefore, they represent a great way to create and deploy applications rapidly across different devices – for example, you can run Opera Widgets equally well across Opera browsers on any desktop computer, mobile devices, or 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. Therefore, we have 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 it will 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.

Prerequisite 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 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 a 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 than creating a normal Web page, but you will soon get used to it; the basics are all explained in Creating your first widget.

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

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 specialized 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 in which to display widgets, 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 (i.e., in its own distinct window with chrome, not covering the full screen). You can find out more 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.

Chris Mills

Chris Mills is a web technologist, open standards evangelist and education agitator, currently working at Opera Software in the developer relations team. He spends most of his time writing articles about web standards for dev.opera.com and other publications (such as .net mag and A List Apart), giving talks at universities and industry conferences, and lobbying universities to improve their web education courses. He believes that education is the answer to everything, but in particular he is passionate about using education to improve the overall content quality, accessibility, usability and future-viability of the Web.

He is the creator of the Opera Web standards curriculum, contributor to the WaSP InterACT project, and coauthor of InterACT with web standards: A Holistic Approach to Web Design. In August 2011, he also accepted the position of co-chair of the newly-formed Web Education Community Group.

Outside work he is a heavy metal drummer, proud father of three and lover of good beer.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.