Buzzy And Me

I had a pleasant chat with Maijaliisa Burkert of Sun Microsystems yesterday about my experience with developing Rich Internet Applications using JavaFX.

Among other things, we talked about my winning application at the Code JavaFX India contest, improvements in JavaFX 1.2, the new JavaFX Authoring tool and the exciting possibilities offered by JavaFX Mobile.

Catch the full details at Student Views & Reviews blog or listen to the podcast using the player embedded below.

With the recent release of Silverlight 2 RC1 and Flash Player 10, things in the RIA world have never looked more interesting. I was going over the forums on Silverlight.net and realised that some of the criticism directed towards Silverlight was regarding the lack of support for a binary protocol similar to AMF, which is supported by the Flash Player. Data transfer using AMF is definitely faster than the more verbose XML.

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

About 5 months ago, I made a Flex/AIR application called Stockastica. It was a virtual stock trading simulation. Subsequently, I ported it to Silverlight 2 Beta 1. The first beta was just released and I was eager to see what I could do with it. It wasn’t a very complicated app. Only basic web services were used. I made the app and forgot about it.

Today, I decided to port the app to beta 2. It is quite daunting when you start out. But like all things, you only need to find the right resources to help you get started. Probably the most helpful one was a post on /dev/arthur. It solved almost all my problems.

If you are hosting the app on IIS7, don’t forget to add a .xap extension with a mime type of application/x-silverlight. Porting apps that use sockets was a bit troublesome. A detailed description of the changes between beta 1 and 2 is available here.

A screencast of the ported application…

Silverlight Stockastica Demo from Chinmay Garde on Vimeo.
Regards,
Buzzy

<mx:devsummit>

Adobe is organizing a developer’s meet on September 10-11, 2008 in Bangalore, India. The RIA Developer Summit is focused on developers. Adobe RIA Developer Summit offers a unique opportunity to designers and developers to gain insights into the design and development of RIAs. The key features are:

• Hear from eminent personalities like Ben Forta, Director – Evangelism, and Michele Turner, VP – Platform, on the impact of RIAs.
  
• Interact with the Flex team and learn how to get that “killer look” for your application that you always dreamed off.
• Learn how Adobe Flex dramatically accelerates your projects.
• What’s more, get Adobe Flex Builder 3 worth around Rs. 12000/- FREE !

For young student developers, this is a terrific opportunity. So go ahead and register at Adobe India’s Technical Evangelist’s site . If you are a  faculty drop Raghu a mail at raghunath.rao at gmail dot com, and he just might personaly call and invite you!

You could also leave me a comment for any furthur information. Cya at the developer’s meet.

- Neyawn & Buzzy

Now that Stockastica is fully ready, I have been working on porting the Stockastica Flex application to AIR.

Porting any Flex application to AIR involves changing the <Application> tags to <WindowedApplication> and adding an XML file. It is painfully simple. I did spend some time adding features that are specific to a desktop application.

We also spent some time modifying the CSS properties to give it a customized look( though I am pretty sure I managed to ruin even the plain vanilla look ). It felt weird knowing that I was modifying the presentation layer of a desktop application using CSS. But it works flawlessly and I was really impressed, especially after I had gone through the harrowing experience of styling and skinning the Silverlight app. Using XAML resources is not as intuitive as using CSS.

Here is a screencast of Version 2.0 of the App I finally prepared after porting it to AIR. I am sorry about the large resolution. Will post another one on a lower resolution soon. Hope you like what you see. Please leave your comments below. I would love to hear any suggestions.

Buzzy

Things couldn’t have gotten better.

Almost an year back, Buzzy had developed this App Stockastica, a virtual stock market game using Visual Studio, retrieving live data from Nasdaq.com. It retrieved the Quotes of 20 companies, and displayed them wherein, users could buy and sell stocks using virtual bounty. At the end of the day, the person with the biggest net assets won $50 real money from the organizers! The UI was simplistic, and minimalistic. But then thats what you can do when you are on a self motivated project with a deadline of 4 days, and you have no idea whether the idea is feasible.

That was then. Thanks to Raghu, Technical Evangelist, Adobe Systems, Bangalore, who came to our college and held a 2-day workshop on Flex, we got a bit into Flex. And then, we decided, we would go for developing the App in Flex this year. A few months later Flex 3 was released, and we got a free copy of Flex 3 for students, and started out building the App in Flex 3.

And here it is- Version 1.0 of Stockastica.

[ The Screencast is made using Jing, which is a recent discovery, and which is awesum too!]

[ P.S. We ARE still working to better the Plain Vanilla look, getting more and more confused, every time we tweak it ]

I have been developing on both Flex and Silverlight for some time, and now is as good a time as any to evaluate these two exciting technologies. My goal was to create two similar applications on both Flex and Silverlight. I decided to redo the Stockastica application. It is an online stock trading simulation. Last year it was done using ASP.NET. This year I decided to use the new RIA technologies to dive into the world of Web 2.0.

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