Extending the Dashboard Virtual Earth Widget

Previously on Mac DevCenter, we explored the creation of a Virtual Earth Dashboard Widget from the ground up.

While it's pretty cool to integrate MSN Virtual Earth into a widget so easily, there's plenty of room to improve our widget. For starters, it looks like it was designed by Fred Flintstone in Photoshop. Secondly, there is no reason we should arbitrarily constrain it to a particular size. Thirdly, it's a bit mysterious; there isn't even an About pane, let alone any preferences.

To give you an idea of what we're shooting for, here's a sneak peek of the finished product. I think you'll agree it's quite an improvement from the version in our first article!

Go ahead and download a copy of the completed widget here. You can install this widget and walk through its source code as we progress through this tutorial.

So, without further delay, let's discover how we can make some of these changes to our widget and really get it looking professional.

Back to the Old Drawing Board

It's time to hit Photoshop again, and create something a little less Neanderthal-looking for our widget to live in. Our widget definitely needs a new look for 2006.

In the first version of our widget, we took the easy way out. The frame that surrounded the actual Virtual Earth control was a simple static image. An image like this is not going to help us when it comes to resizing. We need a container more like what you'd find on a web page, a dynamic, resizable container implemented with CSS.

Now that looks a bit more modern. In Photoshop, I created a box with rounded edges. I then subtracted a square out of the middle. On top of this I applied some layer effects: an inner shadow for the inner box, and a subtle drop shadow for the outside. I also applied a slight bevel to the frame itself. Finally, I used the slice tool to subdivide the image for display in the browser.

It's important to note what slices you'll need. Because your widget will be fully resizable, you will need each corner of the box as its own image. You'll then need a 1-pixel-wide slice for the top, left, right, and bottom frames. You can read about similar techniques at places like A List Apart. When it comes time to save your images, make sure they're all 24-bit PNGs, so that our transparencies are preserved.

Remember, a widget is for all intents and purposes a web page, so you can apply any technique that would normally work on a web page. Except, joyously, you can strip out the IE-specific workarounds.