If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

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”>
<debug>on</debug>
<window title=”TechFeeder”>
<name>mainWindow</name>
<width>206</width>
<height>141</height>
<visible>1</visible>
<shadow>0</shadow>
</window>
<image src=”Resources/Shape 1.png”>
<name>Shape_1</name>
<hOffset>0</hOffset>
<vOffset>5</vOffset>
<width>206</width>
<height>136</height>
<opacity>70%</opacity>
</image>

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.

Introduction to Widgets - Adding Your Own Code

Now you need to start adding code yourself. What I focused on first was the about-box, which is an element used solely to display a little window listing the program version, the creator, and anything else as a programmer that you want or need to display. As I’m using content from the BBC site, I felt it necessary to include their copyright information:

<about-box>
<image>Resources/about-backg.png</image>

<about-version>
<font>Arial</font>
<size>12</size>
<style>bold</style>
<hOffset>90</hOffset>
<vOffset>45</vOffset>
<color>#ffffff</color>
</about-version>
<about-text>
<data>BBC TechFeeder</data>
<font>Arial</font>
<size>18</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>30</vOffset>
</about-text>

<about-text>
<data>Copyright:(C)</data>
<font>Arial</font>
<size>12</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>90</vOffset>
</about-text>
<about-text>
<data>British Broadcasting Corporation</data>
<font>Arial</font>
<size>10</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>105</vOffset>
</about-text>
<about-text>
<data>Click here for terms and conditions</data>
<url>http://news.bbc.co.uk/1/hi/help/rss/4498287.stm</url>
<font>Arial</font>
<size>10</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>120</vOffset>
</about-text>
<about-text>
<data>of reuse.</data>
<font>Arial</font>
<size>10</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>130</vOffset>
</about-text>

<about-text>
<data>By Dan Wellman</data>
<font>Arial</font>
<size>14</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>185</vOffset>
</about-text>
<about-text>
<data>2006</data>
<font>Arial</font>
<size>12</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>200</vOffset>
</about-text>
</about-box>

It’s a whopping amount of code for one small window, most of which is graphic, but it’s easy code and should make absolute sense at a glance. The about-version code actually pulls the version number from the main kon file at run time. The reason it’s so large is that at present, text in the about-box doesn’t wrap and is simply cut off at the end of the window. This is why there are so many <about-text> blocks; each line is its own separate object. The <about-version> and <about-text> blocks are listed separately, much like the <image> element above. Note that the about box must feature an image in order to function and that the bit of the text that is a hyperlink must have the <url> attribute set in the relevant code block. Once complete, the about box will appear like this:

Introduction to Widgets - Displaying Data

The application will be getting information from a news feed and it is going to need to display the information somewhere in order to carry out its function. I’ve created a text area to display the data for its multi-line facility, and I’ve enclosed it in a frame element primarily because of the automatic scrollbar capabilities that this element features:

<frame name=”dataframe”>
<textarea name=”datatextarea”>
<data>Loading…</data>
<font>Arial</font>
<editable>false</editable>
<color>#000000</color>
<size>12</size>
<style>bold</style>
<height>80</height>
<width>150</width>
<voffset>35</voffset>
<hoffset>30</hoffset>
<bgcolor>#cccccc</bgcolor>
<bgopacity>0</bgopacity>
</textarea>
</frame>

If you set the data element to hold the text “Loading…” this is what will be displayed when the widget first appears on screen. This is important because it takes a few seconds before the data is pulled through and parsed from the RSS feed. You’ll see in one of the functions later on that the data property of the text area is loaded after the source file has been obtained.

It’s great that the scroll bar handles, track and face are all drawn for you with absolutely no additional coding when using a frame element. You can also specify a frame element that will override this automaton and can be controlled via script. Doing this is a bit beyond the scope of this article, but such an element could be used as part of a function that automatically scrolls the text displayed in the text area.

Introduction to Widgets - Setting the Preferences

Next, I tackled the preferences. The widget engine will draw the preferences box for you and include the common options such as locking the widget’s position and setting the opacity. All you have to do is specify any additional options, and write the JavaScript to make them work:

<preference>
<name>textfontpref</name>
<defaultValue>Arial</defaultValue>
<title>Text Font:</title>
<type>font</type>
<description>Select a font for the news text.</description>
</preference>

<preference>
<name>textcolorpref</name>
<defaultvalue>#000000</defaultvalue>
<title>Text Color:</title>
<type>color</type>
<defaultValue>#000000</defaultValue>
<description>Select a colour for the news text.</description>
</preference>
<preference>
<name>textsizepref</name>
<defaultvalue>12</defaultvalue>
<title>Text Size:</title>
<type>popup</type>
<option>8</option>
<option>10</option>
<option>12</option>
<option>14</option>
<description>Select a font size for the news text.</description>
</preference>

<preference>
<name>textstylepref</name>
<defaultvalue>Bold</defaultvalue>
<title>Text Color:</title>
<type>popup</type>
<option>Bold</option>
<option>Italic</option>
<option>Narrow</option>
<option>Expanded</option>
<option>Condensed</option>
<option>Smallcap</option>
<option>Poster</option>
<option>Compressed</option>
<option>Fixed</option>
<option>No Style</option>
<description>Select a text style for the news text (it will only be applied if
supported by the font).</description>
</preference>

Widgets should be as customizable as possible; therefore, I’ve given the user control over everything that isn’t an image, which in this case is just the text from the BBC news feed. Each property you are able to change has its own segment of code. The <type> attributes of the first two preferences are used by the engine to automatically create a font chooser that previews all of your installed fonts, and a color picker, as seen in other applications.

In part two of this article I’ll show you how to wire up these preferences with a little bit of script to actually make them work. We’ll also work on the main script that makes the whole thing tick, and look at packaging and preparing the widget for upload to the online gallery.

—

By Dan Wellman