I am sure that better ways of data transfer with Silverlight will emerge soon, but currently, our options are limited. I tried a few examples using sockets but it seemed like too much work, especially when you are used to RPC using the RemoteObject tag in Flex

There is a workaround (more of a hack) to this problem. We could use the HTML DOM integration of the Silverlight runtime and Flash Player to pass messages between the two. The Flash application will have no UI elements (in fact, it can be hidden). It only receives the messages and passes the data to the DOM, which is then sent to the Silverlight application. The JavaScript required for this purpose is not too complicated. This is not an elegant solution but it will have to do for now.

Though I initially started exploring this approach only to call ColdFusion CFC’s from a Silverlight application without resorting to XML Web Services, I quickly realised that the same approach could be used to build a simple Chat application using the Messaging features of LCDS.
So here is a quick tutorial on creating a Flex Silverlight Chat application using LiveCycle. I am using the version of LiveCycle that is integrated into the ColdFusion 8 server.

Step 1: Configuring LiveCycle Messaging Endpoints
The first step is to configure a “destination” in the messaging-config.xml file that resides in the WEB-INF/flex folder of your web root.

Give the destination an appropriate ID, and then specify the appropriate adapter. In the default installation of LCDS on ColdFusion 8, the default adapter is “cfgateway”. We want to use the “actionscript” adapter, so it has to be explicitly mentioned.

<adapter ref="actionscript"/>

The second step is optional. Switch the “allow-subtopics” server property to true. This way, our chat application can listen to and send messages on multiple topics. For further information regarding the server properties and other security information, refer to the LiveCycle LiveDocs.

<properties>
      <server>
        <allow-subtopics>true</allow-subtopics>
      </server>
</properties>

The next step is to specify the channel over which we want to transfer data. The “java-rtmp” channel enables messages to be transferred in real time. However, it uses a non standard port for communication which may cause issues with Firewalls. So, as a backup, we specify another channel “java-polling-amf” which uses polling to check if data needs to be transferred. Be sure to check that these channel definitions are uncommented in the services-config.xml file. You can adjust the settings of these endpoints too, but the defaults should work fine for our purposes.

  <destination id="chat">
    <adapter ref="actionscript"/>
    <properties>
      <server>
        <allow-subtopics>true</allow-subtopics>
      </server>
    </properties>
    <channels>
      <channel ref="java-rtmp"/>
      <channel ref="java-polling-amf"/>
    </channels>
  </destination>

And thats it, save both the services-config.xml and messaging-config.xml file and restart your server.

Step 2: Building the Flex Application
The next step is to build the Flex application that will actually handle the data transfer between the server and the HTML DOM. This application will have no UI elements. You can specify a really tiny size.
Create a Flex ColdFusion 8 project that uses LiveCycle Data Services instead of Flash Remoting. Now instantiate the Producer and the Consumer objects in MXML.

<mx:Producer id="producer" destination="chat" subtopic="buzzy" />
<mx:Consumer id="consumer" destination="chat" subtopic="buzzy" message="gotMessage(event)" />

The destination property of these objects is the one specified in the messaging-config.xml. Since subtopics are allowed, specify a subtopic of your choice. This feature will come in handy when you are building a more full featured chat application.
Add a “message” event handler to your consumer. This event handler will call an external JavaScript method, passing it the message that the consumer just received.

private function gotMessage(e:MessageEvent):void
{
    flash.external.ExternalInterface.call("receiveMessage", (e.message.body as String));
}

On the “creationComplete” event of the Application, register a callback method. This ActionScript method will be called when the appropriate JavaScript method is called in the HTML page. This ActionScript method receives one argument with which it constructs an AsyncMessage and sends it using the Producer.

private function init(e:FlexEvent):void
{
        consumer.subscribe();
        flash.external.ExternalInterface.addCallback("sendMessage", sendMessage);
}
private function sendMessage(str:String):void
{
        var message:AsyncMessage = new AsyncMessage();
        message.body = str;
        producer.send(message);
}

The complete MXML code is given below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init(event)" layout="absolute" height="5" width="5">
	<mx:Script>
		<![CDATA[
			import mx.messaging.events.MessageFaultEvent;
			import mx.controls.Alert;
			import mx.messaging.events.MessageEvent;
			import mx.messaging.messages.AsyncMessage;
			import mx.events.FlexEvent;
			private function init(e:FlexEvent):void
			{
				consumer.subscribe();
                                flash.external.ExternalInterface.addCallback("sendMessage", sendMessage);
			}
			private function sendMessage(str:String):void
			{
				var message:AsyncMessage = new AsyncMessage();
				message.body = str;
				producer.send(message);
			}
			private function gotMessage(e:MessageEvent):void
			{
                                flash.external.ExternalInterface.call("receiveMessage", (e.message.body as String));
			}
		]]>
	</mx:Script>
	<mx:Producer id="producer" destination="chat" subtopic="buzzy" />
	<mx:Consumer id="consumer" destination="chat" subtopic="buzzy" message="gotMessage(event)" />
</mx:Application>

Step 3: Building the Silverlight Application
We are finally done with the Flex application, moving on to the Silverlight application itself. All the UI elements of the application have to be created here. The details are really up to you, but the basic elements of the UI will be a TextBox which will act as a message area and another TextBox which will act as a message input area. I quickly drew the UI in Blend. This is what I ended up with:

<UserControl x:Class="FlexSilverlightChat.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="800" Height="600" Background="#FF1E8AB6"Foreground="#FF1E8AB6" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="#FF1372B0">

    	<Rectangle Height="55.294" Margin="8.412,0,121.941,7.882" VerticalAlignment="Bottom" Fill="#FFD8D8D8" Stroke="#FF000000" StrokeThickness="4" d:LayoutOverrides="Height" d:IsLocked="True"/>
    	<Button Click="Button_Click" Height="55" HorizontalAlignment="Right" Margin="0,0,8.001,7.882" VerticalAlignment="Bottom" Width="109.586" Content="Send" d:LayoutOverrides="Width"/>
    	<Rectangle Margin="8.001,7.882,8.001,66.94" Fill="#FFD8D8D8" Stroke="#FF000000" StrokeThickness="4" Opacity="0.43" d:IsLocked="True"/>
    	<TextBox Margin="18.823,18.591,21.884,77.586" x:Name="messageArea" Opacity="1" Background="{x:Null}" Text="" TextWrapping="Wrap" IsReadOnly="True"/>
    	<TextBox Height="34.649" Margin="18.969,0,135.295,17.114" x:Name="inputText" VerticalAlignment="Bottom" Background="{x:Null}" Text="" TextWrapping="Wrap"/>

    </Grid>
</UserControl>

The Send button is wired to an event handler which calls a JavaScript method called “sendMessage” which in turn calls the ActionScript method (also named “sendMessage”) that sends the message using the Producer. It is invoked as follows:

void Button_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("sendMessage", inputText.Text);
inputText.Text = "";
}

Invoking Javascript methods from C# is simple enough but the reverse is not as easy as registering a callback method, as in the case of ActionScript.

First, the “Page” class has to be marked as a “ScriptableType” and all the methods that have to be called from JavaScript must be marked as “ScriptableMember”

Then, register an event handler that responds to the “Loaded” event. The “Page” class which is marked as a “ScriptableType” must be registered as a Scriptable Object.

void Page_Loaded(object sender, RoutedEventArgs e)
{
HtmlPage.RegisterScriptableObject("Page", this);
}

The complete C# code is given below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;

namespace FlexSilverlightChat
{
    [ScriptableType]
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);
        }
        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            HtmlPage.RegisterScriptableObject("Page", this);
        }
        void Button_Click(object sender, RoutedEventArgs e)
        {
            HtmlPage.Window.Invoke("sendMessage", inputText.Text);
            inputText.Text = "";
        }
        [ScriptableMember]
        public void gotMessage(String message)
        {
            messageArea.Text = "Message: " + message + "\n" + messageArea.Text;
        }
    }
}

We are now in the home stretch. Generate the release builds of the Flex application using Flex Builder and the Silverlight TestPage using Visual Studio. You will now have the Silverlight and Flex applications residing on two separate pages.

Copy the appropriate HTML code fragments from both pages onto a single HTML Page.
Now it’s time to write the JavaScript that will wire the ActionScript methods in the Flex application with the C# methods in the Silverlight application.

Both methods are fairly trivial and self explanatory.

<script language="JavaScript" type="text/javascript">
  	function sendMessage(message)
	{
		document['FacelessChat'].sendMessage(message);
	}
	function receiveMessage(obj)
	{
		document.getElementById('slChat').Content.Page.gotMessage(obj);
	}
</script>

And that’s it. Copy the assets to the appropriate folder under the web root and run it. You will see that the messages you type into the text input at the bottom appear in the message area above. In reality, the message is being transferred from the Silverlight client to the HTML DOM which in turn passes it to the Flex application whose Producer sends the message. As the Consumer in the Flex application receives the message, it sends it back to the DOM from which it is passed to the Silverlight client.

Open the same application in a couple of other windows and see if the messages sent from one instance of the application are seen in the other.

Here is a quick video I made of the applications in action:

Buzzy

A word of caution here. I might be slightly biased towards Flex because I have been developing on Flash for quite some time and I find it simply fantastic. Also, I used the Silverlight 2 Beta 1 to build the application. It is obvious that the final release of the product will address some of the issues described here.

I will put up screencasts showing both the applications in action soon.

So, let’s begin…

Flex	Silverlight
Almost everyone has Flash Player 9 installed on their systems. So there are no extra downloads required to view these apps.	Installing the Silverlight 1.0 plugin was a hassle for me. Then the upgrade to the 2.0 version was not as seamless as I had expected. Almost no one has the Silverlight plugin (But Microsoft has Windows update on their side, one ‘Critical Update’ and the problem is solved ).
Flex has a rich control library ready for use.	Even in Beta 1, many controls are missing. Though I expect this problem to be solved by the final release of the product.
Supports all image formats.	Does not support the GIF format. Why? Wasted half an hour on this problem before I realized this.
Even though AS3 is 10 times faster than AS2 (Ask someone who has worked with particle systems), it still cannot compare with the power of C#. Also, can only program in AS3.	Very powerful and easy to use. You can use JavaScript, VB.NET and C#.
Linux support	No Linux support. That’s just wrong.
Databinding is a snap with the [Bindable] tag.	Not as straightforward, but can be done anyway. Also, more powerful(in my opinion).
Data transfer via the proprietary AMF using WebORB, Fluorine, etc is faster than traditional web services.	No such format for data transfer. Will have to stick to SOAP and REST web services(for now).
BlazeDS, the real time data push and remoting platform is open source. Very exciting.	!! Did not find much information about this.
Styling is simplified by using CSS to style your components. Implementation is not complete though. Stuff like background-repeat is a glaring omission.	Have to use XAML resources. Found this unfamiliar.
Debugging is a bit of a hassle.	Debugging using Visual Studio is very easy.
Accessing web services requires manual creation of ActionScript proxy classes. You can automate this by using FlexTense though.	Accessing web services is very easy. Just add a reference to the WebService in Visual Studio and lookup reference.cs for the good stuff
Size of the compiled SWF file is smaller than that of the uncompressed Silverlight component.	Size of the Silverlight component is larger.
!!	Get 10 GB of hosting space free with Silverlight streaming. Deliver rich media. Awesome.
Animation is time based.	Animation is frame based. Can’t say which one is better.
Cannot be search engine optimized. Bots can’t read the contents of the SWF file.	I am confused about this after the introduction of the .XAP file.
Deploying the final application is a snap because there is only one SWF file.	Lots of individual files to be deployed.
Got my copy of Flex Builder 3 Pro for free. If you are a student or faculty member of an educational institution, you can too.	Express editions of Visual Studio are available for free.

Those are all the points that come to mind right now. Will update as I find and learn new stuff.

Buzzy