System.Gadget.Flyout.file = "MyFlyout.html";
The HTML for the flyout panel is nothing special... any collection of input items and display areas. You will need to provide the script code to support the functionality you want, and you'll most often want to provide an onload handler to run code that should be executed when the flyout opens.
System.Gadget.Flyout.show= true;
It does not require focus or user interaction; for instance, if you create a gadget to remind yourself about the afternoon staff meeting, it could be opened by a window timer. In that case, I suggest that you use a full-screen layout with big red letters. The handy System.Sound.playSound() method could be used to crank up some John Phillips Sousa selections, if that's what it takes to wake you up.
<html>
<head>
<script type="text/javascript" src="common.js"></script>
<title="Flyout Gadget Main"></title>
<script type="text/jscript">
function DoInit() {
System.Gadget.Flyout.file = "MyFlyout.html";
window.setTimeout("ResizeWindowTo('gadgetDiv');", 1);
}
function DoClick() {
System.Gadget.Flyout.show = true;
}
</script>
</head>
<body onload="DoInit();">
<div id="gadgetDiv"><table border="5" ><tr>
<td><input type=button onclick="DoClick();"
value="Click Me For Flyout!" />
</td></tr></table>
</div>
</body>
</html>
Which produces this:
document.body.style.width = 100;
document.body.style.height= 50;
window.setTimeout("ResizeWindowTo('FlyoutContentDiv');", 1);
...
function ResizeWindowTo(sElemId) {
document.body.leftMargin = 0;
document.body.topMargin = 0;
var oElem = document.getElementById(sElemId);
var nHigh = oElem.offsetHeight;
var nWide = oElem.offsetWidth;
document.body.style.height = nHigh;
document.body.style.width = nWide;
}
The issue is that HTML elements don't always know their own size, and the offsetHeight property, for instance, is often 0. But once the element has been rendered, you can read the values and then apply them to the whole window (in this case, document.body). By using window.setTimeout() as in line 1 above, I give the document a chance to "pre-render" the content, and that lets me get useful measurements a millisecond later.
<html>
<head>
<script type="text/javascript" src="common.js"></script>
<script>
function DoInit() {
document.body.style.width = 300; // fixed width, variable height
BuildInfoTable();
window.setTimeout("ResizeWindowTo('FlyoutContentDiv');", 1);
}
function CloseFlyout() {
System.Gadget.Flyout.show = false;
}
</script>
</head>
<body onload="DoInit();">
<div id="FlyoutContentDiv">
<div align=right><br /><br />
<input type=button onclick="BrowseForFile();" value="Browse..." />
<input type=button onclick="CloseFlyout();" value="Close" />
</div><div id="InfoDiv"> please wait... </div>
</div>
</body>
</html>
As before, I have put most of the script code in a separate .JS file. If you use the Trial-And-Error Design Pattern, like I do, this makes your task much easier. The Visual Studio Just-in-Time debugger works best when the script code is in a separate file.
var goVerbs;
var gsFile = "c:\\temp\\test.doc"; // for sample purposes
// called from DoInit() of MyFlyout.html
function BuildInfoTable() {
var sFile= gsFile;
var nOffset = sFile.lastIndexOf("\\");
var sFolder = sFile.substr(0, nOffset);
var sFileName = sFile.substr(nOffset + 1);
var objShell = new ActiveXObject("Shell.Application");
var objFolder = objShell.NameSpace( sFolder );
var objFolderItem = objFolder.ParseName(sFileName );
var sHtml = "VERBS FOR <b>" + sFile + "</b><br>";
if (objFolderItem == null) {
sHtml += "FILE NOT FOUND ";
}
else {
goVerbs = objFolderItem.Verbs();
sHtml += "<table border='5' style='font: 10pt Arial'>";
for (var j = 0; j < goVerbs.Count; j++) {
var sName = goVerbs.item(j).Name;
sName = sName.replace("&", "");
sHtml += "<tr><td>";
sHtml += sName;
sHtml += "</td>"
sHtml += "<td><input type=button value='DoIt'"
sHtml += "onclick='goVerbs.item(" + j + ").Doit();'/>";
sHtml += "</td></tr>\r\n";
}
}
sHtml += "</table>";
document.getElementById("InfoDiv").innerHTML = sHtml;
}
// an onClick handler used in MyGadget.html
function BrowseForFile() {
var oShellItem = System.Shell.chooseFile(true, "All Files:*.*::", "C:\\", "");
if ( oShellItem == null ) { // user cancelled
System.Sound.beep();
return;
}
gsFile = oShellItem.path;
DoInit();
}
// handy function for gadgets...
//
function ResizeWindowTo(sElemId) {
document.body.leftMargin = 0;
document.body.topMargin = 0;
var oElem = document.getElementById(sElemId);
var nHigh = oElem.offsetHeight;
var nWide = oElem.offsetWidth;
documillisecondment.body.style.height = nHigh;
document.body.style.width = nWide;
}
The above code creates an ActiveX object, the Windows Shell object (line 11), which provides the methods I want to excercise. The code obtains a Folder object and a FolderItem object and cycles through the Verbs collection to list them all.
System.Gadget.Flyout.show = false;
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 (3)
Commented:
Author
Commented:Note that this is just a tutorial example and you are expected to make changes (for instance, it expects to see a particular file: c:\temp\test.doc)
-- Dan
FlyoutTest.zip
Commented:
thanx a lot Dan.. really really really thank you...