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!
Comments
Anonymous
August 09, 2007
PingBack from http://msdnrss.thecoderblogs.com/2007/08/09/zero-to-hero-getting-started-with-silverlight-2/Anonymous
August 09, 2007
you can tell when a new fiscal year has started (or at least the month after a new fiscal year). peopleAnonymous
August 10, 2007
The comment has been removedAnonymous
August 10, 2007
Here's another nice tutorial site: http://designwithsilverlight.com/ Nice job jeff!!! LaurenceAnonymous
August 13, 2007
Well, it has been nearly 5 days since day 2, and that is because so much has been happening! One tremendousAnonymous
August 13, 2007
One of our Technical Evangelist's, Laurence, posted a how to for building a Silverlight application.Anonymous
August 13, 2007
One of our Technical Evangelist's, Laurence, posted a how to for building a Silverlight applicationAnonymous
August 14, 2007
del.icio.us Tags: Silverlight Lots of people have been asking about how to get started with Silverlight,Anonymous
August 16, 2007
del.icio.us Tags: Silverlight In the last Episode, you looked into Getting Started with Silverlight whereAnonymous
August 18, 2007
Hi Laurence .. we blogged on your AtlasBook..I am the fellow who is part of the Irish Children's Program in Chicago.. Silverlight looks great . am still trying to figure out how to add silverlight "parts" to an ASP Master page, an ASP skin, and in a content block of a page that references a Master page. I was at the tech conf in Orlando in May.. looked for you.. but alas, no cigar. Best of luck with Microsoft!Anonymous
August 30, 2007
Robiłem trochę porządków na tym blogu (widać to najbardziej po lewej stronie z paroma gadżetami od technoratiAnonymous
October 01, 2007
Last Thursday (September 25), I conducted a webcast on the topic of Silverlight. To those of you whoAnonymous
October 01, 2007
Last Thursday (September 25), I conducted a webcast on the topic of Silverlight. To those of you whoAnonymous
October 01, 2007
Last Thursday (September 25), I conducted a webcast on the topic of Silverlight. To those of you whoAnonymous
October 01, 2007
Last Thursday (September 25), I conducted a webcast on the topic of Silverlight. To those of you who