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.

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