The RIA world has been seeing intensified competition since last year's releases of Microsoft Silverlight and Sun JavaFX, which joined the Adobe Flex/AIR to become the major RIA development platforms. Even though all three of them intent to reach the the same goal, richer user experience and more creative media delivering, the technologies behind them are vast different. But how different from a RIA developer's perspective? Let's do a quick comparison by writing a small program on these three platforms.

ﾠ
The program does a very simple thing. You click the button, Say Hello, then in a text field, the program responses by saying "Hey". The following are the screen shots of the Flex, Silverlight and JavaFX version of the running programs.

Now, let's take look at the code behind them.

ﾠ1. "Hello, Flex!"

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

    xmlns:mx="http://www.adobe.com/2006/mxml" 

    layout="absolute" 

    backgroundColor="#FFFFFF">

    

        <mx:TextArea x="114" y="11" height="169" id="txtResponse"/>

        <mx:Button x="28" y="10" label="Say Hello" click="sayIt()"/>

    

    <mx:Script>

        <![CDATA[

            public function sayIt():void{

                txtResponse.htmlText = 

			txtResponse.htmlText + 

                  "<b>You:</b> Hello, Flex!<br/>";


                txtResponse.htmlText = 

			txtResponse.htmlText +

                  "<b>Flex:</b> Hey you, welcome to Flex world!<br/>";

            }            

        ]]>

    </mx:Script>

</mx:Application>

In Flex, the UI components are defined and laid out using MXML, a XML based markup language introduced with Flex. MXML includes a set of tags for UI components or controls. For example, Button, TextArea, DataGrid, Tree, TabNavigator, Accordion, and Menu are all part of the standard set of tags. You can also extend the MXML tags and create your own components. In the program above, there are only two components, a TextArea for displaying "hello" messages and a Button to say "hello".

As you can see, Flex event handling is straight forward. Within the Buttion tag, "click="sayIt()" Specifies when the mouse is clicked the button, the even handler function sayIt()will run. Also noticed is that you can embed ActionScript code inside the MXML program. Just be aware though, something you can do might not something you want to do in a real world Flex project. By the way, ActionScript is a scripting language based on ECMAScript (JavaScript), used primarily for the development of websites and software using the Adobe Flash Player based platform.

This small program was written using Flex Builder 2.0. In this post I won't go through details on how to use Flex Builder, Silverlgiht and JavaFX development environments.

Next, we'll see how exactly the same function is written in Silverlight.

2. "Hello, Silverlight!"

<Canvas x:Name="parentCanvas"

     xmlns="http://schemas.microsoft.com/client/2007" 

     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

     Loaded="Page_Loaded" 

     x:Class="HelloSilverlight.Page;assembly=ClientBin/HelloSilverlight.dll"   xmlns:UIControls="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"

        Width="640"

        Height="480"

        Background="White" 

        >

 <TextBlock Canvas.Left="130" Canvas.Top="11" Height="169"   

             x:Name="txtResponse"/>

 <UIControls:Button  Canvas.Left="10" Canvas.Top="10" Text="Say Hello"

            Click="SayIt"/>

</Canvas>

You can see the above Silverlight code closely resembles what we've seen in Flex code. Indeed, Silverlight employs the same approach as Flex does for UI definition and layout. With Silverlight, the XML based markup language is called XAML, which is used in the .NET Framework technologies, particularly in Windows Presentation Foundation (WPF). The above code was written in Silverlight 1.1 Alpha, where there are very limited amount UI controls can be used to write a interactive application. The Button control is provided from Silverlight SDK as an example.

The mouse event handling is similar to Flex's too. The actual code that implements the SayIt() handler is in a JavaScript file that represents the the program source code of the XAML page. The code snipe is shown as following.

private void SayIt(object sender, EventArgs args)
       {
         txtResponse.Text = txtResponse.Text +
                          "You: Hello, Silverlight!\n";
         txtResponse.Text = txtResponse.Text +
                 "Silverlight: Hey You, Welcome to the Silverlight world!\n";
        }

Even though all C#, VB.Net and ASP.net can be used to develop Silverlight application, in this case the code behind is JavaScript.

The current Silverlight 1.1 Alpha focuses on features that deal with bits and bytes on screen, the creative media rendering aspect of RIA. Writing sophisticate interactive Silverlight application has to wait the soon releasing Silverlight 2.0, which will include a rich set of UI controls for RIA application development.

Let's find out how JavaFX does it.

3. "Hello, JavaFX!"

package hellojavafx;

import javafx.ui.*;


class HelloModel {

    attribute saying: String;

}

var model = HelloModel {

    saying: ""

};

Frame {

    title: "Hello, JavaFX"

    width: 500

    height: 300

    content:  Panel {

        content: 

        [Button {

            x: 10 y: 10 text: "Say Hello"

            action: operation() {

                 model.saying = model.saying.concat("You: Hello, JavaFX!\n");

                 model.saying = model.saying.concat("JavaFX: Hey you, Welcome to JavaFX World!\n");

            }

         },

         TextArea {

            x: 110 y: 11 height: 169 width: 350

            text: bind model.saying

         }

        ]

    }

    visible: true

}

The JavaFx script code looks quite different from both Flex and Silverlight codes. JavaFX Script is a new script language introduced as part of the JavaFX technology and tool set. JavaFX Script uses a declarative syntax for specifying GUI components. It intents to make the UI code closely matches the actual layout of the GUI. Another observation is that the JavaFX script code looks similar to the legacy Flash declarative coding. That fuels the speculation that Sun is targeting the Flash designers for the adaption of JavaFX technologies.

Since JavaFX is built on top of the Java technology stack, all the Swing components are exposed to JavaFX as well. Even though JavaFX is initially marketed as Flash alike creative media delivering platform, the rich UI components allow develop complex RIA applications.

In next few weeks we will see the new releases of Flex 3.0 and Silverlight 2.0. There will be JavaFX design tool in the pipe line for this year as well. The RIA technologies in general is getting even more mature in 2008.

In conclusion, let me organize some information in the following table.

	Flex	Silverlight	JavaFX
Version	3.0	1.1 Alpha	1.0
Built-in UI Controls	Yes	Very limited to none	Via Swing
IDE	Flex Builder 3.0 (Eclipse platform)	Visual Studio 2008 .NET Platform 3.5 Silverlight 1.1 Alpha Visual Studio 2008 Template	NetBean 6.01 JavaFX plugin
IDE Visual Design	Yes	No	No
IDE Toolbar for Controls	Yes	No	No
Browser Client	Adobe Flash Player 9	Silverlight 1.1 Alpha	Java Plugin with JavaFX extension
Languages	MXML ActionScript	XAML JavaScript (C#, VB.Net, ASP.Net)	JavaFX Script Java

Read more from Moxie Zhang.