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