How to create a Vista Sidebar Gadget.
Posted by archworx on November 5, 2006
I was asked to create a quick POC (proof of concept) for a MS Windows Vista sidebar gadget. I did the usual Live.com search and discovered a few posts.
An interesting post was by a guy called Daniel Moth. It had lots of useful information, but unfortunately it just didn’t work for me. There seems to be something missing in the xml file accompanying the gadget, as well as some rubbish text in the file, so your gadget won’t work but you won’t get an error.
I found a more uptodate sample on MSDN. This was also on Daniel Moth’s blog, so many thanks to him.
Now here is my version of the hello world sidebar gadget.
Step 1:
Create the following HTML file:
<html>
<head>
<title>Hello, World!</title>
<style>
body {
width:130;
height:50;
}
</style>
</head>
<body>
<span id=”gadgetContent” style=”font-family: Tahoma; font-size: 10pt;”>Hello, World!</span>
</body>
</html>
Call it HelloWorld.html
Step 2:
Create the following XML file:
<?xml version=”1.0″ encoding=”utf-8″ ?>
<gadget>
<name>Hello World!</name>
<namespace>Example.You</namespace>
<version>1.0</version>
<author name=”Your Name”>
<info url=”www.example.com” />
</author>
<copyright>2006</copyright>
<description>My first gadget</description>
<hosts>
<host name=”sidebar”>
<base type=”HTML” apiVersion=”1.0.0″ src=”HelloWorld.html” mce_src=”HelloWorld.html” />
<permissions>full</permissions>
<platform minPlatformVersion=”0.3″ />
</host>
</hosts>
</gadget>
Call this file Gadget.xml
Step 3:
Create a folder called Helloworld.Gadget
Step 4:
1.Simply copy”%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets” and paste in Windows explorer address bar.
2. When you get to that folder Copy and Paste the “HelloWorld.Gadget” folder there.
Step 5:
Add the gadget to your Sidebar and your done !
That’s how easy it was to create a sidebar gadget. Obviously, you want your gadget to do more than just display “HelloWorld”. You have infinite possibilities. Anything that con be done with DHTML or .NET can be done on a sidebar, you just have to make sure you have the right permissions.
How do I create a gadget with .NET?
If you check out the MSDN link you should find it there, and if I get something done soon, I’ll surely post it.
Also check out the Gadget team blog.
Anyway, that’s it for now, Happy developing!
Daniel Moth said
Hi there.
I am very interested in what aspect of my sample doesn’t work for you (so I can fix it if need be). I know my code works since I demo it at my screencast [1]
Do you get the gadget in the picker? Does it not render after that? Do you remove/re-add the gadget after every change? Are you using my files directly or recreating them? What version of Vista are you on?
Cheers
Daniel
[1] http://channel9.msdn.com/ShowPost.aspx?PostID=256390
Sapinder said
I am not seeing it up in the gadget picker after placing th egadget in the “%userprofile%\appdata\local\microsoft\windows sidebar\gadgets”!!
archworx said
That is probably because your gadget.xml file has some rubbish characters or something.
If you checked and still had problems, please get back to me.
Todotnet Blog : My First Vista Gadget said
[...] How to create a Vista Sidebar Gadget [...]
Vincent Ciotola said
The problem *is* with messed up characters in the XML. They’ll be there if you just copy and paste the text from the page, but it works fine if you just type it yourself.
John said
So now that we have the wonders of the gadgets in vista, has anyone figured out a way to make a gadget that will monitor the CPU usage on a different machine (ie a server)?
Fegelein.com » Blog Archive » Windows Vista; Go go gadget said
[...] How to create a Vista Sidebar Gadget [...]
Henning said
i would like to create a gadget where i can trace packages from my postal service. there is a trace function on the firms site, and i want to make that function into a gadget. can anyone help me do that?
Steve said
My post is in reference to Daniel Moth.
I tried your tutorial and can not get Vista sidebar to see your gadget.
I copied and pasted your files from your blog exactly and they do not show in the Sidebar. I am running Vista 5600. I would have commented on your blog but there was no commenting on your tutorial.
I have not tried adding the version here yet but I have had troubles with new gadgets being added.
Thanks for the time to do your tutorial and the author of this blog for their subsequent follow-up.
It gives me a better understanding how how gadgets work.
Thanks
Steve said
I just followed this one also and it is not showing up in gadgets either.
There must be something that is stopping NEW gadgets from appearing…?
Any ideas as I am sure both authors have their files correct with the XML and HTML.
TIA
David Ching said
It worked for me after doing:
1) Use Notepad to fix quote characters in both the XML and HTML file. The quotes were sometimes backquotes/frontquotes and not the normal quote. Simply searching/replacing until both the HTML and XML file loaded correctly in IE fixed this.
2) Rename HelloWorld\ folder to Helloworld.gadget\. I missed the part that said the folder had to end in “.gadget”.
Remcovg said
replace the “” with new “”.
T_man said
I also had the problem of not having the gadget showing up in the gadget manifest. When i saved the file at UTF-8 instead of standard unicode it worked fine. Thanks for the instruction.
Adam said
DONT copy and paste. That was the issue for me.
Type it out, it’ll work.
Cool Gadgets said
wow…i like it..i really have to put that program in my pc soon…if i have the time
kurian said
I have created a gadget to identify the status of certain releases of software. Everyting works fine except for the flyout part. When i click the flyout link, the whole of tge main page of the gadget just wipes out for a second. How can i correct this?
orryb said
i don’t want to type everthing, please make a download sample
ant said
tried everything suggested even typing it all out and no luck, there must be something else causing the problem
freeeeringtones said
popular free ringtones
http://www.thehotstop.info
signature…
ghostface039 said
Does anyone know who to create a gadget using asp.net?
moksha said
too good article.
Shun said
My computer doesn’t have the folder(AppData)? Is it on all?
Shun said
Woops an update. Here we go. The missing folder is actually “Gadgets”.
RedhatJames said
lets say you like to load a graph from a website into the gadget,you would need different setup right?
SEOTACTICS said
Never Pay for any Ebook, Script or Software on Making Money Online, SEO, Internet Marketing, Affiliates Stuffs again. Save thousands of dollars and get them for free. Our goal is to share every good piece of information that will make you wealthy, sooner or later.
http://warezrepublic.net
Stephanie said
hello!
unfortunately i have the same problem that i cant see my “helloWorld”-gadget in the gadgets list. i did everything what is described here but it still doesn’t work, what could be my problem?
would be great if anybody can help me.
Stephanie said
hmm i dont know what i did.. but it works now…
by the way, thank u for the helloworld-example ;o)
tv brackets said
I’m done. ! Now I’m ready for the next .NET lesson. Thank’s
Bishoy Adel said
Done,
My proplem was in the .xml file -douple qoute- in “1.0″ …..
Thanks alot mr.Mohamed
My first Windows Sidebar Gadget .. « Bishoy’s Weblog said
[...] All thanks goes to – Microsoft MVP – Mr.Mohamed and his tutorial [...]
Ford said
Hello – I just wanted to say you are welcome to upload the Vista gadgets on our site http://www.gadgetsdownload.com , we try collect a lot of good once. another a great site here for gadgets build beginners thanks.
andru said
hi, I am trying to make a piano gadget.. But I have no idea about this gadget thingy and the XML language.. Do you know any great links for dummies like me? Or e-books perhaps? Because I need it real quick..
The program is due next week..
Anyway, the problem is the quote sign.. Just replace the rubbish character and replace the quote… Thank you
Musmula said
Good post, thank you. I am planning to create one.
jaren said
6gv42D dfv078fnw8f934ndvkg2l
dato said
I have done this, but sidebar can’t recognize it:(
Sam said
Get the Gadget book Creating Vista Gadgets and all your problems gone
Bray said
I keep getting this error when I save my XML file, it says I have unproper ANSI somethingorother. And it suggests I save it as one of the files in the drop down menu. So I click ok and it will save it. But It doesn’t work
I’m really interested In making my own gadgets too.
gadgetsguy said
Get teh CREATING VISTA GADGET book here
http://www.amazon.com/Creating-Vista-Gadgets-JavaScript-Silverlight/dp/0672329689
jdestef said
ive tried replacing all the quotes, double checking my filenames, closing and reopening the sidebar and i just cant get the gadget to show under “Add Gadgets”… it’s like its not there.
lame.
natex said
Man, There are something wrong with “”
gadget !! - سوالف سوفت said
[...] How to create a Vista Sidebar Gadget. Creating Gadgets: Part 1 __________________ ownersınnı WP | Contact Me [...]
Ahsan said
Hi there , does anyone know how can you call a cs file from a html?….
I have created a sidebar in html,xml etc and programmed in c sharp all the information which is required for the webservice(usng microsfot studies 2008, name of file.aspx.cs) which connects to the firms sever. So once again the problem i am haveign is that i cant seem to run the cs file into my vista sidebar> hope thats clear.
Can anyone please help me out here thanks alot
Dusty said
This article could also assist: Create a Vista SideBar Gadget
Kevin said
Can’t get it to work either. Have changed the quotes, gone through and checked the coding, and it still refuses to turn up in gadgets.
May give up on this.
Kevin
Kevin said
Still can’t get it to work.
Managed to get it to add gadgets, but it didn’t do anything. Tried to amend it to do something, and it vanished from Add gadgets. After two days work, I’m back to start. At present, it is an ex-gadget.
Anyone know a good simple program for building gadgets? There must be a market for a simple gadget building program.
Kevin
nivedha said
hi there,
i like the sidebar gadgets it is nice to add gadgets and is fun to have special stuff.
nive
satish said
How can i change the gadget icon of the installer package
underwareul said
I tried to use your code and it blew up mars!!!
Can I get a rebate?
gadget said
Of this field, addressed A?Number (SSN) and, Perhaps it was.Vehicle State troopers, and the surrounding.When my home gadget, that search engine Thats saving Its.Errands faster Your, now Search engine.,
Adel Aly Shaaban said
It works fine !!!!! Thanks so much
TJ Martin said
First off….You cant just copy and paste…if you do..you have to change all the quotes because they are italic on here and cant be in your editor, also make sure there is not any added symbols. i noticed that some quotes were changes to question marks.
secondly…make sure you format it to UTF-8. if you save it in standard format its ANSI and will not work.
other than that..works perfectly
sam said
the xml should be named ‘Gadget.xml’ NOT ‘HelloWorld.xml’
That is the final thing I did after all other “” and UTF-8 tweaks and it worked
Chris Satchwell said
This is brilliant! I managed to do it first time round
TJ Martin said
Yes I have made a few gadgets since that post and acutally don’t really use them so much as gadgets anymore, I incorporated them into other useful things such as a toolbar. On my clan toolbar I now can see who is on what server, how many, and another for my Ventrilo voice chat. It keeps everything where I need them and free’s up the desktop for other projects.
ps4 said
Wow – isn’t technology great? That thing looks awesome!
TJ Martin said
Oh yea it is, There are so many different things you can do with these gadgets other than leave on your desktop. Good thought tho, but how many people sit on their desktops, they are more than likely on the net which then you cant really use them. thats why I came up with making the toolbar and everyone can use it even if they are running older versions of windows.
pc repair services said
Wow
I found this place on yahoo searching for something else entirely- and now I’m going to need to go back and read the archives XD So much for spare time today, but this was a truly great find!!!
Connor Vorgarth said
Useful views and intriguing post. I really enjoy music a lot. I have marked it to return later. If at first you don’t succeed-skydiving is not for you