New version of the sample
As I explained in the previous post on the subject, the sample’s code was to be opened and used with Visual Studio 2008 Beta 2. Now one week later I’m happy to inform you that the code can now be opened and used with Visual Studio 2008 RTM. It was seamlessly ported to the latest version as now the “Silverlight 1.1 Tools for Visual Studio 2008 RTM” free download is now available. You can download the latest code for the sample from here.
Silverlight basics
What I came across while explaining Silverlight to students and even more experienced developers, is that some of them did not realize quite how “the magic” works. First and most important thing to understand is that you can have Silverlight application running on your site no matter how that site is built. Whether it is pure html (no server side code), PHP driven, JSP, ASP or any other web platform used to create web sites. To the server that serves Silverlight enabled pages any Silverlight application is just a bunch of files that need to be streamed to the client. Surely, the application can be much more flexible and dynamic by using some server-side interaction but again that depends on specifics on the application. Applications are always executed on the client machine and depend only on whether the client has Silverlight plug-in installed.
Creating Silverlight objects
Created to run inside any HTML page, any Silverlight application need to be included inside a page where we want to use it. For this to happen, we need to do two things – first create the HTML page and create a hosting element for the application(some element that will contain the app in itself) and second, to actually create the application object. For our sample application the page is quite simple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>PosterDemo</title> <script type="text/javascript" src="Default_html.js"></script> <script type="text/javascript" src="Silverlight.js"></script> <style type="text/css"> .silverlightHost { height: 1500px; width: 1000px; } </style> </head>
<body> <select id="posters" onchange="Changed()" > </select> <div id="SilverlightControlHost" class="silverlightHost"> <script type="text/javascript"> createSilverlight(); </script> </div> </body> </html> |
From top to bottom here is what it contains. First there are two JavaScript files included – Default_html.js and Silverligh.js. I’ll explain the first later, the second is given by Silverlight SDK and is obligatory for every Silverlight application. It allows cross-browser plug-in installation detection plus object creation objects and methods. Right after including the JavaScript files, there is some CSS styling added to expand the application host element as much as it’s needed.
The body of the page contains only two elements – one <select> that will hold universities names so that users can select other posters, and the other is the actual host for the application <div id="SilverlightControlHost"… . Inside that host there is a simple JavaScript added that calls a method createSilverlight();
This method is defined in the file I said I’ll show - Default_html.js. It is a custom added js file that holds this code:
function createSilverlight() { var controlID = "SilverlightControl"; Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: controlID, properties: { width: "100%", height: "100%", version: "1.1" }, events: {} });
// Give the keyboard focus to the Silverlight control by default document.body.onload = function() { var silverlightControl = document.getElementById(controlID); if (silverlightControl) silverlightControl.focus(); } }
function Changed() { var posters = document.getElementById("posters");
var posterName = posters.options[posters.selectedIndex].text var control = document.getElementById("SilverlightControl"); control.Content.basic.ChangePoster(posterName); } |
As you can see there are two functions here – the first is used to create the application object, the second is called when selection inside universities dropdown is changed. I will focus on the first function as the second I will explain in future posts on the sample. So what does this function do? Here we create a variable that holds the string of application control id value – "SilverlightControl". Then there is a call to a static method of Silverlight class - createObjectEx. Both the class and the method are defined inside Silverlight.js file. This method is used to create the application – “the key to the tent”. Here are passed some parameters. More of them can be passed to customize the application if needed. As an alternative to this method there is another one – createObject. Both do the same thing and the result is the same – the difference is the way parameters are passed. I the method we used – we pass the parameters as JSON object, and so we name each property and assign a value to it – just as in C# 3.0 you can create objects from anonymous class. The second method receives all parameters as usual. You probably will ask - what parameters can you pass to this initializing method. I will not go into more details on this as there is a good article written in Visual Studio Magazine on the subject. Through this parameters you can pass not only property values but also function pointers that will be called on some events, startup parameters that can be used for application data and others.
I want to point out only one parameter – source. It is an obligatory parameter that needs to be passed to initialize the application. This parameters holds the path to XAML file with application’s main interface. As you probably realize, you can put this file anywhere you want in the site, have it automatically generated, streamed from an embedded resource or other way you like.
The final result
So what the hell happens when this “magical” method “createObjectEx” executes?! Well, this method dynamically generates HTML object and includes it inside the page’s DOM. To see what that method creates, you can use a browser plug-in that shows generated source. For IE you can use – IE Developer Toolbar. Here is the source that was generated for the sample application:
<DIV class="silverlightHost" id="SilverlightControlHost"> <OBJECT id="SilverlightControl" type="application/x-silverlight" height="100%" width="100%" data="data:,"> <PARAM value="Page.xaml" name="source" /> <PARAM value="__slLoad0" name="onLoad" /> <PARAM value="__slError0" name="onError" /> </OBJECT> </DIV> |
So what is the end result from calling “createObjectEx” method – it is an HTML object element with specific parameters assigned to it. When the Silverlight browser plug-in is installed such object elements are handled by it and the application is being executed on the client. Probably someone may be tempted to just put the <Object> html with proper parameters than to use Silverlight.js file. Yes you can do it like that but I guarantee you that it probably not run on all supported browsers and if the user does not have Silverlight installed it will fail to load and the user will not know how to have that working (where and how to install Silverlight).
For now I’ll stop here … Expect soon more details on other aspects of this demo application and Silverlight development in general.
P.S.: If you have any questions on the Demo or want just to send me a message you can comment or use Facebook messaging.
0 comments:
Post a Comment