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.

 

Live Search Club Gadget (version 1.1)

So, if you read my tips about how to make a Gadget, there is a tip on how to make a good gadget or more of a what not to do in the looks/behavior department. Well, my initial posting of the Live Search Club Gadget sucked in the looks department. See:

image

Well, I worked on the gadget a little more and made it look prettier:

image image

The buttons animate and glow now (see image on right, above). It is not much of a difference, but I just could not stand having this thing out there looking ugly on peoples sidebars. So, now it should hopefully be a little more welcome.

As usual the update will not be live for download for 24/48 hours, or until sometime Monday.

Clip Collector (version 1.1)

icon

Well, I have long neglected the Clip Collector gadget. smile_omg A problem was reported to me a while back that when you copy something that is NOT text (like the file or a picture) to the clipboard it may cause the gadget to get an error. If you have script errors enabled, you will see it, otherwise the gadget will just stop collecting clips.

Well, in this update, here is what has changed:

  • I have corrected the copy/error problem. smile_nerd
  • I added an update option in the settings tab so when you go there, if a new update is available on the web, it will let you know.
  • It will now remember your settings from restart to restart (but still not the clips it has collected).

For now this is all I have planned for this gadget. I have some ideas and suggestions from others and eventually I might add them to the gadget. However, at this time I have several items on my plate and this gadget in my humble opinion is quite elegant in its current state of simplicity. smile_teeth

Anyway as usual, I posted this to the gallery site and per the usual turn-around it will be about 24 to 48 hours before the updated version is live. Since it is Saturday, I am guessing it will likely not be posted until sometime on Monday.

Developing Sidebar Gadgets – Part I

So this is my first in the series of promised tips on developing Windows Vista Sidebar Gadgets. I am not sure how many of these there will be, but when I feel I have said enough or when those watching my site beg me to stop – I will. smile_regular

Now, lets get started, shall we…

So, there is one HUGE reason I got involved in making gadgets and that was because of an internal contest at Microsoft. I had occasionally mentioned a gadget idea I had with friends and co-workers; but when a co-worker both informed me of the contest and assured me that my gadget idea was a winner, The Magic Folder was born. Alas I was three months late into the contest, but out of over a hundred entries I still managed to finished third place. For that I must thank the community of users who have downloaded my gadget: Thank you!

But now that the contest is over – I am hooked. But if you were like me and are just getting started you are probably finding that making a gadget is not nearly as easy as talking about it. There were several lessons I learned and in this post, I will share five (5) tips with you.

Tip #1

Get familiar with JavaScript, HTML/XHMTL/XML, CSS, and DHTML. You do not need to be an expert, just known enough to get around and use the Internet to search for what you do not know.

Because JavaScript is the language gadgets are written in it is pretty important to know it’s syntax. If you are familiar with JAVA, C++, PHP, C, C# type languages, you should be as happy as a pig in mud. Here is a great course on JavaScript. There is so much to cover in this area that I can only assume you have some basic understanding in these areas already.

Tip #2

Quickly get a basic understanding of how to create a SideBar gadget:

  • Understand the folder structure – I may cover what I use in a future post.
  • Understand the files that are required.
  • Understand the information you need in the files.
  • Get to know the System.Gadget namespace (some links below will get you started).
  • Play with the gadgets you have and get a really good feel for how they behave, and then look at their source code.

There are tons of tutorials out there and example files. Focus on just getting something to work even if it only has text in it. Taking baby steps are best and this is what I did – each lesson builds on the next… Here are some links to get you started:

Finally, you can look "inside" other gadgets to see how things are done. They are plain text files so have a look (but be careful not to copy and then post the work around as your own because it can get nasty – and fast). The files are located here:

  • For gadgets installed from the web: c:\users\<your name>\AppData\Local\Microsoft\Windows Sidebar\Gadgets
  • For default gadgets: c:\Program Files\Windows SideBar\Gadgets

NOTE: When developing a gadget I find it a lot easier to work with it when it is placed in the default gadgets folder in the Program Files location. The reason is that when your gadget is located there, Vista SideBar will detect it and add it to the Gadget Gallery Dialog so you can easily load it, test something, then unload it again.

Tip #3

Since most gadgets use some type of web service or web page as a service from which to feed you information, you will need to learn how to use AJAX via the XMLHTTP object or a nifty little library called Prototype.js (which actually encapsulates the function of XMLHTTP and adds a lot of additional and useful tools). For now, I will leave you with some links, but in future tips I will try to include some sample code. So to get the Prototype.js library go here. Here is some very simple code to start you off:

<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
    var myAjax = new Ajax.Request(
    ‘
http://checkip.dyndns.org/’,
    {
        method: ‘get’,
        onComplete: parseResponse,
        asynchronous: false
    });
}
function parseResponse(o)
{
    ip.innerText=o.responseText;
}
</script>
</head>
<body onload="init()">
    <span id="ip"></span>
</body>
</html>

Download the prototype.js file to your desktop, copy above text, place it in a text file on your desktop and rename it to text.html and save it. Double-click on it. It isn’t pretty, but it should help you get the point.

Anyway, this goes to the following page: http://checkip.dyndns.org/. It grabs the information from that page and places it your page in a specific control, in this case the SPAN with the ID of "ip." 

NOTE: The code above is using the Prototype.js library to get information and load it on your page. If you know anything about XMLHTTP you may find Prototype.js methods easier. However, here is a link that does the same as above, but this time using XMLHTTP (no need to add the Prototype.js library file).

Tip #4

You probably want to get proficient at creating graphics assets for your gadgets. No matter how well your gadget works in its guts or how eloquent your JavaScript code looks, your gadget is CRAP if it does not look pretty. Anyone who downloaded the very first version of The Magic Folder will understand what I mean. It was very functional but looked like doo-doo. smile_wink

If your Gadget is not pretty and does not act snazzy it will get pulled off the SideBar, no matter how useful it is. So, to create graphics I actually use PowerPoint 2007. It is very easy to draw out the shapes, change the colors and formats of the shapes, group them, import pictures, crop and manipulate objects. Here are some PowerPoint tutorials/training courses.

Tip #5

Once I have the graphics the way I like them, I animate them with DHTL/JavaScript like this:

<img src="button.png"
    
onmouseover="this.src=’hover.png’" 
     
onmouseout="this.src=’button.png’" 
     
onclick="alert(‘hello world’)" />

So what does this do? Well, when you mouse over the image it changes and when you click it, you get a message. Place the following sample code in Notepad and save it to the desktop as Test.html, then double-click on it to load it:

<html>
<body>
    <span id="link"
          onmouseover="link.style.fontWeight=’bold’"
          onmouseout="link.style.fontWeight=’normal’"
          onclick="window.alert(‘Your using DHTML!’)">
    Hover Over and Click Me
    </span>
</body>
</html>

As you hover over the text on the page it will become bold and as you hover away it returns to normal. When you click it you get a message box.

NOTE: The window.alert() command DOES NOT work in gadgets. I actually love using message boxes to sometimes help me debug something that is not working. However, the functionality (while it works in the browser) it has been stripped from gadgets completely. There is a workaround (albeit a little involved). I will cover it in a future tip.

In closing…

So, hopefully, with the tips above you have not damaged your computer too much. smile_regular The final tip I will give you for today is to be patient. Be patient with yourself, be patient with your gadget, do not expect to be an expert Gadget developer overnight. I have been programming since I was 11 years old and JavaScript came naturally to me, but Gadgets still took me time. And if you are already an expert programmer, there are several gotchas to watch out for. The rules link I proved above should point out a few. However, I plan to cover some of these in more detail later – and some workarounds to them.

/\/\/\/\/\/\/\/\/\/\/\

In closing, let me know what you think. Should I continue this series? If enough people like it, I might put together one each week. Please leave comments and let me know if you find this helpful.

 

Just for fun… Live Search Club Gadget

Well, I started playing around a little and after about 15 minutes I had a new gadget pretty much done. smile_nerd So, has anyone seen the new service from Microsoft called: Live Search Club. First, let me explain the service for those new to it:

1) You can play several free online games. Currently there are eight (8) and these include:

2) As you play the FREE games, you earn tickets for completing them. Earn enough tickets and you can trade them in for REAL prizes. Several items are in the prize store from music downloads to an XBOX 360.

Ok, so I made this new gadget and just posted it. The new gadget is called The Live Search Club Gadget. It provides you a list of the games available from the site. You can click through each game and then click the picture of the game you want which will then load in your browser. Again, very simple gadget. Here is a screen shot:

image 

Let me know what you think.

Live QnA Gadget (version 1.1)

I got an interesting question in e-mail – what is Live QnA and how do I use it. Well, here are the answers:

Well, everything on my wish list for this gadget is completed (much faster than I anticipated). I finally feel I am getting better at this Sidebar Gadget thing because I am able to get what I want done more quickly. As per usual process it may be a day or two before it is actually live on the gallery. Here is what version 1.1 of the Live QnA Gadget now sports:

  • Updated interface.
  • New – more spiffy – thumbnail.
  • Saves data between launches.
  • Shows all the answers to a question (listed out)
  • Has option to show only UNASWERED questions. smile_nerd

What I found I could not address or not address very easily so I will not attempt to add them to this gadget are:

  • Ability to answer the question right in the gadget. There is no interface to post the question to that is "documented." So unless/unitl this is documented this is not possible.
  • The ability to link to a profile. If you do not know the profile GUID then you cannot link to a profile at all.
  • The ability to show questions based on the number of answers they have. The only option available is answered or unanswered.

Please let me know what you think about this gadget. Do you like the QnA service, use it a lot, like the idea of a gadget on it, or what…

Anyway, here is a sneak peak at the new interface and thumbnail:

The Thumbnail

thumbnail

The updated gadget:

gadget

The update fly out – with new graphics:

flyout

The updated settings:

settings

Live QnA Gadget (v1.0) is now live

My newest gadget the Live QnA Gadget is available for download.
Please download it and let me know what you think. Also, here are some additional ideas I have for this gadget that I did not get into the initial version:
 
  • Better internface for browsing the questions.
  • An option to show only UNANSWERED questions or questions with only 1 to 5 answers.
  • The ability to navigate the answers given on questions directly from the flyout.
  • Adding a link to the authors name so you can see their profile
  • Settings to be saved between launches. Right now if you reboot or unload and reload the gadget you will have to go back into the settings and re-enter your tags and refresh settings.

If you have other ideas for this gadget, please let me know.

Live QnA Gadget

I have been spending the last few weeks trying to get an RSS gadget to work. The first project I have completed is Live QnA – because I really like this service. smile_teeth

Anyway the new Live QnA Gadget is not yet downloadable as it is still going through the approval process with the Live Gallery team. As soon as it is available it will appear on my gadgets list on this page. This gadget is really geared for ANSWERING questions. The other gadgets I have seen are geared to asking questions and tracking your QnA stuff, so this one is really focused on people that like to answer the questions on QnA Live.

Anyway, here is a sneak peaks at my latest gadget…

The main gadget form shows the total number of questions for which you have not yet reviewed. You can also have the option to immediately check (Refresh) for any new updates. You can also completely reset and show all items even those you have already viewed.

image

Here is the Settings page where you can specify the tags you are interested in tracking. You can list as many tags as desired. You can also set the refresh rate – how often the gadget checks for updates.

NOTE: The default settings for tags is blank which means that it defaults to the most recent questions posted.

image

Finally, when you click on the Live icon you can view each question – which is also a hyperlink directly to the question on the Live QnA site. While reviewing questions when you click the Next button the item pops off the new items list.

image

Anyway, this new gadget should be posted in the next 24 to 48 hours. Keep an eye out for it and let me know what you think.

Answering the Reviews

As many of you who follow my blog know, I do read the comments and take suggestions that make The Magic Folder better. However, I have seen a number of people with similar requests over the last month that I want to address:

1) Sorting by tags or Filename – This is a common request, for example, to not only move a .DOC extension to the Documents folder but then based on the Tag or Filename further sort the file to another sub folder. This is a very difficult proposition to implement in a gadget. There are so many permutations to this request it becomes a mountain of a task to address:

– Tags only or filename and tag?
– How deep should the folders go based on tag or filename?
– If organizing by tag what happens of it meets more than one tag to folder redirection option?
– And much much more…

I think the problem is many of us love organization by sub folder…count me in that crowd, but Vista is making that less and less important with the powerful desktop search tools. The issue boils down to whether sub folders are even important anymore in Windows Vista. If you add tags to your files such as adding "2007", "San Diego" and "Vacation" to your JPEG images from your vacation, they can be in your pictures folder with everything else. To find them you can create/save a Windows Search to find the images with those tags – and you can even sort by date and they should remain in order they were taken – even though they are mixed in with all your other pictures in a large folder.

Not to dismiss the idea, I understand the desire to sort by sub folder because it is "safer" and more assured to segregate files based on purpose or content. This is an area that takes very careful consideration to implement and if I address it, it needs to be done in a way that keeps the Gadget a Gadget and does not turn it into a full blown application.

2) Cannot be customized – This I think is due to people not understanding how to enter into the options dialog to add their own folder, extensions and change things around from the defaults. I cannot address this any better than I have.

Customize

3) Need File Extensions Turned On – Version 1.0 through version 1.5 needed to have the file extensions enabled in the operating system for it to function. Version 1. changed that.  If you read further in my blog you will find the revelation that hit me – and it started with a comment from the gadget page.

These are the most common requests that I see but I do want everyone to know that you can always contact me with additional comments, concerns, or request that you have.

PowerPoint SideShow Gadget (v1.0)

Wow, what a difficult experience.  After several days of writing a SideShow Gadget (follow link for explanation of SideShow), it was even more grueling to get the Deployment Project for the darn thing to work. SideShow gadgets are not quite as easy to create as SideBar gadgets.
 
Anyway, I posted my very first SideShow Gadget (PowerPoint SideShow Gadget) this afternoon – should be available early tomorrow (hopefully – it should appear in my Gadgets list as soon as it is live). The Gadget is SUPER SIMPLE. When you load it on your SideShow enabled device and start it, it will find an open instance of PowerPoint (needs to already be loaded in memory and ready to go with a presentation), it will start a PowerPoint slide show and then using the left and right buttons on the device you can move forward and back through the presentation.
 
Since Windows Mobile 6.0 Devices with Bluetooth – as per my understanding – will support SideShow, you technically can control a presentation from your mobile phone. I do not have a SideShow device – yet. I was using an emulator to test my gadget – and that is a whole other issue. For those interested, here are some links I used to get me started down the road with a SideShow gadget:
 
 
It is not an easy journey. The technology is very new and the documentation is just not as common. If you decide to embark on the journey – Good Luck! If you have questions for me, I will see what I can do as well.