<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Maze! Gadget</name>
<version>1.0.0.1</version>
<author name="Written by Dan Rollins">
<info url="DanRollins.com" />
<logo src="DanRollins.jpg" />
</author>
<copyright>© 2009 by Dan Rollins</copyright>
<description>Maze! Gadget.
An amazing gadget of incredible complexity, brought to you by the same people who produced "Pentominoes" and "Limericks for Fun and Profit." Look for us at finer gadget stores everywhere.
</description>
<icons>
<icon height="57" width="90" src="icon.png"/>
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="Maze.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
Gadgets for Windows Sidebar Manifest describes each section. I have only a little to add:
<html>
<head>
<script type="text/javascript" src= "maze.js"></script>
<title>Maze! - By Dan Rollins</title>
</head>
<body LEFTMARGIN=0 TOPMARGIN=0 onload="DoGadget();">
<table border="5" cellpadding="0" cellspacing="0"><tr>
<td id="mazeDisplay"></td>
</tr></table>
</body>
</html>
And the DoGadget() function includes lines like:
function DoGadget() {
gnHigh = System.Gadget.Settings.readString("nHigh");
gnWide = System.Gadget.Settings.readString("nWide");
System.Gadget.settingsUI = "settings.html";
System.Gadget.onShowSettings = DoStopForSettings;
System.Gadget.onSettingsClosed= DoGadget;
if (gnHigh=="") gnHigh= 12;
if (gnWide=="") gnWide= 20;
document.body.style.width = (gnWide * 5) + 12;
document.body.style.height= (gnHigh * 5) + 12;
// ... etc ...
}
The key is line 5 which identifies the settings HTML file and thus makes the "wrench" button available. When the user clicks the wrench, there will be an onShowSettings event, and you may need to take special action at that time (the Maze! gadget needs to stop the animation). Line 6 sets up a handler for the Maze gadget. And line 7 indicates what to do after the settings box closes (it fires the onSettingsClosed event).
<html>
<head>
<style> body{ width:175; height:75; } </style>
</head>
<body onload='LoadVars();'>
Height: <input name="ctrlHigh" type="text" size="3" value="12" /><br />
Width: <input name="ctrlwide" type="text" size="3" value="20" /><br />
</body>
<script>
function LoadVars() {
var nHigh = System.Gadget.Settings.readString("nHigh");
var nWide = System.Gadget.Settings.readString("nWide");
if (nHigh == "") nHigh = 12;
if (nWide == "") nWide = 20;
ctrlHigh.value = nHigh;
ctrlWide.value = nWide;
System.Gadget.onSettingsClosing= SaveVars;
}
function SaveVars(event) {
if ( event.closeAction == event.Action.commit ) {
var nHigh = ctrlHigh.value;
var nWide = ctrlWide.value;
System.Gadget.Settings.writeString("nHigh", nHigh);
System.Gadget.Settings.writeString("nWide", nWide);
event.cancel = false;
}
}
</script>
</html>
The LoadVars() function reads from the built-in per-instance gadget settings storage using readString() and once the dialog is OKed, saves the new values back to the storage, where they can be read in the main program (in DoGadget(), above).
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (9)
Commented:
Author
Commented:-- Dan
Commented:
Congratulations! Your article has been selected as an Editor's Choice!
ep
PE
Commented:
Author
Commented:Is it possible that sidebar gadgets have been disabled on your system? See this link for related information. If that is not the case, I suggest that you try the "getting started" gadget in my earier article here, and see if that one works on your system.
View More