JavaFX or Flex?

JavaFX is one of the recent additions to the Java Platform. Its aim is to "to simplify and speed the creation and deployment of high-impact content for a wide range of devices". I think SUN is right to focus on this market.

One of my first thoughts was: "What's with the name?" In my mind it is a reference to Flex. I doubt that it is wise for SUN to make such a reference; they might not be up for that kind of competition...

But for now, let's focus on what is in this new package.

Getting started

Oke, how do I get started? There is a Netbeans Plug-in and an Eclipse plug-in. Since Eclipse is my usual working environment, I choose to add that plugin to my installation. Installing it is straight forward (as expected) from the update site (http://download.java.net/general/openjfx/plugins/eclipse/site.xml). So, after starting a new project, I created my first JavaFX file.

The empty FX file is staring you in the face. How to get started? After browsing the internet for a bit I found some examples and came up with this trivial code.

It compiles oke. How do you run it? The plug-in has a run configuration that can run JavaFX. Actually, the class net.java.javafx.FXShell is used to start the application.

You have to put the name of the JavaFX script you want to run on the command line.

After hitting the "Run" button, this rather useless frame is shown.

Lists

So far so good. We're getting started. So how about a real life example? Let's start with a textfield, a button and a list. Declaring the interface with JavaFX is rather simple. This:

import javafx.ui.*;
Frame {
 visible: true
 content: Box {
  orientation: VERTICAL
  content : [
   TextField {
   },
   Button {
    text: "Add"
   },
   ListBox {
   }
  ]
 }
}

Will produce this simple application:

So how doe you get the dynamics in? Well, to a Java developer, that is kind of a surprise. The eventing system going on in the components must seem familiar if you've ever programmed swing, but the data/model part is quite different. We need a class to contain the data, so far, nothing new. But in stead of field and methods, this class has attributes and operations. The code below will get the application to work.

import javafx.ui.*;
class MyModel {
 attribute input:String;
 attribute list: String*;
}
var model: MyModel = new MyModel();
Frame {
 visible: true
 content: Box {
  orientation: VERTICAL
  content : [
   TextField {
    value: bind model.input
   },
   Button {
    text: "Add"
    action: operation() {
     insert model.input after model.list[sizeof model.list];
    }
   },
   ListBox {
    cells: bind foreach (line in model.list)
     ListCell {
      text: line
     }
   }
  ]
 }
}

The components are bound to the model using the bind keyword. The action handlers are called operationattributes. Furthermore there are a whole lot of keywords that can be applied, such as insert, delete and even exotic ones like after. But after all this, the application behaves as expected:

Flex

So what would that look like in Flex? For flex, there is a Eclipse plugin created by Adobe. It has a graphical mode that can be used to drag-and-drop an interface together.

This design view is very good and easy to use, but there is also a "code" view, in which you can see the actual MXML code that is backing up this application.

The namespaces in the document are a bit different than what you'd expect from XSD. They actually refer to the package structure of the underlying code. The "XSD" is thus quite dynamic. Running the application from Eclipse is straight forward. Eclipse will use the Flex SDK to compile the MXML file into a SWF movie and it can use the standalone flash player to show it.

Now how about adding the dynamic behaviour? We'll have to look at the MXML source and add some ActionScript code. The code will look like this:

 version="1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   x="0" y="0">
       id="input"/>
       label="Add" click="data.addItem(input.text)"/>
       id="list" dataProvider="{data}"/>
  >
   id="data"/>
>

An ArrayCollection is used to hold the data. The list will use it as a DataProvider. The click event of the button is linked to some custom code that adds the text to the data.

Conclusion

We've been able to implement this application using JavaFX and Flex in a matter of minutes. Granted, it's a very simple application and it could have been implemented differently in both, but I do think we have seen some features of both.

1. Declarative User Interface Language
Both JavaFX and Flex are a declarative language to create a user interface. I think this is a big step up from the Swing code needed to write a simple application like this.
2. Scripting Lanuguage
Flex uses ActionScript, an ECMA4 dialect. This is a language similar to JavaScript. It's object oriented and can use both strict and non-strict typing.
JavaFX comes with a new scripting language. Why SUN choose this is beyond me. I think the Java syntax and semantics would have been perfect to express the dynamics of the interface.
3. Syntax
This might be a matter of taste, but to me the choice for XML makes a lot of sense. This is a language used to express things that are hierarchical, such as a component tree. JavaFX again comes with a new syntax, which resembles the Java language, but is quite different. This will only lead to confusion.
4. Tools
The FlexBuilder stems from a long line of tools created by MacroMedia, such as DreamWeaver and Flash. It is quite good, although it sometimes feels a bit unstable. The tooling for JavaFX is still lacking behind, but it will catch up probably.