Shine that Silver Light On Me

Getting back to some more Windows/Microsoft features after our brief excursion into Mac territory (no worries, we will get back there too, and soon), we’re shipping full Silverlight support in Chrome ‘Joyride’ 2.0.3 just now. Full support means we’re providing everything you need to build Silverlight 1.1 Alpha apps in Chrome and Visual Studio 2008 – project templates; XAML editor with IntelliSense support; MSBuild support – the full shebang.

Let’s run thru creating a small Silverlight app to see what’s involved!

First, to start off, you will need three prerequisites installed to follow along: Visual Studio 2008 Beta 2, Silverlight 1.1 Alpha Refresh and Silverlight Tools Alpha for Visual Studio 2008 (all available here). Also, of course, you will need at least version 2.0.3 of ‘Joyride’.

Bring up the New Project dialog of Visual Studio and open the Chrome folder to notice the new “Silverlight” folder beneath. We provide two templates for Silverlight – one for a general project, and one for a Class Library that (similar to plain .NET library projects) will allow you to write classes and controls to share between different projects. For now, let’s go with a plain “Silverlight Project”, and call it SilverChrome.

The new project opens, and you will see some familiar and some unfamiliar things. Firstly, the reference list includes some assemblies you don’t know from .NET, such as an an ominous “agclr” which implements the core Silverlight classes, but also familiars such as mscorlib and System.dll with the .NET classes you know and love. Next, there’s a Page.xaml file, with a nested Page.xaml.pas code file. This might look familiar if you worked with WPF before as it uses a similar (but not completely interchangeable) concept. Basically, the XAML file will represent the visual appearance of our Page, defined by by XAML tags that represent classes (i many cases familiar from WPF, such as Canvas, …, etc). This file will be processed at runtime from by the Silverlight runtime to create your page and its contents. The so-called Code-behind file instead contains Chrome code that will be compiles within Visual Studio and deployed as .dll file. As such, the code can leverage all the features of Chrome, and call any standard or third party .NET classes that are available for the Silverlight runtime. In essence, all your expertise in developing with Chrome and .NET will apply directly to writing code that will run within the Browser, now.

Of course it goes without saying that, as with any Chrome project, you can add additional source files to the project and write any code you please. No more reliance on JavaScript or Flash’s Action Script to implement rich web clients!

Finally, there’s an HTML page in your project that will host your Silverlight page for testing purposes – although for final deployment you’ll most likely embed the Silverlight page into your existing website (much like you might do with a Flash control, now) – as well as two JavaScript helper files that perform the task of actually loading the Silverlight runtime.

Let’s press Ctrl+Shift+B (Build) now and navigate our favorite browser to TestPage.html to see – an empty white page!

That’s right. Our Silverlight page is working fine, but it’s of course not doing anything, because we’re just providing an empty XAML file. Let’s go back now ad add some functionality. First open the Page.xaml file and enter the following tag with the . Try typing instead of copy/pasting it, to see that you get full intellisense for available classes and properties:

Next, open the Page.xaml.pas code-behind file, and add the following method. Note how we can refer to the ClickMe TextBlock in code, even though the only place it is actually defined is the XAML. What’s happening here is that the Silverlight build process generates code from the XAML file during compile, and injects this into the project as a partial class for Page. If you ever want to look a that code (for example to investigate a confusing error message), you can find it in a file named Page.g.pas in the ./obj folder.

method Page.OnClick(sender: Object; e: EventArgs); begin ClickMe.Text := 'Clicked'; end;

Once done, press Ctrl+Shift+B to rebuild, switch back to your browser and refresh the page. You can now see our “Click Me” TextBlock in all it’s glory – and click it to make the magic happen!

(Some additional gradients and font styles added for effect ;-)And look, it even runs in Firefox on the Mac, making the above the very first line of Chrome code ever run on a non-Widows system without Mono!