WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:







Lifetime Member:

Silverlight With Java Script Tutorial 1



Purpose of this Series

On the Silverlight.Net Forums, I see repeated questions arise, and after a "Web Developer Conference" this morning, I realized that there really still are a lot of developers out there that have not actually tried their hand at Silverlight yet because of the perceived complexity involved.

Couple that with the fact that many of the existing 'Tutorials' seem to want to jump right into Visual Studio and AJAX, I thought I'd take a shot at simplifying this all even further.

This first Tutorial

The purpose of this tutorial is to show how simple it is to Silverlight-enhance a web page. Everything necessary to do so with the exception of the bits from the SDK are included on this page, and a link to the SDK is given along with instructions, so within just a few minutes, you should have your first Silverlight web page running!

It is normally my intent to explain everything in detail, but I'm breaking with that tradition on this page. Because I want you to be able to get a page up quickly, I'm going to bypass delving into some of the syntax this time in favor of product-to-browser.

The Bottom Line

The 'Bottom Line' on putting up your first web page containing a Silverlight canvas is that you don't need AJAX, and you don't need Visual Studio! Worst-case scenario is notepad... if you have a good color-coded templated code editor, that's great as well, but also not necessary.

The minimum need for a Silverlight-enhanced web page is 3 things:
  • The html file for your page data
  • The Silverlight.js file provided in the SDK (described below)
  • An XML file in the form of Silverlight XAML to specify the canvas
Of course, if you're using external css, or have any graphic elements, those would need to be included, but for now, lets ignore those.

To get the hard part out of the way first, go to the Silverlight.net Getting Started Page, scroll down to the section heading "Software Development Kit", and take the link to download "Microsoft Silverlight 1.0 Beta Software Development Kit (SDK)".

Unzip all that to someplace that you'll find easily. There's lots of good stuff in there to look at, but the one thing we're interested in right now is Silverlight.js

You'll need to have Silverlight.js somewhere in your development area that can be easily reached by your code, and easily updated when a new release is made. I think it's fairly standard to have a js folder that contains this and other Java Scripts you may use. I'm going to assume that this is the case for the following discussions.

The HTML file

You now have everything you need to get started with Silverlight using Java Script! So let's take a look at what our html page might look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My First Silverlight Page</title>
<script src="js/Silverlight.js" type="text/javascript"></script>
</head>
<body>

<br />
<center>
<div id="Ag1Host" style="background:#FFFFFF">
<script type="text/javascript">
var pe1 = document.getElementById("Ag1Host");
</script>
</div>
</center>

<script>
Silverlight.createObjectEx({source: 'xaml/MyFirstSilverlightPage.xml', parentElement:pe1, id:'Ag1', properties:{width:'300', height:'100', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});
</script>

</body>
</html>


In the Head section, I've linked out to js/Silverlight.js as mentioned above.

The only tricky part of the whole deal is the div tag put in place to hold the Silverlight object, and the instantiation of the Silverlight object just below that. Let's talk about those two separately:

Div tag

The div tag simply provides a location for the control.

Instantiation

The Creation of the Silverlight canvas is the most complex part of this whole page. To satisfy the purposes of this being a simple first page, let's leave most of the discussion about that line of code for another tutorial, and for now just look at a few entries:
source: 'xaml/SilverlightWithJSTutorial01.xml'
This is the location of your xaml file. Note I have it in a folder named xaml to keep all the xaml together and easily found. I also have started using the extension xml to allow xml editing with my editor. You can name this .xaml if you wish
width: '300'
The width of the canvas
height: '100'
The height of the canvas

The XAML file

I already mentioned above about placing the xaml file in a subfolder or not, and why I have started naming my xaml with an xml extension. For the same reasons as not discussing the intimate features of the instantiation, I'm not going to discuss much of the xaml file at this time either.

A basic xaml file will contain the following:

<Canvas 
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Canvas>


Of course, this canvas is empty, and won't display anything, but it contains the two schema definitions that are required. This is the 'template' I use for a starting point for all my new xaml files.

The xaml file for the canvas at the top of this page contains a single TextBlock as shown here:

<Canvas 
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<TextBlock FontSize="36" Canvas.Left="17" Canvas.Top="10" Foreground="Blue">Hello Silverlight</TextBlock>

</Canvas>


That's IT!

Very simple... if you already have a web page you want to add a Silverlight canvas on, you only need to add a link to the Silverlight.js file, add in the control-holder div tag and script to instantiate it and put your xaml file where your code can find it.

It doesn't get much simpler than that!

What next

I think next time it would be good to discuss all the bits not discussed this time: The instantiation of the control and the TextBlock.

Feel free to write if you have questions or problems, and most definitely if you have ideas of something you'd like to see discussed!

QuickStart

While you're waiting for me to do the next page in this series, it would be well worth your time to go to where you installed all the Silverlight Beta 1 files and start looking at the file "WPFE.chm" which is the Beta 01 SDK, and you should also extract the QuickStart. There are many great examples and good instruction in that file set.


Microsoft MVP

Member of WPF and Silverlight Insiders
Silverlight Control
Creative Commons License

Copyright © 2006-2014, WynApse