function ValidateRadioButtons(source, arguments) {
    var radio1 = document.getElementById(source.Radio1);
    var radio2 = document.getElementById(source.Radio2);
    var radio4 = document.getElementById(source.Radio4);
    var radio3 = document.getElementById(source.Radio3);
    var result = radio1.checked || radio2.checked || radio3.checked || radio4.checked;
    arguments.IsValid = result;
}

This is the JavaScript function which implements the validation logic. You can get the controls as part of the Source object. To get the Source.Radio1, you need to register the Radio1 as ClientValidator attribute. You can do some C# code like this.

protected void Page_Load(object sender, EventArgs e)
{
    this.Page.ClientScript.RegisterExpandoAttribute(customCheck.ClientID, "Radio1", this.radio1.ClientID, false);
    this.Page.ClientScript.RegisterExpandoAttribute(customCheck.ClientID, "Radio2", this.radio2.ClientID, false);
    this.Page.ClientScript.RegisterExpandoAttribute(customCheck.ClientID, "Radio3", this.radio3.ClientID, false);
    this.Page.ClientScript.RegisterExpandoAttribute(customCheck.ClientID, "Radio4", this.radio4.ClientID, false);
}

And the ASPX Code is like this

<asp:CustomValidator runat="server" ID="customCheck" ClientValidationFunction="ValidateRadioButtons"
        ErrorMessage="Choose any option" />

And here is the Output code generated for the custom validator.

Custom validator output rendering

Happy Coding.

Error: Sys.Net.WebServiceFailedException: The server method ‘WebServiceMethod’ failed with the following error: System.InvalidOperationException– Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

After doing some searching we resolved it. You can resolve this error by modifying the web.config file, and add / modify the Configuring JSON Serialization.

<configuration>
  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="5000"/>
      </webServices>
    </scripting>
  </system.web.extensions>
</configuration>

The default length is 102400.
You can get more information about this from MSDN : http://msdn.microsoft.com/en-us/library/bb763183.aspx

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

Silverlight UI – XAML

<Canvas x:Name="LayoutRoot">
    <StackPanel Margin="10" Background="White" Orientation="Horizontal">
        <TextBlock Text="Select File :" />
        <TextBox Name="txtFileName" Width="200" />
        <Button Name="cmdBrowse" Content="Browse" Click="cmdBrowse_Click" />
        <Button Name="cmdUpload" Content="Upload" Click="cmdUpload_Click" />
    </StackPanel>
</Canvas>

And the code behind

FileInfo fi;
private void cmdBrowse_Click(object sender, RoutedEventArgs e)
{
    //Open File Dialog
    OpenFileDialog dlg = new OpenFileDialog();
    //The _FilterText variable used to control file extentions
    //supported by the Upload control
    dlg.Filter = this._FilterText;
    bool? result = dlg.ShowDialog();
    if (result.HasValue && result.Value)
    {
        this.fi = dlg.File;
        //The _FileSize variable used to control the
        //Maximum Size supported by the control.
        if (this.fi.Length > this._FileSize)
        {
            //Control will fire a FileSizeError event, if the
            //Uploading File Size greater than the specified.
            if (this._onFileSizeError != null)
            {
                this._onFileSizeError(this, EventArgs.Empty);
            }
            return;
        }
        this.txtFileName.Text = this.fi.Name;
    }
}

private void cmdUpload_Click(object sender, RoutedEventArgs e)
{
    //Uploading part.
    if (this.fi != null)
    {
        byte[] buffer = new byte[this.fi.Length];
        using (Stream s = this.fi.OpenRead())
        {
            //Reading the File Content to the Stream.
            //It is using a WCF Service with Upload File method
            s.Read(buffer, 0, buffer.Length);
            ServiceReference1.Service1Client client = new ServiceReference1.Service1Client();
            client.UploadFileCompleted += new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(client_UploadFileCompleted);
            client.UploadFileAsync(this.fi.Name, buffer);
        }
    }
}

private void client_UploadFileCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
    //Application will raise another Event
    //after the completion of the File Upload.
    if (this._onFileUploadCompleted != null)
    {
        this._onFileUploadCompleted(this, EventArgs.Empty);
    }
}

And here is the WCF Service with Upload File method.

//IService1 Interface
[ServiceContract]
public interface IService1
{
    [OperationContract]
    void UploadFile(string fileName, byte[] content);
}

//IService1 Interface implementation
public class Service1 : IService1
{
    public void UploadFile(string fileName, byte[] content)
    {
        using (FileStream sw = File.OpenWrite(Path.Combine(@"C:\Uploads", fileName)))
        {
            sw.Write(content, 0, content.Length);
        }
    }
}

To enable communication between Silverlight and Javascript the “System.Windows.Browser” namespace is used. Which supports various attributes and methods, will expose the properties and events of the silverlight application to the Javascript.

public MainPage()
{
    InitializeComponent();
    //This method enables the scripting support to the Application.
    //From Javascript developer can access the Properties and events
    //like SilverlightObj.Content.Page.Property
    HtmlPage.RegisterScriptableObject("Page", this);
}

private string _FilterText = "Text Files|*.txt";
private int _FileSize = 1000;
private event EventHandler _onFileSizeError;
private event EventHandler _onFileUploadCompleted;

//This attribute used to expose the Property to Client side.
//From Javascript : ctrl.Content.Page.FileSize = 2000;
[ScriptableMember]
public int FileSize
{
    get
    {
        return this._FileSize;
    }
    set
    {
        this._FileSize = value;
    }
}
[ScriptableMember]
public string Filter
{
    get
    {
        return this._FilterText;
    }
    set
    {
        this._FilterText = value;
    }
}

[ScriptableMemberAttribute]
public EventHandler OnFileSizeError
{
    get
    {
        return this._onFileSizeError;
    }
    set
    {
        this._onFileSizeError = value;
    }
}

[ScriptableMemberAttribute]
public EventHandler OnFileUploadCompleted
{
    get
    {
        return this._onFileUploadCompleted;
    }
    set
    {
        this._onFileUploadCompleted = value;
    }
}

And in the Javascript, the property can access and can modify it.

function onPluginLoaded() {
    var ctrl = document.getElementById("silverlightControlHost1");
    ctrl.Content.Page.Filter = "Image Files|*.jpg;*.gif;*.png|All Files(*.*)|*.*";
    ctrl.Content.Page.FileSize = 20000;
    ctrl.Content.Page.OnFileSizeError = function () {
        alert("File Size should be less than 2 KB");
    };
    ctrl.Content.Page.OnFileUploadCompleted = function () {
        alert("Uploaded successfully !");
    };
}

And the HTML Part – Here the onLoad parameter will assign the Javascript to execute on loading of the silverlight application.

<object id="silverlightControlHost1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
    width="100%" height="100%">
    <param name="onLoad" value="onPluginLoaded" />
</object>

And here is the screen shot, of the same running on my Windows 7 machine.

Silverlight File Uploader

Please let me know your comments and feedbacks. Happy Programming.