How To Create a Windows Vista Gadget for Vbulletin recent Threads

Greg · 06-29-2008

This article will explain how to use provided templates to create a Windows Vista Desktop/Sidebar Gadget. This is only one way of pulling this off, there are many ways to do this. But this is what I got so far, so your mileage may vary depending on your needs and wants. We do it like this Motorcycle Forum Windows Vista Gadget.

Using the javascript output of external.php, we will put up an image and a scrollable list of the recent threads from a vBulletin forum, that updates at an interval you can set, on your member's desktops.

You will need an image file. We used a 120px × 90px gif image. There will also be an xml file and a html file. After sourcing your image and editing the xml and html file, we will combine the three files into a windows vista gadget install file which is simply zipping the file and changing the extension from .zip to .gadget.

Ok, on the building th gadget. First we will edit our XML file. As you will see, the xml fields are clear on what each needs to contain, so edit the example below and save it as gadget.xml using a text editor.

One thing worth noting. The next file we edit will be the html file. The name of this file must match the name of the html file in the ***8220;base type***8221; field. Change ***8220;MyExampleGadget***8221; to match your html file name. It's a good idea to name the HTML file clearly and then use the same name, but different extension of course, when you create the gadget install with zip.

Code:

<gadget>
  <name>RiderInfo Threads</name>
  <version>1.0.0.0</version>
  <author name="example.com">
    <info url="www.example.com" />
  </author>
  <copyright>© example.com.</copyright>
  <description>"Recent threads posted on example.com.</description>
  <icons>
    <icon height="48" width="48" src="icon.png"/>
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="MyExampleGadget.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

Now that we have that, lets make the html file that is the gadget functionality. Edit this and save it with the same name you indicated in the ***8220;base type***8221; field of the gadget.xml file. You edit in the places where the word example apears.

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>example.com Motorcycle Forum Recent Threads</title>
<style type="text/css">
body
{
	margin: 0;
	width: 120px;
	height:275px;
	font-family: verdana;
	font-weight: normal;
	font-size: small;
	font-size: 75%;
}
#gadgetContent
{
	margin-top: 20px;
	width: 120px;
	vertical-align: middle;
	text-align: center;
	overflow: hidden;
        }
.linktd
{
	background-color: #F5F5F5;
	color: #000000;
	font-family: verdana;
    font-weight: normal;
    font-size: 75%;
    width: 100%;
    font-family: verdana;
}
.linktd a:link
{
	background-color: #F5F5F5;
	color: #990000;
	font-size: 75%;
}
.linktd a:visited
{
	background-color: #F5F5F5;
	color: #990000;
	font-size: 75%;
}
.linktd a:hover
{
	background-color: #F5F5F5;
	color: #000000;
	font-size: 75%;
}
.linktd a:active
{
	background-color: #F5F5F5;
	color: #99000;
	font-size: 75%;
}
.linkdiv
{
    width: 100%;
    font-family: verdana;
    font-weight: normal;
    font-size: 75%;
	background-color: #F5F5F5;
	text-align: left;
	height:185px;
	overflow: auto;
}
</style>
<script type="text/jscript" language="jscript">
// Initialize the gadget.
function init()
{
	var oBackground = document.getElementById("imgBackground");
    oBackground.src = "url(http://www.example.com/RiderInfo-12090.gif)";
	var t = window.setTimeout('refresh()', 900000);
}

function refresh()
{
    window.location.reload( true );
	var t = window.setTimeout('refresh()', 900000);
}
</script>
<script type="text/javascript" src="http://www.example.com/forums/external.php?type=js"></script>

</head>
    <body onload="init()">
<div align="center">
		<g:background id="imgBackground">
            <!-- <span id="gadgetContent">Hello World!</span> -->
		</g:background>
</div>
<div class="linkdiv" align="left" width="100%">
<script type="text/javascript">
<!--
// Copyright 2008 - Greg Lynch Computer Help Forum - www.cpurigs.com
// Demo at http://www.riderinfo.com/forums/showthread.php?t=8009
// Do not remove this copyright

// edit number of links to display.
var num_Of_Links = 10;

// edit Forum Link. Include trailing slash.
var forumLink = "http://www.example.com/forums/";

// Nothing to edit past here unless you know what you are doing.

var threadLink = forumLink + "showthread.php?t=";
<!--
document.writeln('<table align="left" cellpadding="2" cellspacing="1" width="100%">');
for (i = 0; i < num_Of_Links; i++)
{
	document.writeln('<tr><td width="5%" align="center" valign="middle">&bull;<\/td><td class="linktd" align="left" valign="middle">');
	document.writeln('<a href="' + threadLink + threads***91;i***93;***91;"threadid"***93; + '" target="new">' + threads***91;i***93;***91;"title"***93; + '<\/a>');
	document.writeln('<\/td><\/tr>');
}
document.writeln('<\/table>');
//-->
</script>
</div>    
</body>
</html>

Now with all three files complete and saved, the image, the xml and the html for your Vista Gadget, let's zip them and create the gadget installer.

Select all three files in your zip program and zip them to a file named the same as your html file, but with a zip extension and leave out the .html part. Now rename the file from .zip to .gadget. There you go, you now have an installer for your gadget.

Congratulations! Now your members can keep up with new threads on your forum without opening a browser to see what's new.

This works on Windows Vista. I have come across talk of gadgets for XP, but I don't know it that is the same or if it even exists as an option.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode