Communicate Between Flex and Silverlight using Javascript

If Flex can communicate with Javascript and Silverlight can communicate with Javascript, it seems like there should be some sort of transitive rule that lets Flex communicate with Silverlight. Well there is, and this tutorial is going to show you how to use Javascript to communicate directly between a Flex application and a Silverlight application.
You're probably asking yourself, why would I ever want to do that? To be honest, we haven't thought of a great reason yet. Maybe Silverlight can do something Flex can't, or Flex has a feature Silverlight doesn't, and you want combine both into one all-powerful web page. Well now you can.

Depending on whether or not you have all the required plugins installed, you should see an example of Flex/Silverlight communication on the right. The sliders on the top and left were created using Flex. The sphere in the middle was created using Silverlight. When you drag the sliders, the sphere will roll around accordingly. You can also click and drag the sphere, which will move the sliders.
If you can't see the above example, it either means you don't have Flash 9 or the Silverlight 1.1 Alpha Refresh Runtime.
This tutorial isn't going to go into the specifics of how Silverlight and Flex communication with Javascript. For detailed information on how to accomplish that, check out our previous two tutorials: Silverlight and Javascript Interaction and Flex & Javascript Tutorial - Simple Interaction.
We'll start by looking at what happens when one of the sliders is moved.

function MoveBallX(val){ var silverlightControl = document.getElementById('SilverlightControl'); silverlightControl.Content.SilverlightApp.MoveBallX(val);}
function MoveBallY(val){ var silverlightControl = document.getElementById('SilverlightControl'); silverlightControl.Content.SilverlightApp.MoveBallY(val);}

When the horizontal slider is moved, the Flex application calls the Javascript function MoveBallX and passes in the current value of the slider. This function then calls the C# function MoveBallX in the Silverlight application. Silverlight then positions the ball to the new X position. The same thing happens when the vertical slider is moved, but now MoveBallY is called. That is all the Javascript code required to move the sphere when one of the Flex sliders is moved.
Now let's look at what happens when the drags the sphere.

function xChanged(){ var silverlightControl = document.getElementById('SilverlightControl'); xPos = silverlightControl .Content.SilverlightApp.GetXValue(); getFlexApp('HorizontalSilverlightMover').setXValue(val);}
function yChanged(){ var silverlightControl = document.getElementById('SilverlightControl'); yPos = silverlightControl.Content.SilverlightApp.GetYValue(); getFlexApp('VerticalSilverlightMover').setYValue(val);}
function getFlexApp(appName) { if (navigator.appName.indexOf ("Microsoft") !=-1) { return window[appName]; } else { return document[appName]; }}

Again, there's not a lot of Javascript code required to keep the two applications synchronized. The functions xChanged and yChanged are hooked up to events in the Silverlight application and are called whenever a user moves the ball in either the X or Y direction. The first thing these functions do is get the new position from the Silverlight application by calling either GetXValue or GetYValue. It then simply calls setXValue or setYValue to set the horizontal or vertical slider to its new position. The function getFlexApp is explained in details in the earlier Flex and Javascript tutorial, but it basically acquires a reference to the Flex application depending on what type of browser is currently being used.

As you can see, the actual code to do Flex/Silverlight communication is very simple. This tutorial was meant to let everyone know that the possibility existed. As a reminder, please refer to Silverlight and Javascript Interaction for detailed information on how to communicate between Silverlight and Javascript. Also refer to Flex & Javascript Tutorial - Simple Interaction for information on how to communicate between Flex and Javascript.