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

 

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
  • AccountID


       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

      AddManifest 
      
      

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

      ZippingTheManifest

      7. Return to the streaming application (remember the streaming application?)  and click on Manage Applications

      ManageApps

       

      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.

       

      UploadApp

       

      9. Once the application is uploaded you can quickly test that it is working by clicking on Launch Application Test Page

      Launch  

       

      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

       

      AddToWebPage

       

      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  
       
      Share

      About Jesse Liberty

      Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
      This entry was posted in z Silverlight Archives and tagged . Bookmark the permalink.

      Leave a Reply

      Your email address will not be published.