My Adventure in Widget Making

On Saturday, 11/5 Tim Robertson sent out an email to the staff of writers at MyMac.com requesting a MyMac.com widget. I had never made a widget, and had no clue how to do it. I had read it was easy and I recalled seeing several programs for making widgets. So I decided to give it a try.

I found a widget-making program on the Internet called Wcode (or Widget Code) by Bryan Goldstein and Jeremy Bilien. The program has a 15-day demo, so I figured I’d start there.

It seemed pretty straightforward. You answer a few of questions about the widget and the program builds it for you.

After about a minute I had a widget with default graphics sitting on my desktop. I thought if it was that easy, I’d have a widget done in no time. Was I wrong.

I installed the new widget, and tried it out. The RSS feed was not working. All I had was the default widget graphic on my screen. Thankfully, the back of the widget worked fine. I tried several more times, and still nothing. I couldn’t figure out what was going on, and I couldn’t find any directions or help files to help me out. I decided to call it a night, and try in the morning.

Sunday morning came and I figured I was tired the night before, and I must have missed something obvious. I DID miss something obvious, but it took several more tries to figure that out. I eventually noticed a “+” on the RSS part of making a new widget. I decided to push it (what did I have to lose?). YES! The RSS feed was saved into the code, and when I tested the widget again it worked!

Next up- the graphics. I knew that would be the easy part.

First, I decided to search the Internet for tutorials on making a widget. I found a great website here. I didn’t understand much on the site, but I did learn that a widget was a package containing many files in it, including art files. You can views these files by control clicking the widget icon and choosing “Show Package Contents”. These art files became my templates for what eventually became the final art.

Illustrator, Photoshop, ImageReady, and some logo files from Tim helped bring the artwork together. I thought the widget needed its own identity, so I made a widget version of the MyMac mascot.

Finally, I used Dreamweaver to make some customizations to the widget. It displayed the front of the widget as if it was a website making changes there easy. For the back, I had to dive into the HTML code. I’m not a programmer, but I know some basic HTML, and I was able to make some minor changes to the back of the widget.

During my adventure I did find some things I just couldn’t figure out. For example, what is the point of the pull down menu on the back of the widget? I don’t know, but I couldn’t delete it without losing the “Done button.” Also, I tried and tried and tried to change the color or delete the little MyMac.com from under the RSS feed. No luck.

After some art revisions, and HTML tweaks and disasters the morning flew by. It was time to get off the computer and join the world. It was a beautiful day and I didn’t want to spend it indoors. So I emailed the final version to Tim, and I am thrilled at the reaction.

As Tim said in his article, this is version 1.0, and it could probably use some tweaking. I would love to know how to make the changes I mentioned above. I’d also like to know how to change the shape, and size. I had a totally different design with the mascot, but I wasn’t able to get it working right outside the rectangular format of the template.

If you can help out, send me an email or drop a note below. Thanks in advance and I’ll catch you in Macspiration.