Home arrow XML arrow Introduction to Widgets

Introduction to Widgets

I recently wrote an article for SEO Chat discussing how Konfabulator has evolved since its acquisition by Yahoo, and towards the end of the article I created a widget myself to demonstrate the ease with which this could be done. I said at the time that I would be writing a follow-up article discussing the code itself and the method of creation; this is that article.

Author Info:
By: Dan Wellman
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
August 14, 2006
  1. · Introduction to Widgets
  2. · Adding Your Own Code
  3. · Displaying Data
  4. · Setting the Preferences

print this article

Introduction to Widgets
(Page 1 of 4 )

Widget Walkthrough

A widget should be created to fill a need; it should actually do something useful.  What I decided on in the end was a news reader. Every day, when I turn on my computer, one of the first things I do is to go to the BBC news website and check out the technology section headlines. I decided that my news reader would take the RSS feed supplied by the BBC and list the daily technology headlines. Thus the idea for TechFeeder was born.

The very first thing that I did was draw the main element of my widget in Photoshop (any decent graphic tool will do, but you wonít be able to use the Photoshop script if you use a different application). I wonít go into extreme detail over exactly what I did, but the tutorial I followed advised that aqua style icons are made using a layered mixture of shading, opacity and lighting effects. There are plenty of guides out there on aquifying pictures so if youíve never created one before, Iíd recommend searching for one and practicing a bit before the main event. 

It took a couple of attempts before I had something that looked like I wanted it to, but soon enough I had the basic appearance that I had envisioned and settled with it. I think youíll agree that while it isnít perfect and has obvious flaws, it works reasonably well. Perhaps Iíll improve it for release 1.1 of my widget! While you have Photoshop open, you may as well create the image that youíll use for the about-box for your widget. The about box should match the style of your widget if possible and list things such as the version number, author details and anything else you feel is appropriate. You can create the whole thing in Photoshop or just the background and use XML to add the text. Itís up to you, but in order to demonstrate some of the about-box capabilities, I just created the background in my image editor.  

When you run the widget creation.jsx file, youíll be asked to submit your name, the widget version and choose a location for the widget directory to be created.  Once it has finished, youíll need to go into the contents folder and open the .kon file in a text editor.

You should be presented with some code that looks very similar to this:

<?xml version="1.0" encoding="UTF-8"?>
<widget version="1.0" minimumVersion="2.0" author="Dan Wellman">
<window title="TechFeeder">
<image src="Resources/Shape 1.png">

This should make sense at first glance to anyone who's worked with XML before. The XML declaration comes first, followed by the <widget> tag which is the container into which all other tags must be placed. Next is the <window> tag, which in this case specifies the main window. Notice that the image that makes up the main background of the widget is specified in its own <image> block, separate from (not nested within) the window element. To make the widget semi-transparent, as many are, Iíve lowered the opacity of the image.  I have used a percentage here, but you could also use an integer from 0 to 255 to specify the opacity.

blog comments powered by Disqus

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials