Developing Sidebar Gadgets – Part II


This is a continuation of my previous post in this ongoing series to help you create sidebar gadgets. In this posting I will provide you with 5 more tips that come from my experiences of working with Windows Vista Sidebar Gadgets.

Tip #1

The window.alert() command does not work. There are probably a couple of reasons for this, primarily because the dialogs are modal, and if you (as a user) have several gadgets on your sidebar all popping up alerts all over the place, it can become a confusing mess. Additionally, the design of a gadget calls for prompts to usually occur via a flyout. But if you develop the way I do, it is sometimes quite handy to place an alert in the middle of your code to verify results and/or verify you get to a specific point. As such having window.alert() yanked away probably feels awful and makes programming awkward and difficult when there are logic errors in your code that you cannot easily trace any other way. Well there are two ways around this problem:

1) Use window.prompt() instead. For me it is ugly, it pops up in a very inconvenient location and just a bad option.

image

2) The other option is a bit more eloquent. While the Sidebar team at Microsoft ripped out the window.alert() option for JavaScript, they left the VBScript MsgBox command intact. Why they did this, I do not know. And yes – if you are thinking about it – I see no reason why you cannot write a Sidebar Gadget in VBScript as well.

I love giving credit where it is deserved and to be honest, I did not figure this out myself. I like you were scouring the Internet looking for an answer and found Donavon West’s LiveSide blog about this issue. Click here to see his posting.

Here is the code you need to place in a separate VBS file:

sub alert(prompt)
     MsgBox prompt, 48 , "Sidebar Gadget"
end sub

In your HTML file you need to put the following include:

<script src="alert.vbs" type="text/vbscript"></script>

IMPORTANT NOTE: You need to place the vbscript include line at the very bottom of your list of included scripts – if you have multiple scripts. If you place it at the top or somewhere in the middle, your JavaScript files that are included will fail. Not totally sure why this happens, but this is the tip I give you. smile_regular

EVEN MORE IMPORTANT NOTE: Do a find and replace before you post your gadget to YANK OUT any alerts you have added for debugging. Nothing looks less professional than using a gadget and getting a message that pops up on the screen and says: "…made it to this point in the code…" smile_nerd

 

Tip #2

When working with a settings file or a flyout window, you can still access the parent windows variables and page settings using the following:

System.Gadget.document.parentWindow.<variable_Name>

or

System.Gadget.document.parentWindow.<form_Field_Name>

Tip #3

There is a problem with flyout windows with Sidebar gadgets where the window is not focused and the user will have to click on the gadget once to get focus and then again to access the controls on the form. You may have seen this in your projects or with other gadgets you have downloaded. To get around this problem I add something similar to the following:

<html>
<head><script>
function init()
{
   window.setTimeout("self.focus()",300);
} </script></head>
<body onload="init()">
<!–gadget form stuff here–>
</body>
</html>

Tip #4

If you want to access an application or open a browser window, you can use code similar to the following:

To open Windows Explorer to a given path on the computer:

System.Shell.execute(path,0,0,"explore");

To open Internet Explorer to a given URL:

System.Shell.execute(http://gallery.live.com);

As a matter of fact the System.Shell object is very useful. Check out everything you can do with it here. smile_wink

 

Tip #5

Create a blog or a web site that people can link to from your gadget. Chances are you might be reading this by clicking on a link inside one of my gadgets or from the Windows Live Gallery site. I like to add my web site information in my settings page. I also like to add it to my gadget description. This shows ownership or commitment to your users. It gives them a place to go to post feedback and get help or read more about you: the author of the gadget they decided to download. See my example below (from The Magic Folder):

image

 

In closing…

I hope this helps, and I would like to hear from you. Please leave your comment if you feel this was helpful or if there is some other information would would like me to cover. Anyway, as for the next edition I will cover creating an RSS feed using AJAX. Actually there is a lot of stuff that can be done with AJAX, but RSS seems to be one of the most popular avenues for Sidebar Gadgets.

 

2 thoughts on “Developing Sidebar Gadgets – Part II

  1. Just wanted to say, some very good stuff there. I actually already use tips 2-5. Finding ways in my gadgets to let me know when the code had reached a certain point was getting blooming annoying so i will now be using tip one as well 🙂 Something you might want to mention in a later "series" is using an RSS feed to notify the users of updates, its quite simple to do and seems to keep the users happy. You can use system.gadget.version to compare with the version on the RSS feed and then give the user a link to the update or a blog post about it.

  2. Thank you for the nice article. It helped me a lot as i am a beginer in developing gadgets.
    I have an issue with my gadget. I am using JqxGrid(www.jqwidgets.com) to bind json data. It works well but the features like paging, filtering, sorting do not work when deployed as gadget. But works fine in a stand-alone html file.
    Appreciate any help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s