Zero to Hero: Getting Started with Silverlight
del.icio.us Tags: Silverlight
Lots of people have been asking about how to get started with Silverlight, and what they need to do to get up and running with Silverlight quickly. Inspired by blog posts such as Jesse Liberty's, I'm going to take this from first principles, with no prior knowledge assumed.
Over the series, we'll look at the following:
- Your First Silverlight Application
- Understanding XAML
- Understanding the Blend series of Products
- Building Silverlight applications using Aptana on the Mac
- Building Silverlight applications using Visual Studio Express on the PC
- Programming Silverlight 1.0 with JavaScript
- And whatever else you'd like -- send feedback!
So let's get started with the first and most simple application -- a 'Hello World' in Silverlight. You need no special tools for this. Just notepad will do...
Step 1. Silverlight.js
The first thing you'll need is Silverlight.js. This file contains everything that you need to create a silverlight component on your page. Silverlight is a browser plug-in that renders XAML and exposes a JavaScript programming interface. Browser plug-in's are implemented using special HTML tags called <object> and <embed>. Different browsers handle them differently, so instead of having to fiddle with them, it's a lot easier just to use Silverlight.js which handles it all for you.
You can get it here or in the Silverlight SDK, which installs to \PROGRAM FILES\Microsoft Silverlight 1.0 SDK. You'll find Silverlight.js in the 'Resources' directory.
Step 2. XAML
Silverlight UI is defined using XAML - XML Application Markup Language. Some great resources to get you started with XAML can be found in the Silverlight quickstarts here.
Our simple first application will be a XAML Canvas that contains a TextBlock control which, as its name suggests, renders text.
Here it is:
1: <Canvas
2: xmlns="https://schemas.microsoft.com/client/2007"
3: xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
4: Width="640" Height="480"
5: Background="White"
6: x:Name="Page">
7: <TextBlock Width="195" Height="42" Canvas.Left="28" Canvas.Top="35"
8: Text="Hello World!" TextWrapping="Wrap" x:Name="txt"/>
9: </Canvas>
This pretty simple piece of XAML contains two components.
The first is the root Canvas which is present in every Silverlight XAML. This defines the overall drawing surface. As you can see we are using a 640x480 Canvas which is white.
The second is the Textblock that we mentioned earlier. It renders the text 'Hello World' on the Canvas.
Remember XAML is just XML, so all of the conventions of XML apply. You can see that the TextBlock is a child node of the Canvas, and that XML attributes are used to define the properties of the nodes. Note that this is can empower some pretty cool scenarios -- such as generating UI on the fly from server applications using ASP.NET, PHP or Java. We'll look more into these scenarios later in the series.
Step 3. CreateSilverlight.js
The XAML document that you created in Step 2 should be saved and named. In this example use the name Page.xaml.
It's good practice to host the code for creating the Silverlight component on your page in a seperate JavaScript file. It's not essential, but for good clean separation of code to make maintenance easier, it's a useful step.
Typically we call this file CreateSilverlight.js, and I'm following that defacto standard here. You can download it from here.
1: function createSilverlight()
2: {
3: Silverlight.createObjectEx({
4: source: "Page.xaml",
5: parentElement: document.getElementById("SilverlightControlHost"),
6: id: "SilverlightControl",
7: properties: {
8: width: "100%",
9: height: "100%",
10: version: "1.0"
11: },
12: events: {
13: onLoad: handleLoad
14: }
15: });
16: }
This function calls the 'createObjectEx' function which is implemented in Silverlight.js, which you added to your site in Step 1. You'll notice that a 'handleLoad' event has been defined. You'll see how this is implemented in Step 4.
Step 4. Your Application Logic
This simple application allows you to click on the text block, and have the text change from 'Hello World' to 'You Clicked Me'. The code for this application is shown here:
1: var SilverlightControl;
2: var theTextBlock;
3: function handleLoad(control, userContext, rootElement)
4: {
5: SilverlightControl = control;
6: theTextBlock = SilverlightControl.content.findName("txt");
7: theTextBlock.addEventListener("MouseLeftButtonDown", "txtClicked");
8: }
9: function txtClicked(sender, args)
10: {
11: theTextBlock.Text = "You clicked me!";
12: }
The handleLoad was defined as an event in the createSilverlight function. When Silverlight renders the control it calls this, passing it a reference to the control, the contents of the 'userContext' variable (which can be set in the createSilverlight), and a reference to the root canvas element.
This function finds the text block (called 'txt') and adds an event listener to it. The event that it is listening for is 'MouseLeftButtonDown', and when this happens the function called 'txtClicked' should be called.
When you implement an event handler, your function should accept parameters for 'sender' (the originator of the event) and 'args' (arguments associated with the event)
In this code you can see that when the user clicks the text block, the text will be changed to "You clicked me!"
Step 5. Your HTML Page
Now you put it all together with an HTML page that references each of the JavaScript files and embeds the Silverlight control. Here's the full HTML markup:
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
2: <html xmlns="https://www.w3.org/1999/xhtml">
3: <head>
4: <title>ZeroHero</title>
5:
6: <script type="text/javascript" src="Silverlight.js"></script> 1:
2: <script type="text/javascript" src="CreateSilverlight.js">
1: </script>
2: <script type="text/javascript" src="code.js">
1: </script>
2: <style type="text/css">
3: .silverlightHost {
4: height: 480px;
5: width: 640px;
6: }
7: </style>
8: </head>
9:
10: <body>
11: <div id="SilverlightControlHost" class="silverlightHost">
12: <script type="text/javascript">
13: createSilverlight();
14:
</script>
7: </div>
8: </body>
9: </html>
Upload all these files to your web server and you're done.
This might have seemed to be a lot just to get a 'Hello World' applicaiton, but it covers the full broad principles of developing a SIlverlight 1.0 application. You saw how to use Silverlight.js and createSilverlight.js, write XAML, load XAML into Silverlight, hook up events and create on-the-fly event handlers.
You can see the application in action here:
In the next part of this series, we'll look at Expression Blend, and how you can use it to design your XAML to make it richer!