Opera Widgets as standalone applications

By Remigiusz Bondarowicz, Chris Mills

Introduction

Opera Widgets are made using Web standards, the same technology used to build Web pages. This ensures that they work on all platforms and operating systems, as well as providing developers with a much shorter and simpler development cycle for creating desktop applications.

Ever since Opera Widgets became part of Opera’s desktop browser in 2006 they have been dependent on the browser in many respects. Opera Widgets are managed from within the browser and they run as long as the browser runs.

Opera Widgets for desktop — found in our new Opera 10.20 alpha release — breaks this dependency between widgets and the browser. In short, as long as you have Opera installed somewhere on your machine, you can run any widget you like, without ever opening the browser.

This release gives you a preview of the changes that Opera has planned for widgets. Opera Widgets are getting a complete make-over — from being small, single-purpose gadgets to standalone applications with the power to replace native applications. In this article, we take a closer look at the main changes and new features included in Opera Widgets for desktop.

Download process

A new, better approach has been introduced for downloading widgets via Opera. This mechanism takes advantage of Opera’s download manager to give you more flexibility while your favorite widgets are being downloaded. You can use this time to look for some other widgets or simply surf the Web, and as soon as the widget download completes Opera will automatically trigger the widget installer.

From now on, you can also download widgets via different browsers and Opera’s widget runtime will take care of the installation. The widget runtime is registered in the system as one of the .wgt filetype application handlers, so it will be listed among the applications capable of handling widget files.

Installation/uninstallation process

The installation and uninstallation processes have changed a lot with Opera’s new widget runtime. Widget management has been moved out of the Opera browser and into the operating system itself. Widgets now integrate better with the platform via shortcuts and launch scripts (depending on the host platform), and are listed together with other applications belonging to the OS. The widget runtime is equipped with a graphical widget installer that facilitates the widget deployment process.

Widget installation can be triggered in several ways:

• Download the widget via Opera (or another browser) — the widget installer will run automatically after download
• Double click on a .wgt file in your file system
• Drag and drop a .wgt file onto Opera
• From the system console — for example in Windows you could enter opera.exe -widget [widget path]\[widget name].wgt

The following sections describe the installation process for the various desktop platforms.

Once you have installed Opera 10.20 alpha, try installing some sample widgets so you can have a play around. We'd recommend our Twitter and Google Translator widgets.

Windows

On Windows, a graphical widget installer guides you through the installation process. The default settings should be fine in most cases. You can click the Install button to perform the installation, as seen in Figure 1.

Figure 1: The Widget installation dialog box for Windows.

You can also customize your installation by clicking the Customize... button (seen in Figure 1). This brings up the Widget installation settings dialog seen in Figure 2.

Figure 2: The Widget installation settings dialog box for Windows.

In this dialog you can customize the following items:

• Widget name: What the application is called
• Installation folder: Where it is installed on your system
• Add widget icon to: Check/uncheck the boxes to choose whether you want shortcuts for the widget added to your Start Menu, Desktop and Quick Launch bar

When you press Install, the widget installer will extract the content and create shortcuts as specified.

A widget can be uninstalled in the same way as any other application:

• Control Panel > Add/Remove Programs on Windows XP and previous
• Control Panel > Programs > Uninstall Programs on Windows Vista and later

Uninstalling a widget does not remove its settings, so if you decide to reinstall the same widget, your settings will be reused.

Linux

Figure 3 shows the installation dialog box for Opera Widgets in Linux. The default installation on Linux is for the current user only, but you can also choose to create a package for other users to install the widget as well. You can also choose to create a widget launcher script.

Figure 3: The Widget installation dialog box for Linux.

When you choose the Make xxx package from this Widget option, the system will actually generate a platform-specific package for the widget (eg .deb for Debian/Ubuntu), which is installed in the same way as any other package. After installation of the package, all management of the widget is done by your system’s package manager. Three package types are supported: .deb, .rpm and .tar.

After installation is complete, your widgets are accessible through the Applications menu, for example they are installed in Applications > Other in Ubuntu. Advanced users can run widgets from the terminal using the launcher scripts created during the install process. Also available in the Applications menu (under Accessories) is the Widget Manager, as seen in Figure 4. This is worth knowing about when you want to uninstall Opera Widgets — simply click the Opera Widget you want to uninstall, and click Uninstall.

Figure 4: The Widget Manager dialog box for Linux.

Mac

The graphical widget installer on Mac has the same look and feel as the one used on Windows, while respecting the platform differences regarding installation settings — see Figure 5. A default installation will create the widget bundle in the Applications folder.

Figure 5: The Widget installation dialog box for Mac.

You can customize your installation settings by clicking the Customize... button, which brings up the Widget installation settings dialog — see Figure 6.

Figure 6: The Widget installation settings dialog box for Mac.

This dialog makes it possible to customize the widget name and the installation location.

Widgets can be uninstalled in the same way as any other applications on Mac, by dragging and dropping the widget bundle into the Trash.

Running Opera Widgets

There are several ways to start a widget once it has been installed on your operating system:

Windows

• Click/Double-click the widget shortcut, or select it from your Quick Bar or Start Menu
• Run [widget name].exe from the widget installation folder
• In the system console, type opera.exe -widget [widget installation folder]\config.xml

Linux

• Select the widget shortcut in the Applications menu.
• In the system terminal, type opera -widget [widget installation directory path]\config.xml (if opera installed globally).
• Go to ~/bin and run the widget launcher script in the terminal

Mac

• Double-click the widget bundle in the installation folder (ie /Applications/)
• Type the name of the widget in Spotlight and choose the correct hint

For widgets to run, Opera’s desktop browser must be installed on the OS, but you can download widgets using other browsers and have them install just fine.

Export wizard

To keep on using the widgets you already have installed via previous versions of Opera in Opera 10.20, you need to first export them into the new Widget Runtime. Fortunately, Opera 10.20 provides an easy way to do this — when you upgrade Opera you will be greeted by the Widget Export Wizard, as seen in Figure 7.

Figure 7: The Widget Export Wizard dialog box.

You can import your widgets later via the menu option File > Import and Export > Export Widgets...

Managing passwords

When you log in to any widget that requires user credentials, such as the Twitter widget, your user name and password are saved so you can automatically log in next time you run the widget. If you don’t want your credentials to be stored, you can always delete all saved passwords via the context menu item Preferences... (see Figure 8). You can also select this option from the Widget’s Preferences... menu bar option.

Figure 8: The widget context menu.

This opens up the Widget preferences dialog, seen in Figure 9.

Figure 9: The widget preferences dialog box.

here you can:

• Choose to enable or disable notifications
• Set proxy servers to run your widget through
• Reset all settings for the current widget to their defaults
• Delete all stored passwords

Debugging

Opera supports two ways of debugging your widgets using Opera Dragonfly — local debugging and remote debugging.

Local debugging

To do this while developing your widget, you simply drag and drop the config.xml file of the widget you are working on onto Opera’s desktop browser. Opera Dragonfly will then start up automatically, ready to debug your widget.

In this scenario the widget is not installed via the graphical widget installer and will not be accessible from within the system.

Remote debugging

To debug your widget remotely you have to take the following steps:

1. Start Opera and go to Tools > Advanced > Developer Tools to start Opera Dragonfly
2. Go to Settings tab > Remote Debug section
3. Check the Remote Debug check box and adjust the port number if needed
4. Click the Apply button on the righthand side of the section
5. Start the widget you want to debug and open the remote debugging configuration dialog from the context menu (Developer Tools)
6. Enable remote debugging (see Figure 10) and specify the IP address of the device you are debugging and the port on which Opera Dragonfly is listening (for widgets running on your machine, the default IP address for the localhost will be 127.0.0.1); press the OK button
7. When the connection is complete you will be informed via a notification in the bottom right corner of the screen

Figure 10: The remote debugging dialog box.

To find out more about remote debugging with Opera Dragonfly, watch our video and read our article — Opera Mobile 10 and its remote debugging party trick.

Widget File I/O

The File I/O API provides developers with the functionality to access data on your file system from widgets, allowing for hybrid Web/desktop capabilities. This feature is even more powerful now that widgets can run as standalone applications.

When a widget is installed, you will be notified if the widget has access to your file system — see Figure 11.

Figure 11: The widget File I/O dialog box.

Notification system

Opera’s widget runtime supports a basic notification mechanism. Notifications appear in the bottom right corner of the screen when the widget calls the ShowNotification() function - see Figure 12 for an example. The notification window consists of:

• Widget name
• Widget icon
• Text of the notification

Figure 12: A sample widget notification.

Context menu

The widget context menu (take another look at Figure 8) has been expanded with new items to provide even better access to the most important options related to the widget:

• View options: Always On Top, Normal, Always Below, Zoom
• Preferences: Opens the Widget preferences dialog box (see Figure 9)
• Developer tools: Opens the Widget Remote Debug dialog box (see Figure 10)
• Download more widgets: this lets you download additional widgets from http://widgets.opera.com

Widgets in “Application” mode

Opera’s widget runtime introduces support for an additional mode called “Application” mode. In this mode widgets run in an OS-native window, as seen in Figure 13.

Figure 13: An example of Application Mode on a widget.

This mode can be triggered by setting the defaultmode attribute in the config.xml’s widget element to application, as seen in the following example:

<?xml version='1.0' encoding='UTF-8'?>
<widget defaultmode="application">
  <widgetname>Sample widget</widgetname>
  <description>Shows the default chrome for application mode.</description>
</widget>

This provides the widget with standard OS windows controls — such as minimize, maximize and close buttons — automatically. See the next section for more on these.

Widget control buttons

Widget control buttons are another new feature made available in this release. They ensure that a consistent set of basic controls — Move, context menu, Minimize and Close — are available in all widgets in “Widget” mode. See the top-right of Figure 14 for an idea of what they look like.

Figure 14: Widget control buttons — Move, context menu, Minimize and Close respectively.

This provides a consistent user experience that fits in with the style of the platform the widget is running on — previously the onus was on the developer to provide such controls and follow the Opera Widgets Style Guide. These buttons only appear when the user positions the mouse over the widget.

Conclusion

This is just a preview of what is to come. There are several enhancements planned for the features listed above as well as some exciting new ones. We'd like to invite you to download and install the alpha and play with our new Twitter and Facebook widgets. To give your own suggestions and join the discussion of our latest Opera Widgets implementation, join the widgets forum on My Opera.

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