The secret power of Silverlight
I gave the first part my talk last Friday titled “Introduction to Silverlight†to my company as part of our Developer Readiness Program and it was while preparing for this that I realised the true potential of Silverlight that I think a lot of people have missed.
As I see it, there are 2 parts to this new technology. There’s the shiny, animated, “let’s take on Adobe Flashâ€, Windows Presentation Foundation in any browser on both a Mac or Windows part, which everyone is blogging about and was recently demoed by Microsoft at Dev Days 2007. But there’s also an underlying, far more important part which, I think, will make businesses and developers sit up and take notice. That is, that you can run .NET code as client script on a browser as your would Javascript.
Unlike Active Server Pages where a post-back is made to the hosting server to run some .NET code before returning the results back to the client; Silverlight allows the compiled code to sit on the user’s machine to be accessed directly and quickly.
I hope this is sinking in because the ramifications are enormous.
What currently happens (because the product is still in alpha) is that a user will download and install the Silverlight plug-in which is a subset of the .NET Framework on their machine, be it a Mac or Windows platform. The user then visits a Silverlight enabled website and in the pages, images and other resources that get downloaded to the users cache they also download a DLL of the compiled .NET code. The Silverlight javascript that goes along with every Silverlight project knows how to invoke this DLL using the slim .NET Framework that the user previously installed and therefore the user is now running .NET code on their machine through a browser interface, disconnected from the server.
There is also a feature called Isolated Storage giving each Silverlight module up to 1MB of storage on the user’s system which means static information like parameter tables and report data can be cached locally for speedy access by the .NET code. Silverlight also provides powerful interop between Javascript, the HTML DOM and .NET, allowing each to call the other and creating a immense environment for developers to work in.
A simple test of this statement is quite possible, and I will prove it by walking you through creating an HTML page with a button on it, and when you click the button .NET code is executed. To build this demo you’ll need the Silverlight 1.1 runtime, Visual Studio Orcas and the Silverlight Alpha Tools for Visual Studio; all of which you can get from the Get Started page on the Silverlight community website.
Create a new Silverlight project in C# and in the TestPage.html insert a new line directly after the opening <body> and add:
<input type=”button” id=”mybutton” value=”Click Me!” />
Damn! CopySourceAsHtml doesn’t work on Visual Studio Orcas, so you’ll have to forgive the lack of text highlighting (suggestions for a replacement welcome). Notice that we didn’t specify any event handlers for our button. In this demo we’ll add a handler from .NET code and hook it onto a .NET method to run.
Now we’ll add a TextBlock to our XAML page to display some message when the Html button is clicked. Add the following line between the <Canvas> tags.
<TextBlock x:Name=”mylabel” size=”56″></TextBlock>
Next we must go to the code page of our XAML file and we must add the Windows.System.Browser namespace so we can use the HtmlPage static object to get at the Html document which the Silverlight module is running in.
At the top of Page.xaml.cs add:
using System.Windows.Browser;
and in the Page_Loaded method, after the InitializeComponent() call add:
document.GetElementByID(”mybutton”).AttachEvent(”onclick”, new EventHandler<HtmlEventArgs>(DoSomething));
So what are we doing here? Well from the document, which is the Html page in which the Silverlight module is running, we’re called GetElementByID which returns the HtmlElement instance of our button. On the HtmlElement we use AttachEvent to attach a new event handler delegate to the “onclick” event of the button. Note that I’ve specified the event arguments to be of type HtmlEventArgs because while I’m not making use of it in this demo, there’s a lot of information contained in the event args about how the user interacted with the element to raise the event.
Finally, we must add the method that the button will be attached to. Before we add the code, I suggest you hit Build so that the XAML object we created is available in code. Then add this method after Page_Loaded:
private void DoSomething(object sender, HtmlEventArgs e)
{
mylabel.Text = “I’ve been clicked”
}
All I’m doing here is setting the text of my Textblock to show that the Html button has been clicked. Of course, I could execute more elaborate code and even pass data back to other Html elements by creating another Htmldocument (or globalizing the first one), getting the desired HtmlElement and using the GetAttribute and SetAttribute to get and set data.
Now you can hit Run and test the code in action. You’ll see when you click the button is doesn’t do a postback to the server (in fact plain Silverlight projects don’t run in a Cassini or IIS server, the page is loaded directly) and the Html button is calling .NET code. Do you see!? A lot less glamorous than most of the demos floating around, but I think you’ll agree with me; this is a lot more useful to every day web development; and can change the way developers think about working with client code.
If you don’t want to go through and write all 5-7 lines of code, I have uploaded the demo and you can download BrowserDemo.rar to play with; you’ll still need Oracs and the Silverlight tools though. Enjoy!
I must admit, I’m rather impressed. I had immediately dismissed Silverlight as a Flash-wannabe, and hadn’t given it much of an afterthought.
In fact, I assumed, no, FEARED that the frontend would in fact be mainly JavaScript based. I’m going to watch for further topics about this with interest.
Thanks Andre.