My Mobile Blog: Creating Opera widget

METHODS OF CREATING OPERA WIDGET:

What do you need to create and deploy an Opera Widget?

In order to be able to create an Opera Widget, you will need the same as you need for regular Web development:

A basic understanding of Web technologies.
A text editor or IDE that allows creation of JavaScript, HTML, and CSS files.
A tool for creating .zip archives.
Somewhere to publish the widget. The Opera Widgets web site offers the perfect place to host your widgets, and is visited by tens of thousands of people every day looking for widgets to run.

How are widgets related to Web pages?

We keep saying widgets are very similar to regular Web pages, but there are a few differences:

The security restrictions of a widget are different from regular Web pages — you can create a widget that will simultaneously interface with different Web services living on different Web servers.
Widgets have a widget object available via JavaScript that allows you to access widget-specific functionality.
Widgets have access to a permanent storage facility for its settings and downloaded data. This mechanism is similar to cookies, but the storage capacity is larger than for cookies, and does not automatically expire after a given time.
Widgets typically have several views available in the same document. Typically there will be one or more views used to access the widget’s normal functionality, and a separate view wherein you provide the user with configuration options. Switching between these views is done by performing transitions on the views using regular JavaScript/CSS methods.
By default, widgets are draggable, so you can move them around on the screen simply by clicking and dragging. If this behavior is not desired for a widget (or parts of it) you need to specify control regions where the widget does not respond to dragging.
By default, the widget background color is transparent. The transparent area of a widget does not respond to mouse events but instead passes them through to any underlying application.

The widget workshop: hello world!

OK, with the background out of the way, let’s start coding! Our first widget will be as simple as possible — a “Hello World!” widget. Earlier on we talked about widgets containing CSS, images and JavaScript files. Many do, but at the very least, a widget requires two files:

The main document.
The widget configuration file.

We will start this tutorial by creating a minimal widget, and then expand the widget into a complete widget with style, and a configuration view.

Creating the main document

First, create an HTML document inside a new directory and call it index.html. This document will be what your users will see when they first load the widget. Add the following code to it, and save the document.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Creating the widget configuration file

Next, we’ll show you how to create the widget configuration file, which is needed in order to run your widget. It is always named config.xml, and holds information on certain properties of the widget. The following are some properties the file can contain:

The widget’s name. This is required.
The widget’s dimensions. This is the initial viewable area for a widget.
Author information. Feel free to brag.
A unique ID for the widget. This ID is made up of three parts: A hostname, a path and a revision date on the YYYY-MM format (you can also use YYYY-MM-DDDD if you plan on revising the widget more than once a month).
Security information that provides the widget user with information about which domains the widget will be contacting. Even if this security information is optional, any widget that contacts a third-party service is highly encouraged to include this, since this will establish a trust relationship between you, the widget author, and the widget user.

Create the config.xml file in the same directory as your index.html. Add the following code to it, and save it.

<?xml version='1.0' encoding='UTF-8'?>
<widget>
  <widgetname>Hello World!</widgetname>
  <description>Demo widget from the Hello World tutorial.</description>
  <width>440</width>
  <height>200</height>
  <author>
    <name>John Doe</name>
    <email>john.doe@example.com</email>
    <link>http://acme-widget.example.com</link>
    <organization>Acme Examples, Inc.</organization>
  </author>
  <id>
    <host>example.com</host>
    <name>HelloWorld</name>
    <revised>2008-01</revised>
  </id>
</widget>

Running your widget for the first time

Select both the files you have so far, and compress them into a .zip file
Rename the file, giving it a memorable name and an extension of .wgt
Run your widget by dragging and dropping the .wgt file into your browser window
Select Install

My Mobile Blog

Monday, December 22, 2008

Creating Opera widget