.NET News Desk
Getting Started with Silverlight: Zero to Hero
What you need to do to get up and running with Silverlight quickly
By: Laurence Moroney
Nov. 29, 2007 10:00 PM
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:
Step 1. Silverlight.js
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
Our simple first application will be a XAML Canvas that contains a TextBlock control which, as its name suggests, renders text.
Here it is:
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
Typically we call this file CreateSilverlight.js, and I'm following that defacto standard here. You can download it from here.
1: function createSilverlight()
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
1: var SilverlightControl;
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
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
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!
Reader Feedback: Page 1 of 1
Latest AJAXWorld RIA Stories
|| | | | | | ||
| | | |
| | | |
| | | |
| | | |
|SYS-CON MEDIA: | | | ||
|SYS-CON EVENTS: | | | | ||
|INTERNATIONAL SITES: | | | | | | | | | ||
|Copyright ©1994-2008 SYS-CON Publications, Inc. All Rights Reserved. All marks are trademarks of SYS-CON Media.|
|Reproduction in whole or in part in any form or medium without express written permission of SYS-CON Publications, Inc. is prohibited.|