This is the first Silverlight tutorial on Geekpedia, and we're going to take a look at how to build our first Silverlight application, starting with the components that you need to reviewing the actual code.
Silverlight is planning to revolutionize the web by combining the benefits of Flash with the power of the .NET Framework and a close integration with the Windows operating system. Dino Esposite pointed out well, with a note of criticism, that the current version (Silverlight 1.0) is still lacking many of the features that will bring it above the competition, features on which Microsoft programmers are working on as I right this tutorial. This doesn’t mean, however, that you as a developer shouldn’t benefit from the early look at Silverlight 1.0 (such as you would at an alpha version) to get familiar with it. As an ASP.NET developer, it’s very likely that sooner or later you’ll have/want to use Silverlight in your websites, so read on, as this tutorial will be the first of the many Silverlights tutorials that are to come on Geekpedia..
First of all there are a few things you’ll need to download:
Download Silverlight plug-in: http://www.microsoft.com/silverlight/downloads.aspx
Download Silverlight SDK: http://www.microsoft.com/downloads/details.aspx?FamilyId=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en
Download VS 2005 SP1: http://www.microsoft.com/downloads/details.aspx?FamilyId=BB4A75AB-E2D4-4C96-B39D-37BAF6B5B1DC&displaylang=en
The Silverlight browser plug-in is lan obvious necessity. Service Pack 1 for Visual Studio 2005 is needed before you can install the Silverlight SDK. When you install the Silverlight SDK, you will get a new option in Visual Studio 2005 that allows you to build a Silverlight project. Now keep in mind that you don’t necessarily need Visual Studio in order to develop Silverlight applications. You could as well do it using the free Visual Studio Express or even Notepad.
Start by creating a new Silverlight project entitled HelloWorld. It never gets old.
New Silverlight Javascript Application
Now that you created the project you’ll see a few files have already been created for you. But what’s more interesting is that the files are not blank, and there’s an actual sample Silverlight application in there. So press F5 to compile and you’ll get this:
Button
Hover over, click and look into the code. It’s not the most exciting example of Silverlight’s power, but its simplicity makes it great for looking into the code to see how this button actually works. In this tutorial we’re going to have a quick look through the files that compose the project.
First of all it’s the design; what gives the button its specific layout and its hover effect? It’s XML. View the source code of Scene.xaml and you’ll get the following:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Resources>
<Storyboard x:Name="mouseEnter">
<ColorAnimation Duration="00:00:00.25" To="#3DFFFFFF" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>
<Storyboard x:Name="mouseDown">
<ColorAnimation Duration="00:00:00.2" To="#22000000" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>
<Storyboard x:Name="mouseUp">
<ColorAnimation Duration="00:00:00.2" To="#3DFFFFFF" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>
<Storyboard x:Name="mouseLeave">
<ColorAnimation Duration="00:00:00.25" To="#00FFFFFF" Storyboard.TargetName="highlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</Storyboard>
</Canvas.Resources>
<Canvas Width="120" Height="44">
<Rectangle StrokeThickness="4" RadiusX="17" RadiusY="36" Width="120" Height="44" Stroke="#46000000">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
<GradientStop Color="gray" Offset="0.242"/>
<GradientStop Color="black" Offset="0.333"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Width="67" Height="23.2" Canvas.Left="29" Canvas.Top="10" Foreground="#FFEFEFEF" Text="Click Me" />
<Rectangle StrokeThickness="4" RadiusX="16" RadiusY="36" Width="104" Height="32" Canvas.Left="8" Canvas.Top="1.3">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
<GradientStop Color="#00FFFFFF" Offset="0.13"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="17" RadiusY="36" Width="114" Height="38" Fill="#00FFFFFF" x:Name="highlightEllipse" Canvas.Left="3" Canvas.Top="3"/>
</Canvas>
</Canvas>Being well named, it’s not difficult to figure what each of these tags define. For instance the first at the top specify the way the button acts upon cursor entry, leave and click. The attributes specify the duration of each effect, the color to which it should change, etc. But we are not going to focus much on these, one reason is that this code will be mostly generated for you by Microsoft Expression Blend 2 which currently is in Preview version. You can download a trial that will last you till July 1, 2008 from Microsoft.
With Scene.xaml comes another file named Scene.xaml.js:
if (!window.HelloWorld)
window.HelloWorld = {};
HelloWorld.Scene = function()
{
}
HelloWorld.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
// Sample button event hookup: Find the button and then attach event handlers
this.button = rootElement.children.getItem(0);
this.button.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.handleMouseEnter));
this.button.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
this.button.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseUp));
this.button.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave));
},
// Sample event handlers
handleMouseEnter: function(sender, eventArgs)
{
// The following code shows how to find an element by name and call a method on it.
var mouseEnterAnimation = sender.findName("mouseEnter");
mouseEnterAnimation.begin();
},
handleMouseDown: function(sender, eventArgs)
{
var mouseDownAnimation = sender.findName("mouseDown");
mouseDownAnimation.begin();
},
handleMouseUp: function(sender, eventArgs)
{
var mouseUpAnimation = sender.findName("mouseUp");
mouseUpAnimation.begin();
// Put clicked logic here
alert("clicked");
},
handleMouseLeave: function(sender, eventArgs)
{
var mouseLeaveAnimation = sender.findName("mouseLeave");
mouseLeaveAnimation.begin();
}
}This is where your code goes. In this sample piece we have a few event handlers that make the XML we’ve seen earlier alive. Just like the XML, it’s fairly easy to understand what each function does, so let’s move on to Default.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HelloWorld</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Default.html.js"></script>
<script type="text/javascript" src="Scene.xaml.js"></script>
</head>
<body>
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>Default.html is, well, what do you know – your blank HTML file with a JavaScript call to the createSilverlight() function and three JavaScript includes. Plug that in wherever you want the Silverlight plug-in to show, just like you would do with a Flash plug-in. One of these includes – Scene.xaml.js we already reviewed, Default.html.js is next:
function createSilverlight()
{
var scene = new HelloWorld.Scene();
Silverlight.createObjectEx({
source: 'Scene.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '400',
height: '400',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});
}
if (!window.Silverlight)
window.Silverlight = {};
Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}Isn’t that something? It’s the createSilverlight() function we just called in the HTML file. It all adds up now; the function specifies various parameters for displaying the Silverlight plugin, such as the size of the embedded object and the version of the plugin that should be used.
There’s one file left in this outfit, and that’s Silverlight.js:
///////////////////////////////////////////////////////////////////////////////
//
// Silverlight.js version 1.0
//
// This file is provided by Microsoft as a helper file for websites that
// incorporate Silverlight Objects. This file is provided under the Silverlight
// SDK 1.0 license available at http://go.microsoft.com/fwlink/?linkid=94240.
// You may not use or distribute this file or the code in this file except as
// expressly permitted under that license.
//
// Copyright (c) 2007 Microsoft Corporation. All rights reserved.
//
///////////////////////////////////////////////////////////////////////////////
if(!window.Silverlight)window.Silverlight={};Silverlight._silverlightCount=0;
// and it goes on like this 7000 characters moreThis one’s a little more criptic than the other files, especially because it’s all inline. But why is it all on a single line? Because it’s not meant to be tempered with; it is required for all Silverlight applications as it defines the CreateObject and CreateObjectEx methods, which generate the <object> and <embed> tags. Remember the latter was called from inside the createSilverlight() method. Thus, Silverlight.js is always needed, you shouldn’t mess with it, and you should know that it’s the one bringing the Silverlight plugin to life.
