Avatar of marc

by

Shine that Silver Light On Me

August 24, 2007 in .NET, Oxygene

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 <Canvas>. Try typing instead of copy/pasting it, to see that you get full intellisense for available classes and properties:

<TextBlock x:Name="ClickMe" Text="ClickMe" MouseLeftButtonUp="OnClick" />

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!

14 responses to Shine that Silver Light On Me

  1. As usual, you guys are years ahead of Borland/CodeGear people. :)

  2. Just a note:
    This code security system has a bug.

    Try to send a comment with missing Name and email. An error message is showed.

    Then when I click the Back button, it seams that internally, the code has changed. But the page still shows the previous image code.

    I had to do a refresh of the page to solve this problem.

  3. Eduardo – thanx, we’ll look into that!

  4. I would like to know which are the advantage using silverlight over html + javascript + css,, using it I don’t need any extension in the browse, or framework installed in the client, so any comments about it is welcome to learn.

    regards
    Frank

  5. Frank: well, one of the benefits is that you can create much richer UI than with with HTML/JS/CSS, more along the lines of what you can do with Flash. And you can leverage your existing experience with .NET and WPF used for desktop apps, to do so, rather then having to use completely different languages (say, ActionScript) do do so. You can even *share* parts of the code base between desktop and Web client.

    Also, i would assume (i didn’t test this myself) that when you leverage advanced graphics and 3D capabilities of Silverlight, you’d benefit from the same DirectX based hardware acceleration as desktop WPF apps do (at least on Windows, and i’d hope the Mac version would exploit CoreGraphics for this, as well)…

  6. OK thanks marc, is good to know that, I think is good to share the code between desktop app and web app, but again I have doubts, because using htm+javascript+adobe air my web app can run like a desktop app, on linux, emac and windows, so I know is good to use a language in .net, more clear maybe that html+javascript+css, but using it I have the complete control on dom, so again I don’t have clear where sirverlight can help me.

    regards
    Frank

  7. Frank: yes, of course it’s always going to boil down to a matter of taste and expertise. If you already know Flash and related technologies, for example, i see no good reason to switch to Silverlight, just fir the sake of it, either.

    But if on the other hand you’re familiar with .NET and maybe WPF, then why learn Flash, when you can easily apply your existing knowledge using Silverlight.

    As for HTML+CSS+JS vs. richer technologies like Flash and Silverlight, i think that discussion is pretty moot, millions of flash based websites out there show that there’s a need and demand for technology that does more than one can do with HTML+CSS+JS. One can like or dislike it (i personally just use plain HTML for my sites, as well), but the demand is there…

  8. Ok thanks marc, I understand in silver ligth, flash maybe are good in site where I need animation, graphich, socket ect, and maybe I can use its too in an account system for instances, today I can use some framework in javascript like Ext, Yui, Dojo ect where I can make good site, (webapplication), my doubts was about the performance, I don’t know if the same app running with silver light could be work more quick that the app using javascript + html + css, do you know or tested the same app using different technology what about the performance on browse.

    regards
    Frank

  9. I haven’t done any tests myself, but the performance should be pretty well. .NET DLLs are usually pretty small (depending on on the amount of code they contain, of course), so the download impact shouldn’t be too big (also, unless the dlls change, they will only be downloaded once. Once running, Silverlight apps will run natively like any .NET code, not interpreted like JavaScript and (i assume) Flash ActionScript…

  10. This blog is also linked through http://www.hanselman.com/blog/Silverlight10IsOutAndItSupportsLinux.aspx

    Mark, what about Linux support for Chrome and Silverlight? Will/Is that supported?

  11. Dean: thanx for the link. We’ll certainly be looking at Moonlight and make sure Chrome works well with it. that said, if the Mono guys do their job well (and they usually do ;), things should just work, without any action needed from our side.

    Note thought that Silverlight 1.0 doesn’t support custom client-side .NET code, just JavaScript. Chrome (or any managed language support) doesn’t figure into this until 1.1.

  12. About linux support:

    http://www.microsoft.com/presspass/press/2007/sep07/09-04SilverlightPR.mspx

    i really hope is rigth. I will tri to take some time to test that.

  13. Donald: great – please keep me posted on your results!