Did You Know... You Can Create A Silverlight Streaming Application in Minutes?
Three are many details to creating a Silverlight Streaming application, but in this post I'm going to try to boil them down to a recipe for fast success.
1. Create an account for yourself on the Silverlight Wiidows Live (alpaha) site. 4GB hosting is free, but read the fine print at the bottom of the page.
Once you are set, ignore that for a while and create a simple Silverlight application that does something (e.g., drag and drop). If you don't want to bother, just steal mine.
First Get It Working As A Normal Silverlight Control
Scene.xaml
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse x:Name="myEllipse"
Canvas.Left="10"
Canvas.Top ="150"
Height="100"
Width="100"
Fill="Red"
Stroke="Black"
StrokeThickness="3" />
<Rectangle x:Name="mySquare"
Height="100"
Canvas.Left="150"
Canvas.Top="150"
Width="100"
Fill="Blue"
Stroke="Black"
StrokeThickness="3" />
</Canvas>
Scene.xaml.js
if (!window.Streaming)
window.Streaming = {};
Streaming.Scene = function()
{
}
Streaming.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.beginX;
this.beginY;
this.trackingMouseMove = false;
this.ellipse = this.plugIn.content.FindName("myEllipse");
this.rect = this.plugIn.content.FindName("mySquare");
this.ellipse.addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
this.ellipse.addEventListener("MouseLeftButtonUp",
Silverlight.createDelegate(this, this.handleMouseUp));
this.ellipse.addEventListener("MouseMove",
Silverlight.createDelegate(this, this.handleMouseMove));
this.rect.addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
this.rect.addEventListener("MouseLeftButtonUp",
Silverlight.createDelegate(this, this.handleMouseUp));
this.rect.addEventListener("MouseMove",
Silverlight.createDelegate(this, this.handleMouseMove));
},
handleMouseDown: function(sender, mouseEventArgs)
{
this.beginX = mouseEventArgs.getPosition(null).x;
this.beginY = mouseEventArgs.getPosition(null).y;
this.trackingMouseMove = true;
sender.captureMouse();
},
handleMouseUp: function(sender, eventArgs)
{
this.trackingMouseMove = false;
sender.releaseMouseCapture();
},
handleMouseMove: function(sender, mouseEventArgs)
{
if ( this.trackingMouseMove == true )
{
var currentX = mouseEventArgs.getPosition(null).x;
var currentY = mouseEventArgs.getPosition(null).y;
sender["Canvas.Left"] += currentX - this.beginX;
sender["Canvas.Top"] += currentY - this.beginY;
this.beginX = currentX;
this.beginY = currentY;
}
}
}
Make It A Streaming Control
Once your code is working and debugged, here are the steps to move it to a streaming application:
-
Change the event-handling wire-up from the .js file to the XAML file. [I believe this is a bug, and I've filed a query about it] .
Scene.xaml
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse x:Name="myEllipse"
Canvas.Left="10"
Canvas.Top="150"
Height="100"
Width="100"
Fill="Red"
Stroke="Black"
StrokeThickness="3"
MouseLeftButtonDown="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove" />
<Rectangle x:Name="mySquare"
Height="100"
Canvas.Left="150"
Canvas.Top="150"
Width="100"
Fill="Blue"
Stroke="Black"
StrokeThickness="3"
MouseLeftButtonDown="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove" />
</Canvas>
Scene.xaml.js
Streaming.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
}
}
var beginX;
var beginY;
var trackingMouseMove = false;
function onMouseDown(sender, mouseEventArgs)
{
beginX = mouseEventArgs.getPosition(null).x;
beginY = mouseEventArgs.getPosition(null).y;
trackingMouseMove = true;
sender.captureMouse();
}
function onMouseUp(sender, mouseEventArgs)
{
trackingMouseMove = false;
sender.releaseMouseCapture();
}
function onMouseMove(sender, mouseEventArgs)
{
if ( trackingMouseMove == true )
{
var currentX = mouseEventArgs.getPosition(null).x;
var currentY = mouseEventArgs.getPosition(null).y;
sender["Canvas.Left"] += currentX - beginX;
sender["Canvas.Top"] += currentY - beginY;
beginX = currentX;
beginY = currentY;
}
}
2. Change the Silverligh.js script statement in Default.html
<script type="text/javascript" src="http://agappdom.net/h/silverlight.js"></script>
3. Modify the div in Default.html adding a varaible for the parent id (that points to the div that holds the script, and change the first letter of createSilverlight to uppercase (we'll be adding that method in a moment)
<div id="mySilverlightControlHost">
<script type="text/javascript">
var parentElement = document.getElementById("mySilverlightControlHost");
CreateSilverlight();
</script>
</div>
4. Replace the function createSilverlight() with the new function CreateSilverlight()
function CreateSilverlight()
{
Silverlight.createHostedObjectEx(
{
source: "streaming:/[AccountID]/[ApplicationName]",
parentElement: document.getElementById(["mySilverlightControlHost"])
});
}
There are three elements here to replace (I've placed them in square brackets)
- AccountID - Assigned to you when you receive your Streaming Account (see picture below)
The Application Name
The ID of the Div (in the example shown above, mySilverlightControlHost
5. Create a Manifest File that describes the app. Note that you need to designate the xaml file, the method to call on load, and the js files.It must be called Manifest.xml
<?xml version="1.0" encoding="utf-8" ?>
<SilverlightApp>
<source>Scene.xaml</source>
<onLoad>CreateSilverlight()</onLoad>
<version>1.0</version>
<width>600</width>
<height>400</height>
<jsOrder>
<js>http://agappdom.net/h/silverlight.js</js>
<js>Default.html.js</js>
<js>Scene.xaml.js</js>
</jsOrder>
</SilverlightApp>
6. Right click on the Solution and click on "Open Folder in Explorer" In the File explorer select Scene.xaml, Scene.xaml.js and Manifest.xml and right click to create a zip file, which will allow you to craete a zip file with the name of your application, which is just what you want.
7. Return to the streaming application (remember the streaming application?) and click on Manage Applications
8. Click on Upload a Silverlight Application and fill in the Application Name and then click on the Browse button to find the zip file you created. Once the name of the Zip file is in the window, click upload.
9. Once the application is uploaded you can quickly test that it is working by clicking on Launch Application Test Page
10 Assuming your Streaming Silverlight application works fine in the test page, there are now two ways for you to deploy. The Manage Applications page that you are returned to provides you with three explicit steps and the needed code to add your application to any Web Page
Finally, you can also add the streaming application to your page by using an IFrame,
<iframe src=http://silverlight.services.live.com/invoke/20712/StreamingDragAndDrop/iframe.html
frameborder="1" width="400" scrolling="no" height="180"></iframe>
You can drop this IFrame into virtually any web page or blog and it "just works"
We are working on making it work in this blog, in fact, but for now, you can see it working here
Technorati Profile