Steven Nagy .NET

Friday, 29 June 2007

Vista Gadgets - Tips and Tricks

Today I completed a Vista Gadget called SurfWatch. You can download it here. I learnt a lot while creating this Gadget. My Javascript skills are are a

lot better now, and of course I learnt some of the Gadget API. Here's some tips that might be useful to you if you are writing gadgets also.

1. Use Visual Studio Codename 'Orcas'. The intellisense on javascript makes it extremely useful.

2. When using flyouts, set the style of the page body tags to remove the padding and margin, otherwise your flyout doesn't line up with your gadget.

3. You can also use the g:background tag for your flyout window to ensure transparency.

4. You can set data and call functions in the flyout from your main gadget window by calling against it's DOM. For example, if you had a textbox in your flyout, you would access it like this:

var flyoutDOM = System.Gadget.Flyout.document;
var myText = flyoutDOM.getElementById('myText');

Likewise, if you have registered functions in your DOM in your flyout, they can be called the same way. This allows for a form of communication between your two gadget windows.

5. Docked and undocked versions of your gadget actually run under the same html file. If you want them to look different and have different contents, keep this in mind when designing your gadget.

6. Emailing gadgets is tricky! Since they are essentially a zip file, most email servers will detect that the attachment contains items with Javascript, and may zap it. Not sure how to get around this yet!

7. There is a mime-type for gadgets:
application/x-windows-gadget

Technorati Tags: , , ,

2 Comments:

  • Some good tips there for new developers, I'm going to download Orcas now and see if i can get g:background to work - i've always had issues with g:background and g:image.

    By Lawrence James, At 30 June 2007 22:19  

  • In my gadget, I actually set it programatically in JS rather than in tags. Like this:
    System.Gadget.background = 'url(\'Images/sw-loading.gif\')';

    The reason I do it this way is because my background changes frequently. Plus I feel like I have more control doing it in code. :)

    By Steven Nagy, At 1 July 2007 07:26  

Post a Comment



<< Home