PHP Developers Don't Need Silverlight—Or Do They?

Note: the work here can be done in any text editor, including Notepad if that's your thing. Personally, I prefer Editplus—something nice and simple.

Step One: Create a Simple Page with a XAML Component
The first step will be the most complicated. Your goal here is just to get something up and running without using the Expression Studio.

First, make sure you have the latest Silverlight runtime installed. You can use the recent Silverlight 1.0 release, but since other articles on this site require Silverlight 2.0 alpha, you might as well install the latest 2.0 refresh.

Next, create a control panel in XAML format. Make a row of colored dots, such as Figure 1. (Confession #1: a variety of WYSIWYG XAML editors are in various stages of production and release. But for this demo I used Microsoft® Expression® Design. After drawing a series of colored dots, I used the Export function, set it to Silverlight, and accepted all other defaults.)

Figure 1. XAML Control Panel

Or, if you want, just copy and paste Listing 1 into a file called controlPanel.xaml.

Listing 1: controlPanel.xaml

<?xml version="1.0" encoding="utf-8"?> 

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="controlPanel_design">

	<Canvas x:Name="Layer_1" Width="640" Height="80" Canvas.Left="0" Canvas.Top="0">

		<Ellipse x:Name="Ellipse" Width="71" Height="71" Canvas.Left="99.5133" 

Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" 

Stroke="#FF000000" Fill="#FFFF0000"/>

		<Ellipse x:Name="Ellipse_0" Width="71" Height="71" Canvas.Left="192.86"

 Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" 

Stroke="#FF000000" Fill="#FFFFFF00"/>

		<Ellipse x:Name="Ellipse_1" Width="71" Height="71" 

Canvas.Left="286.207" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" 

StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF00C800"/>

		<Ellipse x:Name="Ellipse_2" Width="71" Height="71" 

Canvas.Left="379.553" Canvas.Top="5.5" 

Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" 

Stroke="#FF000000" Fill="#FF230FD2"/>

		<Ellipse x:Name="Ellipse_3" Width="71" Height="71" 

Canvas.Left="472.9" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" 

StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC80FA0"/>

	</Canvas>
</Canvas>

A couple of things to note about the XAML, because it'll come into play later:

The key to using XAML on your page and making it a Silverlight application is the Silverlight.js file, which will be called on your page. Both Visual Studio 2008 and Expression Studio tools automatically create this file for inclusion in your web project. For this demo, you'll need to download it here. You can read more about this file and some of the Silverlight plumbing that goes with it on MSDN's "Instantiating a Silverlight Plug-in."

Note: using this file independently like this is generally not advised because Microsoft frequently updates the JavaScript. In fact, Confession #2, to create this file, I started up a dummy Microsoft ® Expression® Blend 2 project and copied its Silverlight.js into this demo.

You'll also need some additional JavaScript to instantiate the Silverlight object on your page. So create a new file called createSilverlight.js and include the code in Listing 2.

Listing 2: createSilverlight.js

function createControlPanel()
{
	Silverlight.createObjectEx({
		source: "controlPanel.xaml",
		parentElement: document.getElementById("dotControlPanel"),
		id: "slControlPanel",
		properties: {
			width: "100%",
			height: "100%",
			inplaceInstallPrompt:true,
			version: "1.0"
		}
	});
}


if (!window.Silverlight) 
	window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
	return function() {
		return method.apply(instance, arguments);
	}
}

Take a closer look at Listing 2 and you'll see a few things going on.

• The createSilverlight.js page is the standard file name for the instantiation code. It also usually holds the createSilverlight function. But as you can see here, the naming is up to you.
• Look at the Silverlight.createObjectEx call. For now, the source is a XAML file—the file you just created. But that source can actually be anything that returns XAML code, including a compiled library or a PHP script.
• parentElement specifies the DOM object in which the results will appear. You'll get to that in just a moment.
• id is the ID for this Silverlight control. When creating multiple controls, be sure this is a unique name.
• Especially take a look at the properties attribute—you can specify actual dimensions or just use 100% like I am here. But you should be very particular about your choice for "inplaceInstallPrompt" and the version. The install prompt is covered in more detail in the above-referenced MSDN article. As to the version, as stated earlier this will work with the Silverlight 1.0 runtime, so you can specify 1.0 here. But when you build some .NET code, which is where the real power of Silverlight comes unleashed, be sure to specify 2.0 here instead.

To pull it all together, make your test page. Create a new file called PHPdemo.htm and add the code in Listing 3.

Listing 3: PHPdemo.htm

<html> 
 <head>
  <title>Silverlight PHP Demo</title>
	<script type="text/javascript" src="Silverlight.js"></script>
	<script type="text/javascript" src="createSilverlight.js"></script>
	<style type="text/css">
		.controlPanel {
			height: 80px;
			width: 640px;
		}
		.XAMLCanvas {
			height: 480px;
			width: 640px;
		}
	</style>
 </head>

 <body>
	<div id="dotControlPanel" class="controlPanel">
		<script type="text/javascript">
			createControlPanel();
		</script>
	</div>
	<div id="dotDisplayCanvas" class="XAMLCanvas">
	</div>
 </body>
</html>

Figure 2. Simple Silverlight Page

Nothing too fancy here. You'll see a few things that aren't being used yet but for the most part, it's self-explanatory. You're pulling in the two JavaScript files, setting some dimensions via CSS, and then adding two divs, one for the control panel and one for the results. Within the div, you have a JavaScript call to the function that instantiates the Silverlight object.

Run this in a Web browser and you should see some Silverlight in action. Hopefully it'll look something like Figure 2.