Getting Started with Silverlight
One of the most talked-about aspects of Silverlight is its
undeniable technical accomplishments. In an age of 50 megabyte downloads,
Microsoft managed to squeeze large parts of WPF and a mini-CLR into a tiny browser
plug-in, currently under 5MB. Not only that, but it runs in the three major
browsers (Firefox, Safari and IE) and more amazingly on the three major
operating systems, with Microsoft supporting Windows and Mac OS X and Novell’s
Mono project providing a Linux runtime.
This article explains a little of the history behind
Silverlight and what you can use it for. You’ll see how easy it is to get
started, and then you’ll actually practice using a free
InnerWorkings coding challenge featuring a sample app that demonstrates how
to use and transform video in Silverlight.
Silver-what?
Windows Presentation Foundation Everywhere (WPF/E) was
announced two years ago at the 2005 PDC (Professional Developer Conference),
but kept a low profile for a long time. At Mix ’07 in May however, the first
1.0 beta was released under the Silverlight name, along with (a little confusingly)
a preview of the 1.1 release.
Version 1.0 has now been officially released and can display
vector graphics, animations and high quality video (up to 720p, the low-end of
HD). You can program it using a subset of WPF’s XAML syntax, using JavaScript
to provide interactivity.
Version 1.1 however – still in technical preview stage – is
what’s got everyone excited. Much more than a minor revision, this adds a
bite-sized CLR to the plug-in, capable of executing compiled C#, VB, Python and
Ruby code. Though it is cut-down, the Core CLR still provides a just-in-time compiler
and works with the exact same assemblies as the full-blown desktop CLR. If you
can restrict yourself to the smaller set of classes included with Silverlight’s
CLR, there is complete compatibility between the two, with no re-compilation
necessary.
How does Silverlight work?
From a user’s point of view, the experience is designed to
be as smooth as possible. On visiting a Silverlight-enabled site for the first
time, a message appears inviting the user to download the plug-in from the
Microsoft site. The install is quick and painless, although it can require a
browser restart. After that, any Silverlight content is displayed automatically
and the plug-in even updates itself as required.
The Silverlight SDK makes this experience easy by providing
a JavaScript file that detects the plug-in’s presence and either just displays
the content or prompts the user to install. The JavaScript also provides a way
to display Silverlight content without worrying about the different
expectations of the supported browsers.
The actual “scene” is defined in XAML, an XML-based format
where elements and attributes correspond to .NET objects and their properties. This
is the same XAML that powers WPF, just with some of the elements missing.
What’s left, at least in Silverlight 1.0, is enough to draw
shapes, images, text and video. Some of the flexible layout options from WPF
(like the Grid, DockPanel and StackPanel) are missing, along with any kind of
prebuilt UI control – there are no buttons, menus, listboxes or anything. Though
you can use HTML controls instead, this is a major shortcoming, and the
Silverlight team have promised some of these controls for a future release of version
1.1, along with a set of panels to make layout easier.
To build an app that does more than just look pretty, you
can attach event handlers to Silverlight objects and write code that
manipulates the scene, starting animations, controlling video or audio playback
and updating the properties of objects. Silverlight really does behave like a
mini-WPF, so if you’re familiar with its big brother (or Windows Forms or
ASP.NET for that matter), the programming model is easy to follow.
Hello, Silverlight
When you strip away the helper JavaScript files, very little
is required to display Silverlight content in a browser that has the plug-in
installed. The snippet below uses inline XAML to reference content defined in
the HTML file, but you can just as easily use a file located on your web server
(or one generated dynamically by ASP.NET).
Other than the XAML script tag, the snippet contains an
object tag that actually creates an instance of the Silverlight control,
passing it a reference to the XAML it should use (in this case preceded by the
# symbol to specify the ID of the HTML element with the content). That’s it.
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script
type="text/xaml" id="xamlContent">
<Canvas
xmlns="http://schemas.microsoft.com/client/2007">
<TextBlock
Text="Hello, Silverlight!" />
</Canvas>
</script>
<object
id="silverlightObj" type="application/x-silverlight" width="200"
height="200">
<param
name="source" value="#xamlContent" />
</object>
</body>
</html>
Displaying video with Silverlight
One of the strengths of WPF (and so Silverlight) is its composability:
objects can be nested within each other easily to create composite objects. A
button, for example, doesn’t have to contain just a text label, it could
contain an image as well (or a video, or a tiny interactive game, or whatever
you want). While many of these uses aren’t, well, useful, the simplicity that composability affords helps with all
sorts of more common scenarios. If you want to display an image or video inside
a circle or a rounded rectangle, you don’t have to set some obscure property of
the image, you just pop it inside a suitably shaped container.
In the same way, Silverlight’s animation and transformation
features can apply to video as easily as primitive shapes. This makes it easy
to render video on objects that can be dragged around, or to zoom into or clip
video. The key to this is the VideoBrush, which can be used to paint the
interior of a shape with the output of a MediaElement. The MediaElement itself
can then be hidden, leaving only the VideoBrush-painted shape visible.
Try it out
Silverlight is one of those technologies where words alone can’t
possibly do it justice. Have a look at the tutorials at http://silverlight.net/ to find out more, or
skip ahead to http://silverlight.net/showcase/
to see what can be done.
Next, download the free
Silverlight challenges from InnerWorkings and get to grips with some real
Silverlight projects. You’ll learn more about setting up Silverlight in your
own apps, as well as practice using a VideoBrush to render and control video
clipped and magnified according to your own specifications.
What’s an InnerWorkings coding challenge?
An InnerWorkings coding challenge is a sample of code in
Visual Studio that has some key pieces missing. Each challenge includes selected reference links
chosen specifically to help you find out how to
fill in the blanks, complete the sample app, and learn about a new technology
at the same time. Once you’re finished, InnerWorkings Developer automatically
checks your code so you can be sure you’ve solved the challenge correctly and
that you really understand what you’ve learned.
Our coding challenges are designed to take you to the heart
of the technology you want to learn more about, focusing on the most important,
practical features. Because everything has been set up for you, you can dive
straight in and start coding.
InnerWorkings has a library of hundreds of challenges on diverse
topics from ASP.NET to Windows Communication Foundation. For more information,
have a look at our catalog.
|