JavaFX Script in Action: Lacking for RIA, Promising for Mobile : Page 2

How does the new JavaFX Script language fit with existing Swing and Java2D UI development? An experienced Java UI developer breaks down the good, the bad, and the ugly.

by Jacek Furmankiewicz

Aug 27, 2007

Page 2 of 4

The Good
Many of JavaFX Script's features left me impressed.

Basic Language Features
At the core of JavaFX Script lies its JSON-like syntax for describing user interfaces, which I think is a brilliant design on Chris Oliver's part. Unlike Microsoft's competing XAML, generations of JavaFX Script developers will never have to wrestle with the verbosity of XML to describe user interfaces. Instead they will be able to describe their UIs in a much simpler and more understandable fashion, such as in this example from the JavaFX Script tutorial, which renders the UI in Figure 1:


Frame {
            height: 400
            width: 300
            content: Tree {
                root: TreeCell {
                    text: "Tree"
                    cells:
                    [TreeCell {
                        text: "colors"
                        cells:
                        [TreeCell {
                            text: "<html><font color='blue'>blue</font></html>"
                        },
                        TreeCell {
                            text: "<html><font color='red'>red</font></html>"
                        },
                        TreeCell {
                            text: "<html><font color='green'>green</font></html>"
                        }]
                    },
                    TreeCell {
                        text: "food"
                        cells:
                        [TreeCell {
                            text: "hot dogs"
                        },
                        TreeCell {
                            text: "pizza"
                        },
                        TreeCell {
                            text: "ravioli"
                        }]
                    }]
                }
            }
            visible: true
        }

Figure 1. Sample JavaFX Script User Interface

Powerful High-Level Graphics Capabilities
The previous code is much simpler than the equivalent Swing code. However, this benefit is nothing compared with how productive you become in JavaFX Script when you use its advanced graphic functions. For example, the following code creates the flashy logo seen in Figure 2:


import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;

Group {
    content:
    [Rect {
        x: 10
        y: 10
        width: 460
        height: 100
        fill: LinearGradient {
            x1: 0
            y1: 0
            x2: 1
            y2: 0
            stops:
            [Stop {offset: 0, color: white},
            Stop {offset: .5, color: yellow},
            Stop {offset: 1, color: orange}]
        }
        stroke: red
        strokeWidth: 1
        arcHeight: 90
        arcWidth: 90
    },
    Text {
        x: 80
        y: 35
        content: "DevX.com"
        font: Font {face: VERDANA, style: [ITALIC, BOLD], size: 60}
        fill: LinearGradient {
            x1: 0, y1: 0, x2: 0, y2: 1
            stops: 
            [Stop {
                offset: 0.2
                color: red
            },
            Stop {
                offset: 0.5
                color: orange
            },
            Stop {
                offset: .8
                color: red
            }]
        }
        filter: 
        [Glow {
            amount: 0.1
        }]
    }]
}

Figure 2. Flashy JavaFX Script Logo

You can imagine how complex creating something like this would be using raw Java2D code.

Simple Creation of Entity/Data Classes
If you've ever gotten tired of endlessly creating GET/SET methods on POJOs, JavaFX Script's straightforward syntax will be very welcome:


class Person {
           attribute name: String;
}

The JavaFX "attribute" keyword is pretty much identical to a standard JavaBean property, but it is much less verbose than the equivalent Java code:


class Person {
	private String name;
	
	public String getName() {
		return this.name;
	}

	public void setName(String name) {
		this.name = name;
	}
}

Powerful Databinding
This is the part of JavaFX Script that really impressed me. Databinding to Swing components is not only very easy but also extremely powerful, as it allows for the usage of expressions in the binding logic, for example:


Label {
	text: bind "Number of clicks: {model.numClicks}"
}

As you can see, JavaFX Script's high-level dynamic scripting abilities make it potentially a very powerful tool for the hard-core coder.

« Previous Page 123 4 Next Page »

0 Comments (click to add your comment)

Comment and Contribute