Dot Net Thoughts

In this I am exploring another two features of Gadget API, one is Docking and other is Flyout. The Docking feature is helpful in Windows Vista, because the gadget lives only in Vista Sidebar, but in Windows 7 it can be anywhere in the desktop. The Docking feature helps to change the size of Gadget, in Windows Vista, the docking / un-docking events will automatically fired, when we drag the gadget out of the sidebar, but in Windows 7 another button will displayed in the Gadget toolbox. You can query the current state of a gadget with System.Gadget.docked. It returns true if docked, false if undocked.

Docking / UnDocking button in Sidebar

There are also two events that you can monitor, System.Gadget.onDock and System.Gadget.onUndock, to determine when the docking state changes.

You can change the Width of the gadget by calling document.body.style.width = “130px”;. And the Docking and Undocking events should be attached on the Page_load.

System.Gadget.onDock = dockStateChanged;
System.Gadget.onUndock = dockStateChanged;

And the dockStateChanged function is

function dockStateChanged() {
//Checks the current state of the Gadget, if Docked state, setting the width to 130px;
//Otherwise changing to 330px;
	if (System.Gadget.docked) {
		document.body.style.width = "130px";
document.getElementById("RSSOutput").style.width = "125px";
	} else {
		document.body.style.width = "330px";
document.getElementById("RSSOutput").style.width = "325px";
	}
}

Another feature is Flyout. Flyouts used to extend the Gadget UI. The flyouts are system modal—only one can be displayed at a time. And when a gadget loses focus, its flyout will close. API for Flyouts available under System.Gadget.Flyout. As the flyouts is completely a separate window, with its own DOM, helps to add / create controls dynamically in it. Also you need to specify the flyout file, like Settings file.

The System.Gadget.Flyout.document returns the Document object of the flyout window. To display a flyout you need to set Flyout.show to True and to hide, set it to false. This property also returns the current state of flyout. But we cannot control the location of side bar, it is managed by Sidebar or OS.

System.Gadget.Flyout.file = "flyout.html";

There are certain events also available for Flyouts

System.Gadget.Flyout.onShow = function()
{
//Do something, when flyout is opening, may be a dynamic control creation
}
System.Gadget.Flyout.onHide = function()
{
//Do some code.
}

In my last post I have created a simple Windows 7 Gadget for testing Regular expressions. In this post we look into the Gadget Options dialog and Gadget API, which helps to display the options dialog and save the preferences from the User. The options dialog is a nice feature used in Gadgets to manage the user preferences. It is also an HTML file. Unlike the main Gadget HTML file, which is specified in the XML Definition file, the Options HTML File is specified in the main gadget file or in the main Javascript file, generally in the gadget initialization area of your script. In the RegEx Tester example, I am using the RegEx function flags as customization options.

RegEx Tester Settings

So I have created an HTML File with 3 checkboxes and wrote a javascript function to get the user selected options, create the flags variable, and when closing the Options dialog, save the user preferences. To create the settings or options dialog, set the SettingsUI property.

System.Gadget.settingsUI = "settings.html";

After setting the SettingsUI property, the Gadget will display a Options button in the Gadget handle.

Settings Button

The Gadget API also supports various events / callback functions for the Options dialog, like SettingsClosing, SettingsClosed etc, which helps to save the Preferences and Read the preferences in the Gadget.

System.Gadget.onSettingsClosed = settingsClosed;
function settingsClosed(event) {
	//OK Button clicked.
if (event.closeAction == event.Action.commit) {
	//Load settings here.
}
}

Gadget API supports various methods to read and write settings. For writing setting we can use System.Gadget.Settings.write or System.Gadget.Settings.writeString. Both the functions will expects a key/value pair. And for reading can use System.Gadget.Settings.read or System.Gadget.Settings.readString, both of these functions take a key and return a value. If the key does not exist (for instance if it has never been written) both will return a value of undefined. Use System.Gadget.Settings.xxxxString method, if you are working with string values. All the settings are stored in Settings.ini file. And it is available in the “C:\Users\\AppData\Local\Microsoft\Windows Sidebar” location.
Saving the preferences

System.Gadget.Settings.write("RegExOptionsSaved", "true");
System.Gadget.Settings.write("RegExOption", escape(result));

And reading the Preferences 

if (System.Gadget.Settings.read("RegExOptionsSaved")) {
regExOptions = unescape(System.Gadget.Settings.read("RegExOption"));
}

RegEx Object constructor 

var re = new RegEx("Pattern","Flags");

And the Flags are

1. Global Search – g – The global search flag makes the RegExp search for a pattern throughout the string, creating an array of all occurrences it can find matching the given pattern.
2. Ignore Case – i – The ignore case flag makes a regular expression case insensitive. For international coders, note that this might not work on extended characters such as å, ü, ñ, æ.
3. Multiline Input – m – This flag makes the beginning of input (^) and end of input ($) codes also catch beginning and end of line respectively.

Gadgets are simple and lightweight applications, which can be developed using HTML, Javascript and CSS. Gadgets can also include Image files. In Windows Vista, we can create Gadgets by zipping the files, and rename the it with .Gadget extension. In Windows 7 we can create Gadget by creating the .Gadget folder in C:\Program Files\Windows Sidebar\Gadgets\ folder. This folder contains all the default gadgets from Microsoft.

Creating Simple RegEx Tester Gadget

Regular Expressions are complex but efficient technique for processing text. And the RegEx functions are available in Javascript. So I am to creating simple regex tester gadget using Javascript. You can find a simple RegEx Tester using Javascript here : http://www.regular-expressions.info/javascriptexample.html.

For creating a Gadget we require a XML Definition file, which contains the details about the Gadget File, Links to Icons, and Copyright information. Here is skeleton a XML Definition file.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>RegExTester</name>
<namespace>dotnetthoughts</namespace>
<version>1.0.0.0</version>
<author name="dotnetthoughts">
<info url="http://dotnetthoughts.net" text="www.dotnetthoughts.net" />
<logo src="logo.png" />
</author>
<copyright>&#0169; 2010</copyright>
<description>For Testing Regular Expressions</description>
<icons>
<icon width="64" height="64" src="icon.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="RegExTester.html" />
<permissions>full</permissions>
<platform minPlatformVersion="0.3" />
</host>
</hosts>
</gadget>

And the Tags details are

name: Title of your gadget.
version: Version number of your gadget.
author: Your name or your company’s name.
info url: Web site address.
info text: Friendly name for your Web site.
logo src: Name of company’s logo image file.
copyright: Copyright notice.
description: Description of the gadget.
icon src: Name of icon image file for the gadget.
base src: Name of gadget’s main HTML file.

Gadget Details.

Save this file as Gadget.xml. Next we need to create the RegExTester.html, which is the main file, nothing but simple HTML file with some UI components.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript" src="message.vbs"></script>
<script type="text/javascript" src="regexcheck.js"></script>
<title>RegEx Tester</title>
</head>
<body>
<form>
<table border="1" cellpadding="1" cellspacing="5" bordercolor="red">
<tr><td><b><u>RegEx Tester</u></b></td></tr>
<tr><td><label>Regular Expression</label></td></tr>
<tr><td><textarea id="txtRegExp" cols="25" rows="4"></textarea></td></tr>
<tr><td><label>Subject String</label></td></tr>
<tr><td><textarea id="txtSubject" cols="25" rows="4"></textarea></td></tr>
<tr><td><button onclick="javascript:demoMatchClick();">Test Match</button>&nbsp;&nbsp;
<button onclick="javascript:demoShowMatchClick();">Show Match</button></td></tr> </table>
</form>
</body>
</html>

You may noticed that I have included a message.vbs file, it helps to display alert() boxes from Javascript. I don’t know why alert and prompt functions are not available in Gadgets. Also we don’t need to worry about cross platform compatibility issues in Gadgets, we can write anything supported by Microsoft Internet Explorer.

Here is the code of Message.vbs file.

sub alert(prompt)
MsgBox prompt, 48 , "RegEx Tester"
end sub

And here is the contents of regexcheck.js file.

function demoMatchClick() {
var regExCtrl = document.getElementById("txtRegExp");
var subjectCtrl = document.getElementById("txtSubject");
var re = new RegExp(regExCtrl.value);
if (subjectCtrl.value.match(re)) {
	alert("Successful match");
} else {
	alert("No match");
}
}
function demoShowMatchClick() {
var regExCtrl = document.getElementById("txtRegExp");
var subjectCtrl = document.getElementById("txtSubject");
var re = new RegExp(regExCtrl.value);
var m = re.exec(subjectCtrl.value);
if (m == null) {
	alert("No match");
} else {
	var s = "Match at position " + m.index + ":\n";
	for (i = 0; i < m.length; i++) {
		s = s + m[i] + "\n";
	}
	alert(s);
}
}

Also I added a CSS file for styling the components. Also to specify the Height and Width of the Gadget. In Windows Vista, we need to limit the size of the Gadget, because the Gadget can only place in the Sidebar, but in Windows 7 we can place the Gadget anywhere in the desktop. Also I have added icon.png and logo.png files, as specified in the XML definition file.
The current folder structure is like this.

Folder Structure

Now using any compression tool, compress the files, and Rename it as RegExTester.Gadget. Double click on the Gadget file, Windows will ask for a confirmation.

Gadget install Confirmation

Click Install. It will start the Gadget. Here is the screenshot of RegExTester gadget running on my Windows 7 machine.

RegExTester Running on Windows 7

This is an introduction only, I will try to post about Gadget API, Gadget Settings etc in the next post.

Happy Coding

Few days before one of my colleague twitted a link about GodMode in Windows 7. I just visited the link and I found it is kind of Easter egg from Microsoft, which gives a list of Program tasks like control panel. The website is also mentioned like it is also available in Windows Vista, but Microsoft is not recommended it in x64 machines. As I am working as part of some Windows application development team, I am using Windows Vista as my dev OS. So I thought of exploring God Mode in Windows Vista.

To enable GodMode, just right click, Select New, Select Folder. Then type “GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}“. Now the Icon will change, and it will become similar to control panel Icon. And on double clicking you can able to see lot of options (in my Windows 7 machine it is giving 279 items). I just created one folder and renamed it. Wow the Icon changed.

Godmode in Window 7

After that I double clicked it. Windows Explorer crashed I was using x86 machine, and my Explorer crashed. But I started explorer again using Task Manager. Then I right clicked and select the Explore option. Yes there is an explore option available in Windows Vista, but it is not available in Windows 7. Then the explorer crashed again expected. So I thought I will stop exploring God Mode in Windows Vista, but the sad thing is when ever I start explorer using Task Manager, it is crashing.

Then I searched about how to fix this issue, but no one is reported the problem with x86 machines. Based on most of the solutions provided, I deleted this folder using Command line(cmd.exe). Restarted, still the problem exists. Then again I searched, later I found a solution to delete some registry key. I tried it, restarted it and it worked.

Solutions to Fix God mode problems in Windows Vista

1. Delete the God mode directory using CMD tool. Go to the location where you created the God Mode directory, use RmDir Godmode.{ED7BA470-8E54-465E-825C-99712043E01C} to delete it. Restart the machine. Normally it will fix the issue.
2. If your explorer still crashing, Open RegEdit, Search for {ED7BA470-8E54-465E-825C-99712043E01C}. And delete all instances *. I found only one instance in my Windows Vista machine. Restart. It fix the issue.

Thanks to Jayan for giving me link to GodMode

* Changes made to the Windows registry happen immediately, and no backup is automatically made. Do not edit the Windows registry unless you are confident about doing so.