A week ago, I posted "If you can do it in JavaScript, you can do it in managed Silverlight .NET code." Here’s proof that the HTML interoperability capabilities in Silverlight are not only world-class, but also amazingly powerful.

This "managed HTML controls" concept is a neat idea: something that might whet your appetite to explore the interoperability features and consider using the feature to build sophisticated applications. However, key hurdles leave this as a conversation piece more than a new application platform. At the end of the day, the Silverlight presentation framework as it stands if going to be your best bet for a majority of your applications.

Exploring and thinking about changing the boundaries and status quo of web apps is something that’s fun and challenging. A client-side implementation of ASP.NET, enabling rich browser apps written in C#, was totally my dream a few years ago. Nikhil’s Script# actually can get you some of the way by letting you write client apps in .NET.

Today, a client-side ASP.NET HtmlControl is interesting, but not a game-changer, given the maturity of JavaScript platform and the richer app platforms out there like Silverlight (that is based on WPF) and Flex.

What’s the HtmlControls concept look like?

Here’s a look at a few of the types.

By exposing strongly typed properties, methods, and events, your .NET HTML application code will be cleaner, easier to maintain, enable you to use static analysis tools, and even perform unit testing.

Although the HtmlControlBase exposes a lot of the sample string-based properties as the standard Silverlight HtmlElement, it adds overloads with enumeration-based parameters (cut down on spelling errors), and stop having to duplicate strings through your app:

You can set Font properties like you would in ASP.NET, without worrying so much about CSS at the end of the day:

The same goes for standard HTML properties defined by the W3C – helpful HtmlProperty enum:

Thinking about the pros and cons

Some of what you can do with managed HTML controls:

• Create strongly typed custom controls: be more efficient, create simpler code, less spaghetti code
• Develop rich web applications using Visual Studio, including built-in FxCop, code refactoring, the object browser, XML documentation support, and more
• Create sophisticated AJAX-like applications with IntelliSense support
• No need for your controls to POST-back to the server or worry about ViewState ~ these are stateful, since they are in memory
• Integrate with Silverlight 2 applications, and all the richness it provides in its framework and class libraries
• You could move an application like 37signals’ Backpack out of a server farm, store the .Xap on a CDN, and use occassional cross-domain web service calls to store and retrieve data… imagine, some types of apps could serve a billion application users with only 1 billion .Xap downloads from your CDN, instead of generating tens of billions of web pages on an expensive web farm

What’s so great about it?

• Replace loosely typed string property setters (spaghetti code) with strongly typed code
• Like Script#… but with the live .NET Silverlight 2 CLR!
• Kind of like a cheap ASP.NET implementation, on the client side, that works on Windows and Mac (IE, Firefox, Safari)
• Proves how powerful Silverlight can be, even for out-of-the-box projects
• Fun!

What are the drawbacks?

• Silverlight has a much richer presentation story: really rich controls, animations, design tools like Blend, and WPF goodness. Videos. Audio. Full-screen.
• Why build effectively an HTML-based AJAX app using Silverlight, and yet require your users to have the Silverlight 2 runtime on their machines?
• The memory performance of this concept is probably quite bad: each element is already in the browser; there’s a pointer to that from the native platform in Silverlight; there’s the Silverlight HtmlElement object instance; and then there’s the HtmlControl type. That’s a lot of duplicated stuff!
• The performance of the concept in general isn’t going to be too awesome: there’s a lot of interop here between the web browser, JavaScript, the browser’s plugin APIs (NPAPI or ActiveX), the managed CLR, and back again
• All the points made here to NOT use the HTML DOM bridge

What does it give you that you don’t get with JavaScript?

• C#, VB, or DLR languages like Ruby running in the browser, client-side, interacting with the HTML page
• The ability to use Visual Studio for client web development

And, at the end of the day, Script# might get you these things, without the Silverlight dependency.

What does it give you that you don’t get with Silverlight today?

• Add managed code to existing AJAX applications and HTML elements by hooking up events and altering properties
• Easier way to work with HTML pages than using the functional but basic HTML interop
• Create rich HTML text editing controls and web forms; create elements for the browser’s built-in printing system

Using the HTML control framework

Example: Setting the width and height

Without this framework, to set the width of an HtmlElement in Silverlight, you’d need to write this code (assumes you have a regular Silverlight HtmlElement instance called "element"):

// Setting the height and width - notice the typo you wouldn't know
// about until runtime:
element.SetStyleAttribute("width", "50px");
element.SetStyleAttribute("height", "450ppx");

There’s no type checking: you won’t know about spelling errors or other problems until runtime, and if you do any CSS manipulation, your code will get very difficult to maintain. Here’s the same code, with a managed HTML control (using a few different ways of setting the value):

// Set the width and height of the control
control.Width = 50;
control.Height = new Unit(450, UnitType.Pixel);

Same # of lines of code, but a little more "attractive" API.

You can also wrap existing HtmlElements with a managed control in some cases: either standard parts of your web page, existing AJAX applications. This is possible when the constructor exposes a HtmlElement parameter.

Creating a composite control

Here’s a simple "user control" that has a link and a button inside of it:

using System;
using WebPage = System.Windows.Browser.HtmlPage;
using Microsoft.Silverlight.Testing.Html;

namespace HtmlControlSample
{
    /// <summary>
    /// A simple managed HTML control.
    /// </summary>
    public class MyUserControl : HtmlDiv
    {
        /// <summary>
        /// A simple link that is hooked up to the app.
        /// </summary>
        private HtmlAnchor _appLink;

        /// <summary>
        /// A simple button.
        /// </summary>
        private HtmlButton _button;

        /// <summary>
        /// Initializes a new instance of the MyUserControl control.
        /// </summary>
        public MyUserControl()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Initialize composite controls and add them as children.
        /// </summary>
        private void InitializeComponent()
        {
            // A link that will display the current time
            _appLink = new HtmlAnchor(
                "Click me for the time!",
                (sender, e) => Alert(DateTime.Now.ToLongTimeString()));

            _button = new HtmlButton();
            _button.InnerText = "Toggle my boldness";
            _button.Click += (sender, e) => _button.Font.Bold = !_button.Font.Bold;

            Controls.Add(_appLink);
            Controls.Add(_button);
        }

        /// <summary>
        /// Uses the Alert method of the HTML interoperability feature to
        /// display text.
        /// </summary>
        /// <param name="text">The text to display.</param>
        private static void Alert(string text)
        {
            WebPage.Window.Alert(text);
        }
    }
}

To hook it up to the application, here is a simple class that shrinks the Silverlight plugin to not occupy any space on the page, that creates a new instance of the MyUserControl type and appends it to the web page body.

The HideSilverlightPlugin function is important because it lets you press F5 while working in a standard Silverlight application project.

using System;
using Microsoft.Silverlight.Testing.Html;
using WebPage = System.Windows.Browser.HtmlPage;

namespace HtmlControlSample
{
    /// <summary>
    /// A sample HTML application.
    /// </summary>
    public class SampleHtmlApp
    {
        /// <summary>
        /// The application's user interface control.
        /// </summary>
        private MyUserControl _myUserInterface;

        /// <summary>
        /// Initialize and run the application.
        /// </summary>
        public static void Run()
        {
            new SampleHtmlApp();
        }

        /// <summary>
        /// Initializes a new instance of the SampleHtmlApp class.
        /// </summary>
        private SampleHtmlApp()
        {
            HideSilverlightPlugin();

            // Creates a new managed HTML control
            _myUserInterface = new MyUserControl();

            // Appends the control to the web page body
            WebPage.Document.Body.AppendChild(_myUserInterface);
        }

        /// <summary>
        /// Takes the current Silverlight plugin instance and changes its size
        /// to be 0x0 pixels. Makes the same change to the hosting div element.
        /// This enables F5 testing of a managed HTML control app inside Visual
        /// Studio when using the standard TestPage.html in a Silverlight app.
        /// </summary>
        private void HideSilverlightPlugin()
        {
            HtmlControl plugin = new HtmlControl(WebPage.Plugin);
            HtmlControl host = new HtmlControl(WebPage.Plugin.Parent);
            plugin.Width = 0;
            plugin.Height = 0;
            host.Width = 0;
            host.Height = 0;
        }
    }
}

You can call the Run() method from anywhere in your Silverlight application – both can co-exist without issue. However, I’ve just replaced the RootVisual call in the Application_Startup method to demonstrate this example:

        public App()
        {
            this.Startup += this.Application_Startup;
            this.UnhandledException += this.Application_UnhandledException;

            InitializeComponent();
        }

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            SampleHtmlApp.Run();
        }

Here is this simple HTML application (powered by Silverlight) running on OS X 10.5 in the Safari web browser:

Appending a managed control tree to HtmlElements

Thanks to an extension method, you can append a managed HTML control (that inherits from HtmlControlBase) to the standard HtmlElement inside Silverlight as if the control is an HtmlElement:

The managed control wrapper actually tracks any changes (styles, properties, child controls) to the control and waits until it is inserted into the live web page tree to apply the properties and create the child elements.

At the end of the day there are a lot of types involved here, bridging several layers of abstraction. This is definitely not a "lightweight" solution.

These bits are in use today

One of the key features of the in-browser Silverlight unit test framework is that it exposes an interactive log inside the browser, using the HTML interoperability feature.

If you’ve used the Silverlight unit test framework, then you’ve used this managed HTML controls implementation without knowing it: to move away from "spaghetti-code", we setup the log to use simple custom controls built on top of this framework.

Here’s a few screenshots of components, including a ProgressBar control:

Here’s the implementation of the ProgressBar:

using System;
using Microsoft.Silverlight.Testing.Html;

namespace Microsoft.Silverlight.Testing.UnitTesting.UI
{
    /// <summary>
    /// A control to visualize a test run's progress.
    /// </summary>
    public partial class TestRunProgress : HtmlDiv
    {
        /// <summary>
        /// The percent of the run that is complete.
        /// </summary>
        private double _percent;

        /// <summary>
        /// The progress bar.
        /// </summary>
        private HtmlDiv _progress;

        /// <summary>
        /// Initializes a new progress bar control.
        /// </summary>
        public TestRunProgress() : base()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Gets or sets the percent complete on a scale from 0 to 100.
        /// </summary>
        public double PercentComplete
        {
            set
            {
                _percent = value;
                UpdateProgressBar();
            }

            get
            {
                return _percent;
            }
        }

        /// <summary>
        /// Sets the color of the progress bar.
        /// </summary>
        /// <param name="value">The color value.</param>
        public void SetProgressColor(string value)
        {
            _progress.BackgroundColor = value;
        }

        /// <summary>
        /// Updates the progress bar.
        /// </summary>
        private void UpdateProgressBar()
        {
            double width = (double)GetProperty(HtmlProperty.ClientWidth);
            if (width <= 0)
            {
                return;
            }
            int round = (int) Math.Round(_percent * (width / 100));
            _progress.Width = round;
        }

        /// <summary>
        /// Initializes the web control.
        /// </summary>
        private void InitializeComponent()
        {
            SetStyleAttribute(CssAttribute.Position, "relative");
            _progress = new HtmlDiv();
            _progress.SetStyleAttribute(CssAttribute.Position, "absolute");
            _progress.Position.Left = _progress.Position.Top = _progress.Position.Bottom = 0;
            SetProgressColor(Color.Black);
            MakeTransparent(_progress, 25);
            Controls.Add(_progress);
        }

        /// <summary>
        /// Makes a control transparent.  Works with several browsers.
        /// </summary>
        /// <param name="control">The control.</param>
        /// <param name="opacity">The opacity amount.</param>
        private static void MakeTransparent(HtmlControl control, int opacity)
        {
            control.SetStyleAttribute("filter", "alpha(opacity=" + opacity + ")");
            control.SetStyleAttribute("-moz-opacity", "." + opacity);
            control.SetStyleAttribute("opacity", "." + opacity);
        }
    }
}

Clicking on a test method name expands a details drill-down full of stats and information, including links that can be clicked to retry tests and display easy-to-copy details:

Download the bits

Since this is only a concept, and not something you would want to use in a production application, the bits are currently only available as part of the Silverlight unit test framework download for the Silverlight 2 Release Candidate 0.

The implementation is not a complete framework, but rather a minimal set that enables basic functionality: links, buttons, and displaying and creating HTML elements. It does not contain a rich web forms implementation, cool validation controls, or anything like that.

In the future I may make the concept available as a download separate from the test framework, but today I want to make it clear that it isn’t something that is ready to really be used in everyday web applications… so hopefully the total size of the test framework assembly will discourage that [81kb]!

It is totally unsupported, to be considered prototype code.

Here’s the set of types and enums in the namespace today. You’ll see that it is a minimal set, and isn’t including a lot of the typical HTML controls like check boxes, forms, or web form controls. There’s room to innovate, but the value may not be there:

Do let me know if you like it, or build anything noteworthy, in the comments, and I will post a follow up in the future.

Other ideas

There is potential for the concept in some apps, and I’m sure some really brilliant folks out there could do any of the following things that’ve come across my mind:

• Writing an ASP.NET-style XML parser using System.Xml.Linq, enabling you to embed .aspx-like pages inside your application to enable generating managed HTML control trees at runtime
• Integrating with XAML, so a XAML page could contain a managed HTML control tree
• Writing a compatibility layer that would allow custom ASP.NET controls to run inside Silverlight
• Integrating or porting popular AJAX functionality (animations, rich control behaviors)
• Writing applications that live as a .Xap file at your CDN or Amazon S3, and access cross-domain web services for any data needs, combined with isolated storage

I’ve built a number of fun applications using this framework and think it’s a neat concept, I will share those sometime…

Special thanks to Hao Kung, Huangli Wu, Stefan Schackow, and Wilco Bauwer for their excellent work in shipping the amazing HTML DOM feature inside Silverlight 2!

Hope you find this interesting,

-Jeff

Now that we’re clear on that one, this is the part where I show you that you can do a ton of stuff in Silverlight, through the JavaScript interoperability features.

Reaching out to the browser can help you improve the fit and finish of your Silverlight application and to integrate with existing services.

So, if you can do it in AJAX/JavaScript, you can totally do it in your Silverlight application when it is hosted in a web browser.

Reasons not to use the “HTML DOM bridge” (JavaScript interoperability features) in Silverlight:

• Feels “Hacky”
• Leads to spaghetti code – the calls are very procedural and you lose the nice strongly typed features of your .NET language of choice
• One line of JavaScript often takes 3 or 4 lines of managed code to accomplish the same thing via the interop syntax
• The rich presentation framework in Silverlight is pretty awesome – you should use it!
• Potential performance implications having JavaScript – native code – managed code all involved with timers, marshalling, etc.
• Can just use JavaScript without requiring the Silverlight 2 runtime

Reasons to use it:

• Interact with the web browser host: set the page title, alter the plugin, add dynamic HTML content on the fly
• Bridge classic web applications, AJAX apps, and rich Silverlight
• Can replicate the experience of a server-side application, with web forms, HTML elements, and more – all on the client-side, without having to go back to the server to run an ASP.NET or PHP application
• A lot of analytics and advertising systems are exposed great in JavaScript

What follows is a list of some previously covered articles and examples. They may be out of date; for instance, in the Release Candidate of Silverlight, you now use the ScriptObjectCollection instead of the HtmlElementCollection. Mike Snow has a nice list of the breaking changes.

Access and create JavaScript arrays from managed code

You can access JavaScript arrays, but because of the loosely-defined, “do anything you want in JavaScript” way that things work, it leaves you with pretty unattractive managed code.

VB samples are here. Some C# samples:

// Create an array
var array = (ScriptObject) HtmlPage.Window.Eval("[10, 9, 8, 7, 6 ];");

// Get the length of an array
int length = (int)((double)array.GetProperty("length"));

// Return a single element by index
var singleElement = array.GetProperty(index.ToString())

Resize the Silverlight plugin

You can change the size of the plugin and its host element. Here’s some Visual Basic that makes a “zero-pixel” plugin:

Imports System.Windows.Browser

Namespace System.Windows.Browser
    Public Class ZeroPixelPlugin
        ''' <summary>
        ''' Resizes the Silverlight plugin and its host element to be zero pixels
        ''' in width and height. Only really useful for HTML
        ''' </summary>
        ''' <remarks></remarks>
        Public Shared Sub HideSilverlightPlugin()
            Dim plugin As HtmlElement = HtmlPage.Plugin
            Dim host As HtmlElement = plugin.Parent
            plugin.SetStyleAttribute("width", "0")
            plugin.SetStyleAttribute("height", "0")
            host.SetStyleAttribute("width", "0")
            host.SetStyleAttribute("height", "0")
        End Sub
    End Class
End Namespace

Get information about the browser and physical screen

Wondering what the color depth is of your end users? Want to work with the available screen size? All this information is exposed by JavaScript and you can easily read the values in C#.

Here’s a simple static class that does the work for you. The class takes care of the differences between the NPAPI web browsers and Internet Explorer, so your application doesn’t need to worry about it so much.

 Store text in the clipboard

If you have information that you want your end users to be able to copy into the clipboard, you only have a few options:

• Place the text in a TextBox control, allowing a user to select and press Control + C or Command + C to copy it into their clipboard
• Use interop features to talk to the web browser, or other plugins

Here’s a solution that uses the browser APIs in IE, and another plugin if you’re on a non-IE browser. It isn’t perfect, but it’s an interesting hack.

Generate an entire HTML/AJAX-style user interface

You can write complete applications, just like an AJAX app, using managed code. Your business logic and other components benefit from strongly typed, easy-to-edit C#. Your application can be delivered through a .Xap, and doesn’t have any server side dependencies if it is written just right.

Here was a homepage “link cloud” app. It hasn’t been updated in a while, but most of the code should work without changes in the release candidate.

Some of the things the app and the post show:

• Creating and managing HTML elements in .NET
• Attaching and working with HTML DOM events
• Using IsolatedStorage for saving information on the local machine

Interface with web analytics software

A while back (yeah, Silverlight 1.1 days) I posted about interfacing with Google Analytics / Urchin. Although the information is still useful, Google did make some major updates to the APIs, so I’d recommend not using the Urchin implementation in the post.

Anything else cool?

If you’re using the DOM bridge to do some interesting stuff, feel free to post a link here – I’d like to post about the neat uses at some point in the near future.

Well, I hope that gets you started working with the interop features a little more. Done right, you can start wearing a T-shirt the says “I do it in JavaScript… AND in .NET!”

Internet Explorer-only Clipboard Access

IE provides limited clipboard support in script. Using the interoperability features in Silverlight this data can be accessed.  The user will be prompted to approve the clipboard access using this method.

Open IE Clipboard demo (133k)
Requires Silverlight 2 Beta 1

Here’s the static clipboard method I created to attempt to write to the clipboard.  If the user denies the request, or the clipboard API is not available, an alert informs the user.  A successful write to the clipboard does not result in any visual confirmation.

Clipboard.cs:

using System;
using System.Windows.Browser;

namespace ClipboardDemo
{
    public static class Clipboard
    {
        const string HostNoClipboard = "The clipboard isn't available in the current host.";
        const string ClipboardFailure = "The text couldn't be copied into the clipboard.";

        /// <summary>
        /// Write to the clipboard (Internet Explorer-only)
        /// </summary>
        public static void SetText(string text)
        {
            // document.window.clipboardData.setData(format, data);
            var clipboardData = (ScriptObject)HtmlPage.Window.GetProperty("clipboardData");
            if (clipboardData != null) {
                bool success = (bool)clipboardData.Invoke("setData", "text", text);
                if (!success) {
                    HtmlPage.Window.Alert(ClipboardFailure);
                }
            }
            else {
                HtmlPage.Window.Alert(HostNoClipboard);
            }
        }

    }
}

In the button event handler in my demo app, I simply call the static method to write to the clipboard:

        private void Go_Click(object sender, RoutedEventArgs e)
        {
            Clipboard.SetText(ClipboardText.Text);
        }

Cross-browser, cross-platform solution

Now, this one’s a little interesting: since Flash does have clipboard access, you can actually use it from the web browser (JavaScript) or even Silverlight 2 (HTML DOM bridge) to enable a cross-browser, cross-platform clipboard copy function.  It’s a hack, but does get the job done.

I think there’s enough space in the world’s hard drives for both Flash and Silverlight on every computer!

Open Cross-browser, Cross-platform Clipboard demo (133k)

Requires Silverlight 2 Beta 1

To do this, I’ll be using the Flash component that ships with the syntaxhighlighter tool created by Alex Gorbatchev.  By simply adding a new Flash embed to the page and referencing his clipboard.swf Flash movie file, the Flash API will then attempt to write the proper data into the clipboard.

The implementation I’ve done here isn’t super robust: if the user doesn’t have Flash, there’s no error message for instance.  If the user’s browser is Internet Explorer, or implements the clipboardData API, then the Flash workaround will not be used.

Here’s the expanded Clipboard.cs.  Do note, I’m hard-coding the clipboard.swf location, so make sure you’re using a valid path on your server.

Clipboard.swf:

Make sure to download this file (here syntaxhighlighter) and store it in the same directory as your application.

Clipboard.cs:

using System;
using System.Windows.Browser;

namespace ClipboardDemo
{
    public static class Clipboard
    {
        const string HostNoClipboard = "The clipboard isn't available in the current host.";
        const string ClipboardFailure = "The text couldn't be copied into the clipboard.";
        const string BeforeFlashCopy = "The text will now attempt to be copied...";
        const string FlashMimeType = "application/x-shockwave-flash";

        // HARD-CODED!
        const string ClipboardFlashMovie = "clipboard.swf";

        /// <summary>
        /// Write to the clipboard (IE and/or Flash)
        /// </summary>
        public static void SetText(string text)
        {
            // document.window.clipboardData.setData(format, data);
            var clipboardData = (ScriptObject)HtmlPage.Window.GetProperty("clipboardData");
            if (clipboardData != null) {
                bool success = (bool)clipboardData.Invoke("setData", "text", text);
                if (!success) {
                    HtmlPage.Window.Alert(ClipboardFailure);
                }
            }
            else {
                HtmlPage.Window.Alert(BeforeFlashCopy);

                // Append a Flash embed element with the data encoded
                string safeText = HttpUtility.UrlEncode(text);
                var elem = HtmlPage.Document.CreateElement("div");
                HtmlPage.Document.Body.AppendChild(elem);
                elem.SetProperty("innerHTML", "<embed src=\"" +
                    ClipboardFlashMovie + "\" " +
                    "FlashVars=\"clipboard=" + safeText + "\" width=\"0\" " +
                    "height=\"0\" type=\"" + FlashMimeType + "\"></embed>");
            }
        }

    }
}

Hope this helps!

A very common request I hear is “how in the world do I access elements in a JavaScript array in managed code” ?

Since a JavaScript array is just a JavaScript object, and the array indices are just numbered properties, that means GetProperty is your answer.

Create a JavaScript array

Use the Eval method on the window to create a new array in JavaScript.  The ScriptObject reference allows you to interact with it:

C#
 

VB

Get a JavaScript array’s length

C#

VB
 

Return a single element

Individual elements are stored as numbered properties, just use GetProperty with the index of interest to retrieve an element:

C#

VB

A key developer in the Silverlight project for bringing this code is Wilco Bauwer, his first post on the HTML DOM interop is here. 

Hope this helps!

The app has some key features:

• No dependencies on a web server, web service, or database server
• Links are true HTML links that get larger the more often they’re clicked.  They can be added, removed, and rearranged
• Stores the link information locally, available to all browsers on the platform
• The data is yours: you can import/export the raw data to easily bring it to another of your computers

Special thanks to Chris Gansen for letting me borrow the specifics from his RoR implementation of this application, it translated nicely to a client app.

Experience this application live. 
Since the local isolated storage is used, the links are only on your machine, the first time you use the app it’ll have no links.  Click here for a text file you can paste in using the import/export feature to load a set of sample links.  I store my link cloud in GMail so that I can always setup another machine in seconds from my mail account.

The .Xap file that represents the app is a miniscule 10kb.  By comparison, a server-side version of this app can easily serve 40kb pages once the editing interface is included.  The only hard-coded dependency is the stylesheet link that I’m injecting at runtime.

This uses many of the less sexy Silverlight 2 Beta 1 features:

• HTML DOM interoperability: the bridge between managed code and the web browser, the entire underlying user interface is generated and managed by managed code
• Local isolated storage: By storing the data on the local machine, there’s no complex web service or database required
• ApplicationSettings: An easy-to-use way of storing data to the isolated storage area, there’s no need to deal with StringReaders and Stream manipulation code
• Zero pixel 0×0 plugin: By resizing the Silverlight plugin to occupy no space upon load, the application demonstrates the capabilities of managed code without the use of controls and the rich presentation framework
• .Xap package is easy to deploy and store on a content delivery network, file or web server

Although I’m using ApplicationSettings type to store the link cloud data, I just wanted to get this up and running, so I’m not following any best practices, and am actually serializing the cloud data myself into a single string.

Downloads
Live app (10k) – feel free to use this for your homepage
Sample data file (2k) – can import for sample data
Source code (39k) – Zip file with the Visual Studio project, just barebones code, no good code in here
LinkPage.cs (21k) – Primary source file

Briefly jumping into the code, you’ll find that everything’s really contained inside LinkPage.cs.  Some of the things inside the file that I’d like to call out:

Setting the page title

This updates the title displayed in the browser’s window.  It’s equivalent to the simple JavaScript call of setting document.title.  The HtmlDocument type, in the System.Windows.Browser namespace, maps directly.

Reading from ApplicationSettings and changing the <body /> element’s CSS class

The ApplicationSettings type is a nice shortcut to having to use Isolated Storage, and is used to store two settings for this link cloud application: the color used for the stylesheet (there’s a few themes available), and the actual link cloud data.  The data’s updated and saved whenever a change occurs to avoid having to write the changes at one time.

Injecting a Stylesheet element

Pretty standard document object model workflow here: the code’s nothing but spaghetti.  The new element is created, attributes set, and then appended.  There’s no need to keep a reference to the element unless you intend on interacting with it later.

There’s a built-in property HtmlPage.Document.Body that can be used to return the <body /> element on the web page, but not one for the <head /> element.  The code above successfully will add to the head of the page, assuming the head exists.

Prompting the user for confirmation

A lot of AJAX applications use ‘confirm(…)’ to get quick verification before deleting data permanently.  Both Alert and Confirm are available within the HtmlWindow type in the HTML DOM bridge, so it’s super easy to do the same in managed code:

Navigating to a new web page

The links in the link cloud have the href attribute set to point to the destination page – this enables the end user to open the links in a new tab or window easily.  However, the click count is only incremented when the link is clicked since the onclick event is used to track and increment the underlying hit data.

The Navigate method of HtmlWindow is used to go to the requested URI.

Creating an HTML button and hooking up to its Click event

The form that’s created on the page uses managed event handlers in C# to process events and read data:

The button above is used to add the form data into the cloud as a new link.  If you examine it you’ll also see use of SetProperty, SetStyleAttribute, GetProperty, and more – these are all at parity with traditional AJAX JavaScript coding, so it should be quite familiar. 

Wilco has a lot more information on the subject of the HTML DOM interoperability feature in Silverlight 2.

Hope you find this useful!

Looking at the spaghetti code, it’s clear that some kind of helpful “managed HTML object” library would make creating this style of application a lot easier in the future.

For everyone who appreciates the classic Gang of Four book, you’ll find helpful and interesting implementations of the basics, such as Observer, Adapter, and even Flyweight, in this book; a way to mimic interfaces for JavaScript, and the best rundown of encapsulation, inheritance, and OOP JS that I’ve seen in a book recently.

The application of the GOF patterns to JS is a sticky subject for many; with the speed that web sites and their software platform are revised, a more dynamic language like JS provides a chance to escape patterns for some. This book won’t help you solve that question, but it’ll give you good implementations and serve as ideal JavaScript code for anyone looking to spruce up their skills. Unlike a strongly typed language, part of the patterns implementation is going to be you communicating with your peers on how to actually go about consuming and publishing JS components in your product.

This also covers a lot of topics that aren’t stressed to JavaScript and AJAX developers on day one: methods being first class citizens, the importance of closures, and just how amazing JavaScript can be. I’d have to say that Chapter One, titled “Expressive JavaScript,” but each pattern-oriented chapter does a great job of covering the reasons for its need, multiple implementations, and an honest pro/con comparison.

Sour (stingy me?) point: as this was on my personal weekend reading list, value comes to mind: As with many of the shorter niche tech books these days, I find myself put off some by the $44.99 list price for just under 260 pages of content. By comparison, the very concise and in-depth Pro C# 2008 and the .NET #.5 Platform by Andrew Troelsen lists at a fair $59.99 for 1,370 pages of awesome content. Granted, both books can be had for less from any book discounter, and Apress offers an eBook format for $23.

Some of the books’ content from the publisher:

• Table of Contents [Apress.com]
• Chapter 1 – Expressive JavaScript [Apress.com]

Hope this helps!