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.
}

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

/// <summary>
/// Imports Data from Microsoft Excel File.
/// </summary>
/// <param name="FileName">Filename from which data need to import</param>
/// <returns>List of DataTables, based on the number of sheets</returns>
private List<DataTable> ImportExcel(string FileName)
{
    List<DataTable> _dataTables = new List<DataTable>();
    string _ConnectionString = string.Empty;
    string _Extension = Path.GetExtension(FileName);
    //Checking for the extentions, if XLS connect using Jet OleDB
    if (_Extension.Equals(".xls", StringComparison.CurrentCultureIgnoreCase))
    {
        _ConnectionString =
            "Provider=Microsoft.Jet.OLEDB.4.0; Data Source={0};Extended Properties=Excel 8.0";
    }
    //Use ACE OleDb
    else if (_Extension.Equals(".xlsx", StringComparison.CurrentCultureIgnoreCase))
    {
        _ConnectionString =
            "Provider=Microsoft.ACE.OLEDB.12.0;Data Source={0};Extended Properties=Excel 8.0";
    }

    DataTable dataTable = null;

    using (OleDbConnection oleDbConnection =
        new OleDbConnection(string.Format(_ConnectionString, FileName)))
    {
        oleDbConnection.Open();
        //Getting the meta data information.
        //This DataTable will return the details of Sheets in the Excel File.
        DataTable dbSchema = oleDbConnection.GetOleDbSchemaTable(OleDbSchemaGuid.Tables_Info, null);
        foreach (DataRow item in dbSchema.Rows)
        {
            //reading data from excel to Data Table
            using (OleDbCommand oleDbCommand = new OleDbCommand())
            {
                oleDbCommand.Connection = oleDbConnection;
                oleDbCommand.CommandText = string.Format("SELECT * FROM [{0}]",
                    item["TABLE_NAME"].ToString());
                using (OleDbDataAdapter oleDbDataAdapter = new OleDbDataAdapter())
                {
                    oleDbDataAdapter.SelectCommand = oleDbCommand;
                    dataTable = new DataTable(item["TABLE_NAME"].ToString());
                    oleDbDataAdapter.Fill(dataTable);
                    _dataTables.Add(dataTable);
                }
            }
        }
    }
    return _dataTables;
}

The connection string also supports HDR attribute, which decides, whether the Excel file first row is header or not. It can be either Yes or No. It can be used with both Excel 2003 and Excel 2007 files.

Update: You can download the Microsoft.ACE.OLEDB.12.0 provider from Microsoft : 2007 Office System Driver: Data Connectivity Components

This sample code is doing some long operation in a separate thread and try to update the UI from the new thread.

private void Form1_Load(object sender, EventArgs e)
{
    this.threadStart = new ThreadStart(LongProcess);
    this.thread = new Thread(this.threadStart);
    this.thread.Start();
}

private void LongProcess()
{
    for (int i = 0; i < 100; i++)
    {
        Thread.Sleep(100);

        //This will throw an exception like this
        //System.InvalidOperationException - Cross-thread operation not valid:
        //Control 'textBox1' accessed from a thread other than the thread it was created on.
        this.textBox1.Text = i.ToString();
    }
}

And here is the source code which will fix the issue with delegates and Control.Invoke method

private ThreadStart threadStart;
private Thread thread;
private delegate void UpdateTextDelegate(string text);

private void Form1_Load(object sender, EventArgs e)
{
    this.threadStart = new ThreadStart(LongProcess);
    this.thread = new Thread(this.threadStart);
    this.thread.Start();
}

private void LongProcess()
{
    for (int i = 0; i < 100; i++)
    {
        Thread.Sleep(100);
        //This will resolve the cross thread invalid operation exception.
        this.UpdateText(i.ToString());
    }
}

private void UpdateText(string text)
{
    //Checks whether the called required to invoke the "Invoke" method.
    if (this.textBox1.InvokeRequired)
    {
        UpdateTextDelegate updateTextDelegate = new UpdateTextDelegate(UpdateText);
        //Calling the invoke method of the control with the parameter.
        this.textBox1.Invoke(updateTextDelegate, new object[] { text });
    }
    else
    {
        this.textBox1.Text = text;
    }
}

Thanks to Praveen for helping me out. Happing Coding