Silverlight 1.0: Is It the Wave of the Future, Available Now?
By
Ross M. Greenberg
It's the answer website designers have been searching for: since they first started designing them: write a webpage with your favorite editor, most likely a WYSIWYG editor, and display it properly in every browser out there. Even better, it runs JavaScript and downloadable plug-ins really well. Although Windows-based, the JavaScript it's based upon is pretty much operating system agnostic
To do this requires a one-time installation of an easily downloadable JavaScript file (see http://www.ramnet.net/sl.JS -- a relatively sophisticated JavaScript file that promises "security through obscurity") . Note the browsers delineation in lines 23-45 -- this sets a variable, later used extensively for defining the source for various plug-ins on a browser-by-browser basis.
This works in combination with the JavaScript file http://www.ramnet.net/CreateSilverLight.js , a straightforward Instantiation script.
Silverlight is more of a platform/framework than anything else, and utilizes the XAML (pronounced as "zah-mel", leading Extensible Application Markup Language) which can take some getting used to; in fact a future column will emphasize some of the tips/tricks of efficient XAML text editing.
Microsoft is making Silverlight a major platform to code for. There are close to 100 videos available to help you learn Silverlight: The.FireStarter series of tutorials for example at http://silverlight.net/learn/videocat.aspx?cat=1#HDI1SLFireStarter , and in particular the "Brushes" video tutorial, #17 (available directly at http://silverlight.net/learn/learnvideo.aspx?video=767) . When you eat these tutorials it is probably easiest to open them in a separate pane, and then click on the WMV option then exposed, This video shows the power of creating geometric can shapes and using a "Fill Brush” to fill that shape, rectangular, elliptical, polygonal, and more with either solid-brushes, rainbow-brushes, JPEG-brushes, or even a sophisticated WMV- movie-brushes. It's really quite amazing!
The Downloader
As an example of some of the power and versatility of Silverlight 1.0, below is some example code from the Yahoo Developer Network:(http://developer.yahoo.com/dotnet/silverlight/) , a super useful site when learning Silverlight.
Often times a particular site will have a resource file containing graphics, audio, video, code, etc. in a compressed archive such as a zip file. Downloading this file and getting to the constituent members of that file has always been very difficult. Not so with the auspices of Silverlight, its framework and its Ajax asynchronous ability.
With no further ado, The Downloader:
Please note on line 5 the creation of a plug-in object. In Silverlight 1.0 plug-in downloads are restricted to the same domain. So if you are on DomainA you will not be able to download a plug-in from DomainB. This limitation has been fixed in Silverlight 2.0.
Line 10 and 12 are instantiating a couple of event handlers, the first for showing the progress of the download, and the second is called when the download is complete. The file to download a specified online 16 however the actual download itself does not start until the "Send" method is called.
this is the beginning of the actual download itself. Note there is loading some XaML code from within the archive itself! Super cool!!
Now the actual application itself:
MyApplication9.prototype = {
Initialize: function(plugIn, userContext, rootElement)
{
// Get and store object references
this.txtAction = rootElement.FindName("txtAction");
this.txtStatus = rootElement.FindName("txtStatus");
// Create a new Downloader object
this.downloader1 = plugIn.CreateObject("Downloader");
// Hook up events
this.downloader1.AddEventListener("Completed",
Silverlight.CreateDelegate(this, this.downloader1_Completed));
this.downloader1.AddEventListener("DownloadProgressChanged",
Silverlight.CreateDelegate(this, this.downloader1_DownloadProgressChanged));
// Save the current time
this._startTime = new Date();
// Start downloading
this.downloader1.Open("GET", "MyApplication9/preview.png?" + Math.random());
this.downloader1.Send();
},
downloader1_Completed: function(sender, e)
{
var totalTime = new Date() - this._startTime;
this.txtAction.Text = "Completed in " + totalTime + "ms";
this.txtStatus.Text = "100%";
/* Other things that you could do with downloaded content
// Set a downloaded image as the source for an Image object
this.imgSample1.SetSource(sender, "");
// Set image from a downloaded package, with the filename "preview.png", to an Image object
this.imgSample1.SetSource(sender, "preview.png");
*/
},
downloader1_DownloadProgressChanged: function(sender, e)
{
var percent = Math.floor(sender.DownloadProgress * 100);
this.txtStatus.Text = percent + "%";
}
}
Note that Line 23-28 indicates that just about anything can be set for "Upon Completion"; for example it becomes trivial to extract graphics file from the archive and display it on the "Canvas" in some type of amazing frame with the graphics file set as fill or as an image-brush. Likewise, if the archived file is a movie, such as a.WMV movie, taking with such a movie becomes easy.
Again, from the Yahoo development site comes a simple Silverlight installation and usage script, which downloads and installs the Silverlight.JS and the creek CreateSilverlight.JS as required.
The function started on 15 and continuing until line 28 check to see if the Silverlight is installed. The Silverlight.isInstalled function in line 19 is interesting: it takes the version number of Silverlight desired and returns a true or false condition based upon this minimum version number -- just becomes more important as Silverlight 2.0 is now released.
Further, please note the rather questionable means Yahoo opts to use to invoke XaML processing: the timeout in line 24 is is a rather unique way of calling line 44! When queried a number of programming geeks were split about whether this was proper or improper coding: may only universally agreed that if they were in no other way of doing things man using an error condition it would have been preferable. Regardless, it worked. By definition, therefore, that means it is good code. :-)
In Yahoo's defense, utilizing the timeout facility does resoundingly and ultimately quench potential synchronization problems that can exist: the Silverlight code must obviously already be instantiated before it is run and the timeout facility does provide for that rather nicely...
Ajax, Partial Postbacks and UpdatePanel
Fasten your seatbelts. We're going to cover the UpdatePanel. It's very powerful. And probably ornery/troublesome enough that Silverlight 2.0 could/would/should be born. Here's why:
First, just to give you an idea of the complexity found in Silverlight, take a gander at this chart, http://www.RamNet.net/Silverlight_Class_Diagram.pdf . There isn't one available yet for Silverlight 2.0 -- but it would likely me just as complex if not more so!
A common problem arises when client-side objects are created and associated with an UpdatePanel:
There is no polite way way of saying it: UpdatePanels Are Inherently Evil.
The beauty of Ajax and UpdatePanel isn't sending partial page rendering Postbacks. The danger using ViewState improperly: doing so makes the whole page very slow: not only would the partial page be posted back using a JavaScript submit, the entire page in the form thereon would be submitted back to the server. Not exactly what was in mind for Ajax!
Before going into any of the problems with UpdatePanel, let's take a look at its proper implementation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax test page</title>
</head><body>
<form id="AjaxTestForm" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<p>
Please Enter Your Name?<br />
<asp:TextBox ID="NameText" runat="server" />
</p>
<p>
When Is Your Birthday?<br />
<asp:TextBox ID="BirthdayText" runat="server" /><br />
</p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Click" /><br />
<asp:Label ID="ResponseLabel" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script runat="server" language="csharp">
private void SubmitButton_Click(object sender, EventArgs e)
{
DateTime birthday = DateTime.Parse(BirthdayText.Text);
if (birthday.Date < DateTime.Today.Date)
ResponseLabel.Text = string.Format("Sorry {0}, looks like I missed your birthday!", NameText.Text);
else if (birthday.Date > DateTime.Today.Date)
ResponseLabel.Text = string.Format("Thanks {0}, I'll put that date in my diary!", NameText.Text);
else
ResponseLabel.Text = string.Format("Happy Birthday {0}!", NameText.Text);
}
</script>
</body>
</html>
Note the creation of a form online 7 -- the run at server "property" is vital for the proper operation of the ASP.net functionality, as is the inclusion of the ScriptManager. In-line 8, and in the input elements I line 11 and 15 but note that the input itself has an ID= value which allows the contents to be referred to later in lines 25 and 27. Please further note the parsing of the birthdate in line 25 and its processing/comparison in lines 26, 27 and finally 28, all done with the methodology of the.Net Framework -- pretty impressive stuff in just a few lines!
This example is available for download at http://www.ramnet.net/upd1.txt . Visual Web Developer is able to open it and execute it with a simple CTRL-F5.
I am of the opinion that Silverlight 1.0 was the beginning of a transition in the creation of webpages, and that all of the problems in the growing pains of Silverlight 1.0 had been rectified in Silverlight 2.0.