The purpose of Silverlight 2 in demo applications has so far primarily been to provide enhanced graphics to self contained applications. While the graphics capabilities are attention-grabbing, some of the other powerful features that are available seem to get overlooked. For example, Silverlight has the ability to interact with the HTML DOM and Javascript which allows you to use it to enhance existing web applications. To try out some of these features, I took a basic data entry form (in this case just plain HTML that’s not actually hooked up to anything on the server) and added a toolbar that gives the user some editing features to help fill out the form.

The toolbar provides

• Unlimited Undo/Redo
• Clearing of all form data
• Saving multiple sets of the entire contents of the form locally on the client
• Reloading of any set of data that is saved on the client

The only javascript that is required for this functionality is some boilerplate to connect to the Silverlight C# code.

For the toolbar I used the DHTML-Silverlight connections in both directions. The DataCache class in the application is decorated with the ScriptableType attribute and has methods decorated with the ScriptableMember attribute. This is the first step in making code available to javascript. The next is to call HtmlPage.RegisterScriptableObject(“objectName”, theScriptableObjectInstance) from the Silverlight UserControl’s code-behind. A good place to do this is in a handler for the Loaded event. These methods are now available to call from javascript by getting a reference to the Silverlight application like this:

var agEControl = document.getElementById(“SilverlightElementId”);
var content = agEControl.content;
var scriptableObject = content.objectName;

Here objectName is the string used above to register the object and “SilverlightElementId” is the HTML id of your Silverlight control (“Xaml1” by default in a VS generated project). Once you have scriptableObject you can just call any method on it just as you would in C#.

In the scriptable methods I use the connection in the other direction to go back to the calling HTML and retrieve values from the page’s controls. This basically takes one step to get the current value of an element:

HtmlElement element = HtmlPage.Document.GetElementById(“controlId”);
string value = element.GetAttribute(“value”);

It looks just like what you would do in javascript with the exception of the HtmlElement and HtmlPage classes that provide the access to the DOM. HtmlElement allows you to do all sorts of manipulation including attaching event handlers and playing with the structure of elements on the page.

Another interesting thing I ran into when I decided to blog this is the simplicity of deployment with the current structure of a Silverlight application. If you’re working in Visual Studio your application is compiled into a single file with a .xap extension. You probably also have a web project of some type to host the application. When running your application the built-in web server is spun up to serve up the page to the browser.

If you happen to be using a plain HTML host and not using server-side code you can also open the .htm directly in your browser as a file. This gave me the idea to try xcopy deploying my app to my blog’s downloads folder, which is just a basic file share. Starting out with a minimum set of files I copied the .htm and .js files that make up my page (no generated files) and the .xap file in ClientBin. This didn’t work at first due I think to extension filtering that disallowed the browser from pulling down the xap file. Fortunately zip files are allowed to download and (big secret) xap files are actually just zip files containing your assemblies and a manifest. If you rename your xap to zip you can just open it up and see your dlls inside. Once I did this and adjusted the reference in the HTML accordingly the entire page with toolbar loaded in my browser over http from a simple file share! Compare this to what you need to stand up a simple AJAX application and you can see the advantage.

Download the sample code HERE. Try out the functional page HERE. You’ll need the Silverlight 2 Beta 1 runtime (it should ask to install itself). Sets of data are saved by Last Name and ID so you may notice the Save button being enabled/disabled as you change fields. The Load and Delete buttons will become enabled after you save a form. The set selector is kind of clunky because there’s no ComboBox control yet in Beta 1 so I just squeezed in a small ListBox instead.

**UPDATE** – Silverlight 2 Beta 2 was just released and I’ve updated the functional version and put it alongside the original HERE. **