Introduction to writing Windows Sidebar Gadgets - my random notes

  • Article

It's week one for me getting back to dev-land and I have to admit that it's not been the easiest experience, but it is getting there now. I thought it would be worthwhile noting down my thoughts and pointers for people following the same path I am. This week I am working on  a proof of concept for a sports company here in the UK producing a Vista sidebar gadget that monitors and displays (pseudo-) realtime scores and information for a popular British sport.

If you want a great overview (much better than below) then watch the Mix06 session at:

 https://sessions.mix06.com/view.asp?pid=BTB027  

Covers in good detail the value of gadgets, the how-to, design considerations, and a very cool sport gadget produced by Fox Interactive Media

Getting started...

Step 1: Get the OS, bits and tools

  • First of all you will need to get a Beta 2 build or later of Windows Vista (if you have an MSDN subscription this is normally best).
  • A copy of Visual Studio such as the free Visual Web Developer Express product OR (like me) used this opportunity to test out Community Technology Preview (CTP) of Expression Web Designer to write the HTML and Javascript

Step 2: Read the tutorials and create a Hello World type app

  • Developing gadgets is a  relatively simple affair if you understand <html> and the odd var foo = 1; That said, it's simplicty can often be quite frustrating as you try to develop rich WinForm type functionality using the limited framework available to you.
  • First things first - Hello World is a great way to start and there is an excellent tutorial over on MicrosoftGadgets.com - https://microsoftgadgets.com/Sidebar/DevelopmentOve...  
  • For more detailed stuff like handling docking/undocking, transitions and modifying settings you have to dig into the Sidebar object model. This can be found - https://msdn.microsoft.com/library/default.asp?url=...

Step 3: Bang your head on the desk because Javascript is doing your head in (that's Northern Irish speak for 'I'm struggling') :-)

  • And breathe....
  • Move on

Step 4: Testing your gadget

  • Unfortunately there is no Visual Studio support for sidebar gadgets so it is not as easy as F5 on the keyboard.
  • The majority of my gadget is not using the Sidebar Gadget Object Model so I am finding it easier to  use Visual Studio and its debugging capabilities to write JS and HTML. And then when I'm ready for proper integration I copy my code into a gadget harness (a dummy project with basic functions such as settings, docking/undocking). Once I get a chance I will package it up for others to use as well
  • When testing in the sidebar, copy your gadget to %UserProfile%\AppData\Local\Microsoft\Windows Sidebar/Gadgets and then click the + symbol and instantiate your gadget.
  • You can run multiple instances and each instance can be different to allow you to contrast and compare changes

 Random stuff

  • I haven't used the Forums but the are a good source to ask questions and it looks like there are a few experts developing in the community and a few MS bods on there as well - https://microsoftgadgets.com/forums/
  • A great blog for al things gadgets (Live and Vista) and one of the top posters on the Gadgets forums - https://livegadgets.net/ 
  • If you want to hack, I mean admire the coding abilities of the gadget developers at MS, check out the Windows Sidebar\Gadgets directory in Program Files. It will give you a good idea of what you can do locally on the machine and out onto the www.

 tags: vista, sidebar, gadgets, visual studio, expression