Share on Facebook
This is an updated version of an older post - and at the bottom is a link to the entire eCommerce demo project that I used for my MDC presentation. I'll write more about the rest of the MDC demos later.
As I’ve already mentioned, I'm an advocate for using Silverlight in moderation - keeping the web WEBBY. I'm also one very excited Silverlight programmer. That's why I use islands of Silverlight in my html pages instead of one huge monolithic Silverlight application that takes over the entire experience.
I’ve developed a method which I think will enable me to show those clients who are capable of enjoying a Rich Internet Application experience a Rich Internet Application and at the same time, if my visiting client isn’t going to be able to use the RIA, it’s not sent down at all.
I deal with this situation by loading the Silverlight controls upon request using an AJAX request that will retrieve and load the Silverlight control when the document is ready (the document is ready when the required elements are loaded). I'm using jQuery for this. It makes my life easy. If you haven’t heard of jQuery it’s a javascript framework that makes manipulating the Document Object Model (DOM ) as easy as calling out a CSS selector.
jQuery makes it very easy to retrieve the html that will load a beautiful Silverlight menu up. And To keep presentation separate from content, I put this in an external javascript file, which is menu.js, and link to it in the html of the page.
<script src="/Scripts/menu.js" type="text/javascript"></script>
This Silverlight control loading process consists of:
- Request the html snippet which is the html object element that will name the Silverlight .XAP file.
- Replace two tags within the html with the proper values.
- o tag 1 is the server path to the silverlight control. it is in the html snippet as [path] and is replaced with the proper path
- o tag 2 is the control parameters - controlid is used by app.xaml to identify which control to show. Any other parameter needed by the current control is also placed into the object html at this time by using the format: "ControlId=4,ExtraParam=...." where ExtraParam will be that parameter whatever it's called and it's value will follow. (maybe a guid for an id ) the text that is replaced in tag2 is [initparams]
- · insert that html is into a div within the document - at which time the Silverlight control is created
In menu.js, the contents of the javascript function that take care of loading Silverlight if javascript is enabled in this user’s browser is:
$(document).ready(function () {
//fetch the silverlight menu and plug it in, it's controlid #1
$.get('/Content/sl.htm', function(data){
setSilverlight(data, 'ControlId', 1, '');})
});
The document ready function is JQuery’s way to let you attach to the onload event of the window. And what it does is wait for all the elements your javascript needs to load. It doesn’t necessarily wait for the whole page to be loaded and when these elements are present, it executes your named function. Document ready is chainable. So you can have your Document Readys ALL over the place and they will just keep adding on to each other. They don’t replace each other. So one document ready in one file and a document ready in another file are going to complement each other.
The contents of the file that we’re going to be retrieving in this AJAX request is html and it is the <object> element that loads the Silverlight object. Here’s the sample.
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
<param name="source" value="[path]"/>
<param name="onerror" value="onSilverlightError" />
<param name="initparams" value="[config]" />
<param name="windowless" value="true" />
<param name="background" value="#00000000" />
</object>
I have a couple of variables in this html that I can replace in the javascript which enables this to be used as a template.
When the jQuery HttpRequest is completed, the function setSilverlight is executed with the parameters ‘ControlId’ and 1. ‘ControlId’ is the name of the parameter which will be sent to Silverlight and 1 is the value Controlid will be set to. ControlId=1
This is the setSilverlight javascript, you can see that the square-bracket-config value is replaced with my param and value:
function setSilverlight(data, param, controlId, divname, requested) {
data = data.replace('[path]', '/Content/MDCSilverlightDemo.xap');
data = data.replace('//', '/');
data = data.replace('[config]', 'ControlId=' + controlId + ',requested=' + requested );
$('#' + divname).html(data);//don't want to see it until it shows it's self.
}
The last line is where we see dollar, pound plus divname.html(data) is where the html in this browser window has the object element inserted into it. At this time, the Browser will retrieve and create the Silverlight control.
So to recap the loading process consists of
· Request the html
· Replace two tags
· insert that html is into a div
Link to the MDC powerpoint slides
Links to this demo project, which is created from MVC Storefront -
MVC Storefront. is an ecommerce demo and is a perfect starting place for Silverlight enhancement - you can get help for MVC Storefront here: http://www.codeplex.com/mvcsamples
Subscribe