Friends

Thursday, January 27, 2011

Getting Started With Windows 7 Gadgets

I spent the last few days playing with gadgets in Windows 7 and learning the basics to build one.  The basic structure is surprisingly simple, requiring only an XML configuration file and a HTML file for the UI and logic.  Gadgets are actually just little web applications running inside of Internet Explorer, so they can leverage CSS and JavaScript as well. I found a few good gadget tutorials to get started:
Here is a quick tutorial for building a gadget.  I’m doing this in Windows 7, but I think it will work on Vista too.
  • Navigate to C:\Users\YourUserName\AppData\Local\Microsoft\Windows Sidebar\Gadgets
  • Create a folder called HelloWorld.gadget
  • In the folder create a file called gadget.xml and helloworld.html
Add the following code to gadget.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<gadget>
  <name>Hello World</name>
  <version>1.0.0.0</version>
  <author name="Your name">
    <info url="http://www.mysite.com/my-gadget" text="mysite.com"/>
  </author>
  <copyright>&#169; 2010</copyright>
  <description>This gadget says hello!</description>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="helloworld.html"/>
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0"/>
    </host>
  </hosts>
</gadget>
Add the following code to helloworld.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<script type="text/javascript">
function DoInit() {
    document.body.style.width = 90;
    document.body.style.height= 55;
    document.body.style.margin=0;
}
</script>
<body onload="DoInit();">
<br>
<center>Hello World!</center>
</body>
</html>
After code is added to those files you can try the gadget out.  Go to Control Panel\All Control Panel Items\Desktop Gadgets and you should see your newly created gadget.  Give it a click and it will pop up on the side of your screen.  That’s all there is to creating a simple gadget.  Obviously this gadget isn’t incredibly useful, but it gives you the basic idea to build on.

0 comments:

Post a Comment

#
### ###