Oct 10, 2009

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.

clip_image002

Flex

clip_image004

SilverLight

clip_image006

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.

2 comments:

sorskoot said...

Hi,

Great to see a comparison between these three technologies. Although I would like to point out that Silverlight is at its 3rd version already (http://www.microsoft.com/silverlight/overview/default.aspx). It has a lot of build in controls and a library with extra controls like charts as an additional download (http://silverlight.codeplex.com). Xaml can be visualy edited in Visual Studio and in an external tool called Expression Blend (http://www.microsoft.com/expression).
It isn't even necessary to use the Microsoft stack. Silverlight Applicaition can also be developed using Eclipse on a Mac.
The implementation for Linux is called Moonlight. It runs on Mono (platform independed .Net). Moonlight is in alpha for Silverlight 2 at the moment.

Looking forward to see more great articles.

Timmy Kokke
(http://blog.timmykokke.com)

Eric Wendelin said...

Nice comparison, but you seem to be a bit behind on JavaFX:

* JavaFX has been at 1.2 since June 2009
* It does have built-in UI controls, but not as many as Flex
* Latest IDE NetBeans 6.7 supports it
* ... which does not have a visual designer (yet ;)
* ... but it does have a toolbar for controls

-Eric Wendelin

Text Widget

Copyright © Vinay's Blog | Powered by Blogger

Design by | Blogger Theme by