My launcher gadget


OK, this is up here by popular request, and not because it’s fit for anything. There is a bunch of polishing that can be done, but I think we can leave that as an exercise for the reader <grin>.



First, create a folder named ‘MyLauncher.gadget’ (how lame is that name?) in your Gadgets directory. Assuming your user name is JohnSmith, this is the name of the folder you need to create.


C:\Users\JohnSmith\AppData\Local\Microsoft\Windows Sidebar\Gadgets\MyLauncher.gadget


Now, you’ll need three files here: gadget.xml (the manifest), launcher.htm (the gadget page/code), and launcher.jpg (the ‘icon’ for the gadget). For the icon, you can use pretty much whatever you want to come up with – I took some stock picture of a space ship launching and touched it up with Microsoft Expression Design (which looks very, very nice, although I am alas just a developer with no sense of aesthetics).


gadget.xml is the first interesting file, and it should look something like this. Of course this never made it to MSDN, but wouldn’t that have been nifty?


<?xml version=”1.0″ encoding=”utf-8″ ?>
<gadget>
  <name>My Launcher</name>
  <namespace>Marcelo.Msdn</namespace>
  <version>1.0</version>
  <author name=”Marcelo Lopez Ruiz”>
  </author>
  <copyright>2007</copyright>
  <description>Quick access to applications.</description>
  <icons>
    <icon src=”launcher.jpg” />
  </icons>
  <hosts>
    <host name=”sidebar”>
      <base type=”HTML” apiVersion=”1.0.0″ src=”launcher.htm” />
      <permissions>full</permissions>
      <platform minPlatformVersion=”0.3″ />
    </host>
  </hosts>
</gadget>


Now the really interesting stuff comes – launcher.htm. First, some administrivia on the page.


<html>
<head>
  <title>Launcher</title>
  <style>
  body {
    background: #060606;
    margin: 0px;
    width: 130px;
    height: 68px;
    font-family: Calibri, Lucida Sans, Arial;
  }
  p {
    font-family: Calibri, Lucida Sans, Arial;
    font-size: 9pt;
  }
  th {
    font-family: Calibri, Lucida Sans, Arial;
    font-size: 9pt;
  }
  td {
    font-family: Calibri, Lucida Sans, Arial;
    font-size: 9pt;
  }
  div {
    font-family: Calibri, Lucida Sans, Arial;
    font-size: 9pt;
  }
  </style>


Now comes the script section, where a bunch of helper functions do manage the UI. I’ve sprinkled a generous amount of links to API references for your convenience, in case you want to play with this.


<script>

function SetStatusText(text)
{
  var statusElement = document.getElementById(“statusDiv”);
  statusElement.innerText = text;
}

function LaunchItem(path)
{
  if (IsPageInGadget())
  {
    System.Shell.execute(path);
  }
  else
  {
    window.status = path;
  }
}

function ItemClick()
{
  var sender = window.event.srcElement;
  var text = sender.linkText;
  LaunchItem(text);
}

function ItemMouseEnter()
{
  var sender = window.event.srcElement;
  sender.style.background = “yellow”;
  SetStatusText(sender.title);
}

function ItemMouseLeave()
{
  var sender = window.event.srcElement;
  sender.style.background = sender.regularBackground;
  SetStatusText(“”);
}

function SetupLink(parentElement, item, fullPath, color)
{
  var itemElement = document.createElement(“span”);
  itemElement.title = item;
  itemElement.regularBackground = color;
  itemElement.onmouseenter = ItemMouseEnter;
  itemElement.onmouseleave = ItemMouseLeave;
  itemElement.innerText = item.substr(0,1);
  itemElement.style.cursor = “hand”;
  itemElement.style.height = “16px”;
  itemElement.style.width = “16px”;
  itemElement.style.background = color;
  itemElement.style.border = “1px solid black”;
  itemElement.style.textOverflow = “clip”;
  itemElement.style.whiteSpace = “nowrap”;
  itemElement.style.textAlign = “center”;
  itemElement.style.textTransform = “uppercase”;
  itemElement.onclick = ItemClick;
  itemElement.linkText = fullPath;
  parentElement.appendChild(itemElement);
}

function SetupGadget()
{
  SetupLinks();
}

function IsPageInGadget()
{
  try
  {
    if (null == System) return false;
    if (null == System.Gadget) return false;
  }
  catch(e)
  {
    return false;
  }
  return true;
}


Somewhere in there you’ll notice that the page also tries to support running outside of the Sidebar, although it won’t be very useful – it will simply display the command it’s trying to run rather than launching the application. 


Next comes the SetupLinks function, which holds a little table. This probably won’t look right on my blog, but if you look at it on a decent text editor, you’ll see it looks like a pretty little table where you can easily add and remove items (in lieu of me creating a piece of UI for that and persisting that along with the gadget).


function SetupLinks()
{
  var launchPadDiv = document.getElementById(“launchPadDiv”);
  var colorNormal = “#693680”;
  var colorMyUtil = “#8444A0”;
  var colorDevel = “#B8CCE4”;
  var colorOffice = “#FABF8F”;
  var colorLauncher = “#C4BC96”;
  var items = [
    { color: colorNormal, name: “Command Prompt”,       fullPath: “C:\\Windows\\System32\\cmd.exe” },
    { color: colorNormal, name: “IE”,                   fullPath: “C:\\Program Files\\Internet Explorer\\iexplore.exe” },
    { color: colorNormal, name: “MSTSC”,                fullPath: “C:\\Windows\\System32\\mstsc.exe” },
    { color: colorNormal, name: “Notepad”,              fullPath: “C:\\Windows\\notepad.exe” },

    { color: colorDevel,  name: “WinDbg”,               fullPath: “C:\\Program Files\\Debugging Tools for Windows (x86)\\windbg.exe” },
    { color: colorDevel,  name: “XamlPad”,              fullPath: “C:\\Program Files\\Microsoft SDKs\\Windows\\v6.0A\\bin\\XamlPad.exe” },

    { color: colorOffice, name: “Excel”,                fullPath: “C:\\Program Files\\Microsoft Office\\Office12\\EXCEL.EXE” },
    { color: colorOffice, name: “OneNote”,              fullPath: “C:\\Program Files\\Microsoft Office\\Office12\\ONENOTE.EXE” },
    { color: colorOffice, name: “Outlook”,              fullPath: “C:\\Program Files\\Microsoft Office\\Office12\\OUTLOOK.EXE” },
    { color: colorOffice, name: “Visio”,                fullPath: “C:\\Program Files\\Microsoft Office\\Office12\\VISIO.EXE” },
    { color: colorOffice, name: “Word”,                 fullPath: “C:\\Program Files\\Microsoft Office\\Office12\\WINWORD.EXE” },

    { color: colorLauncher, name: “Launcher”,           fullPath: “C:\\Users\\JohnSmith\\AppData\\Local\\Microsoft\\Windows Sidebar\\Gadgets\\MyLauncher.gadget” },
  ];

  for (var i = 0; i < items.length; i++)
  {
    SetupLink(launchPadDiv, items[i].name, items[i].fullPath, items[i].color);
  }
}


And finally we can close the script, head, and have the body of the page to set everything up.


</script>
</head>
<body onload=’SetupGadget()’ bgcolor=’#DBE5F1′>
<div id=’statusDiv’ style=’color: white;’>&nbsp;</div>
<div id=’launchPadDiv’></div>
</body>
</html>


Now, most gadgets that you’ll want to use will be prettier, more functional, provide a nicer UI when undocked, and so on and so forth. So this is very, very customized to my own needs. However this might be a handy starting point for you to write your own gadgets, and who knows, you might write the next big hit!


 


This posting is provided “AS IS” with no warranties, and confers no rights. Use of included script samples are subject to the terms specified at http://www.microsoft.com/info/cpyright.htm.

Comments (0)

Skip to main content