Homepage “link cloud" application
1 April 2008
My new browser start page uses Silverlight to produce a simple link cloud. By targeting the rich class libraries of .NET that are available in Silverlight 2, the app loads quicker than a server-based solution, is useful, and very simple. The app I built is a good demonstration of the “zero pixel” Silverlight plugin concept: I’m using the HTML DOM bridge to create and manage all of the elements in the web page document.
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 0x0 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.
Jeff Wilcox is a Software Engineer at Microsoft in the Open Source Programs Office (OSPO), helping Microsoft engineers use, contribute to and release open source at scale.