Page 1 of 1

Creating Windows Sidebar Gadgets How to create your own gadgets for the Windows Vista Sidebar Rate Topic: -----

#1 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 782
  • View blog
  • Posts: 5,101
  • Joined: 08-December 08

Posted 04 June 2009 - 09:11 PM

When Windows Vista was released in early 2007, many of the users mentioned a new feature in the OS Ė the sidebar. The sidebar contained multiple useful elements, called gadgets, that can perform practically any activity. Some of them will show you the weather in your town, others will just display the time, some will display the network traffic.

Basically, the gadget capabilities are infinite. Many of the developers were wondering how these gadgets are created. Surprisingly, you wonít need a lot of programming experience to create a gadget. A solid understanding of XML, HTML, CSS and VBScript will be pretty much everything you need to create your own gadget for the Windows Sidebar.

So what tools do you need to create a gadget? You will only need a plain text editor (the regular Notepad or Notepad++ is more than enough).

Now, letís start with your own gadget. Letís create just a simple gadget that will display a text. First of all, letís see what files are needed for a gadget (all of those are created by you):

gadget.xml
This is the main gadget manifest file. You must always name it gadget.xml. This file contains the information about the gadget, like the developer name, gadget version, gadget icon and the most important part Ė which HTML file is referenced as the main gadget file. This file has a standard structure that should not be changed. This file has to be a valid XML to be recognized as a gadget manifest, so I would recommend validating it first to see if it is a valid XML (does not contain illegal characters or any structural mistakes).

icon.png
Basically, this is the icon for the gadget that will be displayed in the gadget manager. You can either download a royalty-free image or create your own for this purpose. The recommended resolution for this image is 64 x 64, however larger images are also supported, but will be automatically resized, therefore the image quality may become unacceptable.

gadget.html
This is the main gadget file that has all the elements of the gadget structure. This file will Ďdecideí what your gadget is doing and your imagination is the limit in this case. It has a recommended structure, however, you can change it a little bit. This file can have any name, but must have the HTML file extension.

So, letís start with creating the gadget.xml file. Take a look at the file structure:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>GadgetTest</name>
  <namespace>microsoft.windows</namespace>
  <version>1.0.0.0</version>
  <author name="Core">
	<info url="http://www.dreamincode.net" text="Dream.In.Code" />
	<logo src="icon.png" />
  </author>
  <copyright>© 2009</copyright>
  <description>A sample gadget.</description>
  <icons>
	<icon width="64" height="64" src="icon.png" />
  </icons>
  <hosts>
	<host name="sidebar">
	  <base type="HTML" apiVersion="1.0.0" src="gadget.html" />
	  <permissions>full</permissions>
	  <platform minPlatformVersion="0.3" />
	</host>
  </hosts>
</gadget>



All of the parameters here can be changed to anything you want, depending on the gadget purpose and developer. As you see, all the tags are self-descriptive so it is easy to understand which tag holds specific information. The [/b]<base>[/b] tag has that specific reference to the main HTML file. You can change it depending on the file name.

Save this file as gadget.xml. As mentioned before, you MUST NOT change this file name or the gadget wonít work.

Now, letís create the HTML file for the gadget. As we have a very simple gadget that will only display some text, I used this HTML code (with a very small CSS part that will set the dimensions of the gadget area).

<html>
<head>
	<title>GadgetTest</title>
	<style>
		body{width:120;height:90}
	</style>
</head>
<body>
Hey, this is my first gadget!
</body>
</html>



This is absolutely plain HTML with some CSS. Simple so far, isnít it? The thing is that every other gadget is created the same way! Yes, some of them include more advanced CSS and VBScript or Javascript elements, but the main structure building principle remains the same.
Save this file as gadget.html and place it in the same folder as gadget.xml. Now, you can change the name of this HTML file but make sure you also change the referenced name in the gadget.xml.

The thing you are missing now is the icon. I attached a sample icon to this tutorial, so you can use it with the gadget.

Now, there are a few final steps you need to take to pack the gadget. You can distribute the gadget in two ways. The first one is not really convenient. You have to navigate to this folder:

%userprofile%\appdata\local\microsoft\windows sidebar\gadgets

You can just enter this string in the Run dialog (Win+R) and it will get you to that folder. There you have to create a new folder with the .gadget extension. Yes, extension for a folder. You can name it as you want since it does not set the gadget name. Copy all three created files in that folder. Now, in the Gadget Explorer window (available if you press the + sign on the sidebar) you can see your gadget.

There is another method that will allow you to create an automatic gadget installer. For this, add the three created files to a ZIP archive (you can use the regular Windows Send To -> Compressed (zipped) folder method or use an archive creation tool). You can name the file the way you want, it just has to be a ZIP. When the archive is created, you should change the file extension to .gadget. Now that youíve done this, you can distribute this file and it will automatically install your gadget.

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 1
  • +

Replies To: Creating Windows Sidebar Gadgets

#2 xheartonfire43x  Icon User is offline

  • D.I.C Regular

Reputation: 46
  • View blog
  • Posts: 454
  • Joined: 22-December 08

Posted 10 June 2009 - 01:00 PM

The simple gadget didn't work on either of my machines. I tried it against Windows Vista Ultimate 32-bit and Windows 7 32-bit.
Was This Post Helpful? 0
  • +
  • -

#3 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 124
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Posted 12 June 2009 - 05:02 AM

Cool tutorial! Mac dashboard widgets are made the same way with HTML and stuff. Vista is stealing the dashboard and the dock. ;D
Was This Post Helpful? 0
  • +
  • -

#4 xheartonfire43x  Icon User is offline

  • D.I.C Regular

Reputation: 46
  • View blog
  • Posts: 454
  • Joined: 22-December 08

Posted 12 June 2009 - 06:11 AM

View Postcrazyjugglerdrummer, on 12 Jun, 2009 - 04:02 AM, said:

Cool tutorial! Mac dashboard widgets are made the same way with HTML and stuff. Vista is stealing the dashboard and the dock. ;D


What are you talking about Vista is stealing the dock? Vista Docks are not made by Microsoft at all, and Windows 7 is the exact same way, except that they don't have a sidebar... just the gadgets.
Was This Post Helpful? 0
  • +
  • -

#5 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 782
  • View blog
  • Posts: 5,101
  • Joined: 08-December 08

Posted 17 June 2009 - 02:10 PM

View Postxheartonfire43x, on 10 Jun, 2009 - 03:00 PM, said:

The simple gadget didn't work on either of my machines. I tried it against Windows Vista Ultimate 32-bit and Windows 7 32-bit.


Can you see the gadget in the Gadget Explorer?

View Postxheartonfire43x, on 12 Jun, 2009 - 08:11 AM, said:

View Postcrazyjugglerdrummer, on 12 Jun, 2009 - 04:02 AM, said:

Cool tutorial! Mac dashboard widgets are made the same way with HTML and stuff. Vista is stealing the dashboard and the dock. ;D


What are you talking about Vista is stealing the dock? Vista Docks are not made by Microsoft at all, and Windows 7 is the exact same way, except that they don't have a sidebar... just the gadgets.



If by the dock you mean the sidebar, then it is actually developed by Microsoft.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1