Jesse Liberty - Silverlight Geek

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:

1. 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;
   }
}

 

<script type="text/javascript" src="http://agappdom.net/h/silverlight.js"></script>

<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





 

<?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>

 

<iframe src=http://silverlight.services.live.com/invoke/20712/StreamingDragAndDrop/iframe.html 
frameborder="1" width="400" scrolling="no" height="180"></iframe>

We are working on making it work in this blog, in fact, but for now, you can see it working here

Technorati Profile