Silverlight Vs JavaFX Vs Flex/AIR

Note : This Comparison is done for the Alpha version of JavaFX.

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.

Flex

SilverLight

JavaFX

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, Text Area, Data Grid, Tree, Tab Navigator, 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 Text Area for displaying "hello" messages and a Button to say "hello".

As you can see, Flex event handling is straight forward. Within the Button 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 Action Script 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, Action Script 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, Silverlight 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>

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 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 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 focuses on features that deal with bits and bytes on screen, the creative media rendering aspect of RIA. 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 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

This Comparison is done for the Alpha version of JavaFX.