Widgets are stand-alone applications that can usually be found embedded on third-party sites as clocks, auction-tickers, event countdowns etc. Widgets are thus mini applications that are easy to deploy, quick to develop and used to leverage advanced technologies by adding functionality to existing applications. If you can create a Web page, then you know how to create and deploy a widget since they use the same technology of JavaScript, DHTML and CSS. Widgets can be either accessory, application or information widgets. Accessory widgets are self-contained that run independent of the Internet or an application. Application widgets are associated full-fledged with an application while information widgets work with Internet data.

Widget Architecture

The Architecture

Step

Fire up your text editor and create a HTML file. The HTML file should adhere to the XHTML 1.0 standard and above in order to comply with current Web standard best practices. A simple XHTML code will look like this:

Step

Welcome to Widget World

Step

Use thetag to perform full 2D rendering for the widget if required. The "composite" attribute is another addition to the tag that lets one specify how the image ("picture.png") is rendered.

Step

Use Cascading Style Sheets (CSS) to style the widget so that it displays uniformly on all browsers. Part of the CSS file would contain the following styling:

Step

Step

Place the above file in a separate file. In this example, we have saved the file as "widget.css." Reference the file using the "import" statement on the main html file as shown:

Adding Dynamism

Step

Use the "widget" object to provide added ability. For example, to access user preferences, use the following line of code:

Step

widget.setPreferenceForKey (preference, key) GO widget.preferenceForKey (key);

Step

Use activation events to avoid excessive use of CPU time or network resources by the widget. The code below shows how this is done:

Step

If (window.widget) { widget.hide = hide GO widget.show = show GO

Step

function hide() { if (timeInterval == null) { timeInterval = setInterval (updateTime (true);", 500) GO } }

Step

Add other functions to the code as you prefer.

Step

Create the "Info.plist" file to identify a widget and it resources. This file varies on what is should contain depending on the type of widget.