Home > Uncategorized > CoolWall – a Silverlight 1.0 application reflection

CoolWall – a Silverlight 1.0 application reflection

December 13, 2007

[UPDATE:My video interview is now live on Channel 10]

A large amount of my time last week was spent on a little project called Microsoft CoolWallTim Sneath already posted about the site going live this week and provided the story on how the app came to be:

The application was originally prototyped with the Silverlight 1.1 Alpha by Dot Net Solutions, a UK-based solutions integrator firm, and as a bit of fun, Adam agreed to try back-porting it to Silverlight 1.0 to see whether everything they’d implemented in C# could be as easily accomplished in JavaScript. I’ve noticed a certain preconception that Silverlight 2.0 is the “one to wait for” because it’s the platform that allows you to use a “proper” language like C# or Visual Basic. Of course, having .NET languages, the base class libraries and technologies like LINQ will make RIA development a ton easier, but it’s impressive what you can get out of JavaScript, particularly when coupled with the client-centric Microsoft AJAX Library.

Microsoft CoolWall

The application resulted in a great way for me to “walk the walk” and not just “talk the talk”.  The “talk” I am referring to is the idea that “Yes, you can build more than a Media Player in Silverlight 1.0”.  (Although the folks behind the MNet.com project certainly didn’t need to hear me say that.  Yes, it plays videos, but it has built clip editing, banner ad system and web service integration).

JavaScript-heavy applications are not a new thing obviously in the AJAX age, but they are for some of those watching SIlverlight from a .NET standpoint.  Sure you don’t have the luxury of the CLR or even full controls at this point, but you can still do a lot with Silverlight in its current form.  This isn’t a full case study, but I thought I’d review some of the concepts behind developing the CoolWall application.  And first off, I may not be a JavaScript guru look some of those masters at Ajaxian, but I try.

Application model
Silverlight project templates in Visual Studio start you off with a JavaScript function with a few functions defined within the prototype of that function.  This is analogous to a class in C# with an empty constructor and a few methods defined.  This class, specifically the handleLoad function, is then referenced by the provided createSilverlight method which is called to instantiate your application.

CoolWall.Container = function()
{
}
CoolWall.Container.prototype =
{
    handleLoad: function(control, userContext)
    {
        this.control = control;
        ...
    }
}

I built out my application using this model and as the complexity increased I broke out certain functionality into other “modules”.  While simplifying the code it also allowed me to reuse some of the classes, in the case of the button, as well as control the application initialization.  The control was necessary do to some of the events fire asynchronously and I needed to ensure all elements were created by the time they were needed.

Most every class also had a physical representation on the screen and linked directly to existing XAML that was created.  In some cases the XAML from the main file is handled by separate modules and in other cases the XAML is loaded dynamically along with a new instance of the class.

UserControl Pattern
The buttons defined above and the image items that you drag into place were handled via a pattern to define user controls.  The XAML comes from a separate file which is downloaded by a Downloader object, which stores the XAML in a string variable when the application loads. Then when the time comes to instantiate a new control, the createFromXAML method is used passing the stored XAML string as parameter which then returns a Silverlight object, in this case they were Canvases with children of their own.  Then the object is added to the children collection of a canvas which lives within the main XAML.

To provide the interaction and integration a new JavaScript class, defined using the pattern above,  is instantiated and a reference to the newly created Silverlight object is passed in the constructor.  In this case, the newly created JavaScript object is then added to an Array in order to maintain a reference for the application state and cleanup.

draggableImage = this.control.content.createFromXaml(this.xamlString, true);
...
this.items[i] = new CoolWall.DraggableImage(this, draggableImage, imageUrl, ...);

 HTML Control Integration
One of the first things you notice when investigating Silverlight for development is that there are no controls.  This may seem alarming, and yes, I am really looking forward to version 2.0 and its control set, but there is hope.

The integration between the Silverlight DOM and the JavaScript DOM is so well done there is no problem traversing the trees to get to HTML-based controls (you can even make it to other rich objects on the page).  Now the only other thing to think about is that by default the Silverlight instance is windowed like a combo box or most any other browser plug-in.  You can change this during the creation of your Silverlight application by setting the Windowless property to true.  Now the Silverlight instance is rendered within the page and can be positioned with CSS like a div element.  Once the HTML textboxes are in place, you can access them with JavaScript and integrate them into your JavaScript class.

handleLoad: function(control, userContext){
    this.searchTextBox = $get("searchTextBox");
    this.searchTextBox.value = "Welcome to the CoolWall";
}

ASP.NET AJAX
I have used the ASP.NET AJAX library before, but not to this extent.  The more I used it the more fun it was.  In this application ASP.NET AJAX, helped in two major ways. 

The first way was the Web Service Proxy.  Using the ScriptManager, you can add a reference to .asmx page containing your services, which will then be proxied as JavaScript functions.  Very easy to use and I love the fact that serialization and de-serialization is handled for you.  You can pass the string “00000000-0000-0000-0000-000000000000” as a parameter and it will happily convert to a Guid.Empty.  A sample call in script looks like this:

CoolWallService.SearchMSNLive(searchTerm,Silverlight.createDelegate(this, this.onSearchCompleted));

The create delegate method is used there to handle the asynchronous completion of the web service call, but still maintaining the context of the class that calls the service.

The second way the AJAX library helped, was similar to other AJAX libraries where it extends the functionality of JavaScript.  Code is easier to write once you have methods like Array.add() , String.format and the $get function used above.

Live Search and Live ID Integration
Most of the work done here came from the prototype, but it was very simple to implement using the Web Service proxies mentioned above.  Both services seem very simple to write against, once you setup AppIDs with each service, you can leverage the code that comes with the respective SDK.  I can envision myself using the LiveID Web Authentication model in the future as way of providing simple, even optional, personalization to an app.

Install Experience
Almost forgotten, but quickly added the optimized Silverlight install experience.  And I say quickly added, because the InstallCreateSilverlight.js file that comes with Silverlight Installation Experience Guide almost does all of the work for you.

Conclusion
Even though, I wish I would have had an extra week to do this, I’m really happy to have gone through the work to benefit from the lessons learned.  There are a few more features I’d like to see like a lightbox effect to view the images in a larger size, but I’m pretty happy with what got implemented.  I still need to make my Christmas wish and this might just be the way to do it.

Oh and plus, I was interviewed about the application an the video should be showing up soon on Channel 10.  The interviewer was kind of goofy, but it was fun.

%d bloggers like this: