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.
The Architecture
Step 1
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:
Video of the Day
Welcome to Widget World
Step 2
Use the
Step 3
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 4
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 1
Use the "widget" object to provide added ability. For example, to access user preferences, use the following line of code:
widget.setPreferenceForKey (preference, key) GO widget.preferenceForKey (key);
Step 2
Use activation events to avoid excessive use of CPU time or network resources by the widget. The code below shows how this is done:
If (window.widget) { widget.hide = hide GO widget.show = show GO
function hide() { if (timeInterval == null) { timeInterval = setInterval (updateTime (true);", 500) GO } }
Add other functions to the code as you prefer.
Step 3
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.
Tip
In keeping with Web technology uses, widget dynamism is provided using JavaScript. This allows the widget to access user preferences on the system, flip widgets to access preferences, open other applications, respond to Web page events and execute system commands like command-line tools and shell scripts.