O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

21.2. Creating Desktop and Mobile Widgets

Problem

You want to create a widget that can be run in a browser, on the desktop, or in a mobile device.

Solution

Use a widget development toolset.

Discussion

The world is widget-crazy, and rightfully so. Rather than large cumbersome multipurpose applications, a widget is a small, friendly little bit of single-purpose functionality that is easy on our eyes, wallets, and computer resources.

Widgets are especially attuned to the mobile environment, requiring little space and providing simple or no required interaction—they just work, as the saying goes. More importantly, widgets make use of existing technology, including HTML and JavaScript, and minimize the esoteric file structures endemic to browser extensions and full-blown phone applications.

Widgets can be defined for a specific environment, such as the desktop, or can easily migrate from desktop to mobile. The difference is the toolset used.

Note

Microsoft also supports HTML-based widgets in Vista and Windows 7 (http://www.microsoft.com/windows/windows-vista/features/sidebar-gadgets.aspx). Yahoo! has a nice summary of desktop widgets at http://widgets.yahoo.net/blog/?p=16.

Developing Mac Dashboard widgets

Widgets came into their own when Apple released the Mac Dashboard, an environment conducive to embedding small, single-purpose applications. Currently on my Mac’s Dashboard, I have a weather widget, a clock, a calendar, and a countdown timer. Some I downloaded, some I made.

The best environment for building Dashboard widgets is to use Apple’s Dashcode, which comes bundled with Xcode 3.0 and up. Dashboard comes prebuilt with templates you can select from in order to short-cut the widget development effort. As Figure 21-3 shows, there are a lot of different widget templates.

Choosing a Dashboard widget template

Figure 21-3. Choosing a Dashboard widget template

Once you’ve picked a template, you’ll get a project interface where you can change the widget attributes, mark off completed workflow items, modify the graphics, include a widget icon, and package the whole thing. You can also add in JavaScript and see the existing script by clicking the ViewSource Code menu option.

At any time in the development process, you can run the widget to see how it looks, as shown in Figure 21-4 with a little book draft countdown widget I created. Notice the JavaScript in the window in the background.

A snapshot of an in-progress Dashboard widget project

Figure 21-4. A snapshot of an in-progress Dashboard widget project

You can also use Dashcode to create a mobile Safari application.

Note

Dashcode is installed with the XCode tool set, which you can either install from your Mac discs or access from http://developer.apple.com.

The Opera Widgets development environment

Opera doesn’t have an add-on or extension API/SDK, but it does have a very nice widget development environment. This isn’t surprising when you consider Opera’s focus on its very popular mobile browser. However, you can also run Opera widgets as standalone desktop applications, as long as Opera 10.2 or higher is installed somewhere on your computer. Beginning with Opera 10.5, the widgets install as first-class citizens (like a regular application).

Building an Opera widget is little different than building any other widget: you create an HTML file for the widget, add script, a CSS stylesheet, and a configuration file (in XML) to manage the packaging of the widget. Opera widgets can be downloaded and installed and given chrome—more like an application than a widget.

I created a simple Opera widget, but instead of the traditional Hello World, decided to print the date and time. I also added widget-like behavior to flip the widget when the front is clicked, in order to show the back, and to return.

The HTML file is simple, and includes stylesheet and script inline:

<!DOCTYPE html>
<html>
  <head>
    <title>Date/Time</title>
    <style>
      body
      {
          background-color: #006600;
          color: #ffff00;
          font-weight: bold;
          font-size: 24px;
      }
      span
      {
          padding: 10px;
      }
      p a
      {
        color: #fff;
      }
    </style>
    <script type="text/javascript">
      window.addEventListener("load", function () {
           // print out date
           var dt = new Date();
           var dtStr = dt.toDateString();
           document.getElementById("date").innerHTML=dtStr;

           // time
           var timeStr = dt.toTimeString();
           document.getElementById("time").innerHTML=timeStr;

        }, false);
    </script>
  </head>
  <body>
     <div id="datetime"><span id="date"></span><br /><span id="time"></span></div>
  </body>
</html>

One very nice thing about developing for a specific browser and environment, is you don’t have to worry about cross-browser support, and can use something like addEventListener for the window load event without worrying about IE. I could have also split the style into a stylesheet and the script into a script file—separate or inline, makes no difference.

The config.xml file is also simple, just providing some basic information about the widget and the widget author:

<?xml version='1.0' encoding='UTF-8'?>
<widget>
  <widgetname>Date and Time</widgetname>
  <description>Prints out current date and time</description>
  <width>440</width>
  <height>200</height>
  <author>
    <name>Shelley Powers</name>
    <email>shelleyp@burningbird.net</email>
    <link>http://burningbird.net</link>
    <organization>Burningbird</organization>
  </author>
  <id>
    <host>burningbid.net</host>
    <name>DateTime</name>
    <revised>2010-03</revised>
  </id>
</widget>

To package the widget, all we need do is zip it up and change the file extension to .wgt. When downloaded and double-clicked, the widget is installed and run, as shown in Figure 21-5.

My little Opera widget on my Mac desktop

Figure 21-5. My little Opera widget on my Mac desktop

Of course, this is a simple widget, without chrome (which can be added), or controls (ditto), and it doesn’t update the time with a timer. But it does demonstrate how simple it can be to create a working widget.

There are any number of widget SDKs and instructions for making both desktop and mobile widgets. Among those I thought most interesting are the following:

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required