n summer 2007, Microsoft released version 1.0 of Silverlight, a revolutionary way to build rich interactive experiences on the web. Silverlight is a cross-platform, cross-browser plug-in that extends the browser's Document Object Model (DOM) with vector graphics and multimedia features. Based on XML Application Mark-up Language (XAML), the same technique used in the Windows Presentation Foundation (WPF), Silverlight can be scripted with JavaScript and can work within AJAX-enabled web pages.
Microsoft Silverlight Streaming by Windows Live is a free streaming and application hosting service for delivering rich interactive applications (RIAs) over the web. Silverlight supports a range of video formats including high definition (HD) and (SMPTE) VC-1.
Silverlight provides a consistent user experience with Firefox and Safari on the Mac and Firefox and Internet Explorer on Windows. Even Linux users can run Silverlight using Novel's open-source Moonlight code. In fact, you're not locked into the Microsoft platform at all—it's just as easy to deliver Silverlight experiences from PHP sites on Apache/Linux as it is from ASP.NET sites on a Windows Server.
In this article you'll see how to get started with Silverlight and how to upload your applications and rich media to the Silverlight Streaming Service.
"Hello World" in Silverlight
Users need to install the Silverlight 1.0 runtime for their browsers. The first users visit a Silverlight-enabled site such as
http://www.microsoft.com/silverlight, they're directed to an installation process. The runtime is surprisingly small (less than 2 MB) and installs quickly and painlessly.
I'll start with a simple Silverlight "Hello World" demonstration.
Using XAML, define a Canvas that includes a TextBlock with the "Hello World" text and save this file as
Hello.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock FontFamily="Times New Roman"
FontSize="70"
FontStyle="Italic"
Foreground="Green"
Text="Hello World" />
</Canvas>
Create a short HTML page to host the Silverlight control, and call it
Default.html:
<!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" xml:lang="en">
<head>
<title>Hello World</title>
<script type="text/javascript"
src="Silverlight.js"></script>
<script type="text/javascript"
src="CreateSilverlight.js"></script>
</head>
<body>
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
You must also provide two JavaScript files. The first,
Silverlight.js, is part of the Silverlight SDK, so you get it when you download the SDK. The second,
CreateSilverlight.js contains the code responsible for instantiating the Silverlight control with your specific XAML page. Here's the code:
function createSilverlight()
{
Silverlight.createObjectEx({
source: 'Hello.xaml',
parentElement: document.getElementById(
'SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
 | |
| Figure 1. Running the Silverlight Hello World Application: Loading the default.htm page runs the CreateSilverlight.js script to instantiate the Silverlight control. |
properties: {
width: '400',
height: '400',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: null
},
context: null
});
}
You should now have four files:
default.htm,
Hello.xaml,
CreateSilverlight.js, and
Silverlight.js. Launching
default.htm in a browser runs the application (see
Figure 1).
| Editor's Note: This article was first published in the "Windows Live" edition of CoDe Focus Magazine (2008, Vol. 5, Issue 2), and is reprinted here by permission. |
Digg
del.icio.us
Newvine
furl
StumbleUpon
BlinkList
Newsvine
Magnolia
Facebook
Tailrank
Slashdot
Technorati
Google Bookmarks
Yahoo Favorites
Windows Live
Ask
