W3C widgets overview
One advantage of using widgets rather than normal Web applications is that they can be downloaded once and used many times after that, just like non-Web applications that are installed on a device. This allows users to save on bandwidth because the only data they transfer is the data used by the widget and not the widget files themselves.
Widgets often provide a rich user experience, such as interactive calendars and even games. You can use widgets in mobile devices, where the advantage of downloading the widget once and using it over and over can save on data transfer costs.
As of January 2010, the W3C "Widget Packaging and Configuration" specification (see Resources for a link to the full specification) is in candidate recommendation state. This means that the W3C believes the specification is in a stable state and encourages developers to create implementations of the specification.
The goal of the W3C widget specification is to propose a standard method for building and packaging widgets. There are currently many different vendors that have widgets (see Resources), and almost all of them implement their own proprietary application program interface (API) and packaging format.
To view the W3C widget package in action, you need:
- Software that implements the W3C widget specification. This article uses Apache Wookie, an Apache Incubator project that is aimed at serving W3C widget content and allowing users to deploy W3C widgets.
- A utility to create the widget's compressed file archive.
- The Subversion (SVN) client if you want to download and install Apache Wookie.
Related technology: Other widgets and servers
There are many different versions of widgets and gadgets currently on the market, so it's sometimes difficult to understand how the different technologies compare. The fragmentation of the widget technologies can make creating reusable rich user Web components difficult.
In addition to Microsoft® Windows® Vista gadgets and Apple® widgets, similar technologies include Google Wave gadgets, OpenSocial, and OpenAjax. These technologies have their own APIs and specifications (see Resources).
Google Wave gadgets
Google Wave gadgets are similar in concept to W3C widgets but are targeted for use in Google's Wave Web application. By contrast, W3C widgets are published as a specification by the W3C and are intended to be non-proprietary and used by different vendors.
Google Wave is a Web application that is currently in limited preview for developers and early adopters who want to learn more about the technology. Google Wave is primarily a collaboration tool, providing different abilities in the form of Google Wave gadgets to users. Developers can build gadgets that provide special abilities for Wave users to include in each "wave."
OpenSocial is an API that allows you to build gadgets that work well in social networking Web applications. The OpenSocial 1.0 specification is currently under review, but versions 0.9 and 0.8.1 are used in containers (Web applications that use the gadgets) such as iGoogle, MySpace, Yahoo, and LinkedIn.
The adoption for OpenSocial makes it a compelling alternative for building gadgets.
The OpenAjax Hub provides publication and subscribing (pub/sub) technologies that are used in OpenSocial gadgets.
Because widgets built according to the W3C packaging and configuration specifications can use Ajax, OpenAjax can be a good technology to use for building widgets that can have improved interoperability. You can create widgets that use OpenAjax but conform to the W3C widget specification.
Apache Wookie is an Apache Software Foundation incubator project that is capable of serving both Google Wave gadgets and W3C widget packages. Apache Wookie is a server application that you can download and install as a Web application or run as a stand-alone server.
Getting the Apache Wookie source is also a good way to view samples of W3C widget source code.
There are no prebuilt Apache Wookie binary distributions available on the official site (see Resources), so to download and run Apache Wookie you need to have SVN installed. To download Apache Wookie, simply use the commands shown in Listing 1.
Listing 1. Downloading Apache Wookie
$ svn co http://svn.apache.org/repos/asf/incubator/wookie/trunk
After downloading Apache Wookie, you can run it as a stand-alone server by typing the commands shown in Listing 2.
Listing 2. Running Apache Wookie in stand-alone mode
$ ant run
ant command starts the Apache Wookie server in stand-alone mode. After you start the
server, you can access the widgets at http://localhost:8080/wookie/.
The widget configuration
Each widget package must have a configuration file called config.xml (case-sensitive) directly inside the empty directory that you just created, which is the base directory of the package. The configuration file contains vital information about the widget, such as the name, author, description, license, and more.
An example configuration file is shown in Listing 3.
Listing 3. A sample config.xml file
<?xml version="1.0" encoding="UTF-8"?> <widget xmlns="http://www.w3.org/ns/widgets" id="http://www.example.com/widgets/HelloWidget" version="0.1" width="300" height="200"> <name>HelloWidget</name> <description>A very basic widget that says, "Hello"</description> <content src="index.html" /> <icon src="images/icon.png" /> <access network="false" /> <author>Nathan A. Good</author> <license>This is my license</license> </widget>
The XML file should be UTF-8 encoded, as shown in the example.
The widget parent element has attributes that specify information about the widget, as shown in Table 1.
Table 1. Attributes for the widget parent element
|id||The unique URI that is an identifier for the widget|
|version||The widget's version|
|width, height||The width and height of the widget, respectively, in pixels|
|viewmodes||The view mode for the widget (see Resources)|
The XML elements that are used in the configuration are shown in Table 2.
Table 2. Widget configuration elements
|name||The short name of the widget is given in the |
|description||The description of the widget|
|author||Information about the widget's author|
|license||The license for the widget|
|icon||The relative path of an icon file|
With a sample configuration file created, you are now ready to create the start file.
The start file
Aside from the config.xml configuration file, the only other file that is required for a valid W3C widget package is at least one start file. If the start file is not specified, the default file is the file that has a name starting with index—usually with an .html, .htm, or .xhtml extension. Other extensions are allowed for different types of widgets, but this article focuses on the standard HTML example.
An example file is shown in Listing 4.
Listing 4. A sample start file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="Content-Type" content= "text/html; charset=us-ascii" /> <title>HelloWorld</title> <link rel="stylesheet" href="style/common.css" type="text/css" /> </head> <body> <h1>Hello World...</h1> </body> </html>
The HTML file shown in Listing 4 is like any other well-formed HTML file that can be displayed in a browser. This does allow widgets to be easily designed—you can create them as normal HTML pages. This HTML start file is the file used to render the widget.
The W3C specification provides guidelines for localization (l10n). The locale support is folder-based, so you create a directory called locales inside your widget's directory. Inside the locales folder, you can create folders with the locale names (for example, en, fr, de) that include different resources that are appropriate for the locales.
Packaging the widget
Widgets are packaged in standard compressed archive files that have the .wgt extension. You should create the compressed file archive
for a widget package using the
DEFLATE method. The compressed file
archive must include the configuration file, the start file, and any resource used by the files,
To create a widget package, use a command-line compressed file utility to create the compressed file archive as shown in Listing 5.
Listing 5. Creating the compressed file archive
$ cd myWidget $ zip myWidget.wgt *
You can also use a graphical user interface (GUI) method for creating a compressed file archive of the widget files. After you create the archive, change the extension from .zip to .wgt.
You can organize widget packages in directories to make it easier to work with the package. For instance, consider Figure 1, which displays folders such as images, style, and scripts that you can use to organize the widget package.
Figure 1. The W3C widget package folder structure
When referencing the resources in the start file, use relative paths as though the files are deployed to a Web server. For instance, use style/common.css to refer to the common.css file in the style folder, even though they're both included in a compressed file archive as the widget package.
You can digitally sign the widget package files for security. See Resources for more information about the W3C specification for digitally signing widget packages.
Deploying the widget
You can deploy the widget using Apache Wookie's Administrative menu. To access Apache Wookie's
menu, make sure Wookie is running (type
ant run on the command line)
and type the location for
Apache Wookie in your browser. By default, that location is http://localhost:8080/wookie.
Click the Administrative menu link (see Figure 2).
Figure 2. The Administrative menu link
You are prompted for a username and password. If you haven't changed them from the defaults,
the username and password are both
Click Add new widget as shown in Figure 3.
Figure 3. Adding a new widget
Click Choose File and browse to your widget archive file. After you select the file, click Publish (see Figure 4).
Figure 4. Choosing the widget archive file
Apache Wookie then processes your widget archive. When it is finished processing the archive, you can see the widget in the list of widgets and in the widget gallery.
Alternatively, you can use Apache Wookie to deploy the widget without using the administrative utility. To do so, simply copy the widget package to the deployment directory configured in the build.properties file with the key widget.deploy.dir.
The specification for deploying and configuring W3C widgets includes recommendations for how implementations should handle widget archive files. When an implementation such as a browser downloads a package, it treats the widget package as a potential widget package. The browser verifies the integrity of the package, making sure that it is correctly built and that the configuration is complete. If the widget package conforms to the standard, it is treated as a valid widget package.
Viewing the sample
Apache Wookie allows you to view widgets in any browser, so you don't need to search for a browser that implements the W3C specification (similar to the Opera browser's implementation of widgets). Ideally, browsers will implement the W3C widget specification so users can take advantage of the benefits of downloading their widgets once and using them over and over.
To view your new widget, make sure Apache Wookie is running and access it from your browser. Click View Widget Gallery and you will see the widget that you deployed listed in the gallery (see Figure 5).
Figure 5. Viewing the widget gallery
Click Demo to see your widget in action.
You can also create a test file that has an iframe element that includes your new widget. Create a simple HTML file as shown in Listing 6.
Listing 6. A simple HTML file to launch the widget
<html> <head><title>Widget sample</title> <body> <iframe src= "http://localhost:8080/wookie/wservices/wookie.apache.org/widgets/butterfly/index.html ?idkey=sM4aI8pnUUNI2Kfz15aK2h6vIek.eq.&proxy=http://localhost:8080/wookie/proxy &st=wookie%3AwEQZrCsxTF502%2B6JeeEFlkq1KPgqXKQTllufS6Toez81qb40hPouhYV3apG4on23uVB kQ5xlLjOXvIKulGqKBZvnKv2pgfEMg7OVzJpdDQt66MfODW6BBJry33ybOyMSc2hKonu7Sp1n1SY6FOFUuRx8VAjED TuJip8BQ9i6ZXRH9193FT%2F7Ijjz0o1vdR91ofzcFA%3D%3D" width="500" height="400"> </body> </html>
You will see your widget inside the Web page. I took the URL of the widget from the result of the Instantiate a widget action in Wookie's main menu.
The W3C "Widget Packaging and Configuration" specification is an emerging W3C specification for building widgets that can offer rich user interfaces to users and save on bandwidth.
- Read the full W3C "Widget Packaging and Configuration" specification.
- To learn more about digitally signing the W3C widget packages, read Widgets 1.0: Digital Signatures.
- Read more about the different widget view modes in the working draft of Widgets 1.0: View Modes Media Feature.
- Learn more about OpenSocial.
- Visit the IBM developerWorks Ajax resource center to learn more about Ajax.
- Learn more about OpenAjax.
- Read the "Wave Gadgets Tutorial" to learn more about creating Google Wave gadgets.
- Read "Introduction to W3C Widgets" to learn more about W3C widgets and browser issues on mobile devices.
Get products and technologies
- Download and install Apache Wookie.
- Download the Opera Web browser.
- Download IBM product evaluation versions or explore the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
Dig deeper into Web development on developerWorks
Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.
Keep up with the best and latest technical info to help you tackle your development challenges.
Software development in the cloud. Register today to create a project.
Evaluate IBM software and solutions, and transform challenges into opportunities.