JavaFX 1.2 Application Development Cookbook: Over 60 recipes to create rich Internet applications with many exciting features

During the early days of the Web, the Java platform was the first to introduce rich content and interactivity in the browser using the applet technology (predating JavaScript and even Flash). Not too long after applets appeared, Swing was introduced as the unifying framework to create feature-rich applications for the desktop and the browser. Over the years, Swing matured into an amazingly robust GUI technology used to create rich desktop applications. However powerful Swing is, its massive API stack lacks the lightweight higher abstractions that application and content developers have been using in other development environments. Furthermore, the applet's plugin technology was (as admitted by Sun) neglected and failed in the browser-hosted rich applications against similar technologies such as Flash.

The JavaFX is Sun's (now part of Oracle) answer to the next generation of rich, web-enabled, deeply interactive applications. JavaFX is a complete platform that includes a new language, development tools, build tools, deployment tools, and new runtimes to target desktop, browser, mobile, and entertainment devices such as televisions. While JavaFX is itself built on the Java platform, that is where the commonalities end. The new JavaFX scripting language is designed as a lightweight, expressive, and a dynamic language to create web-connected, engaging, visually appealing, and content-rich applications.

The JavaFX platform will appeal to both technical designers and developers alike. Designers will find JavaFX Script to be a simple, yet expressive language, perfectly suited for the integration of graphical assets when creating visually-rich client applications. Application developers, on the other hand, will find its lightweight, dynamic type inference system, and script-like feel a productivity booster, allowing them to express GUI layout, object relationship, and powerful two-way data bindings all using a declarative and easy syntax. Since JavaFX runs on the Java Platform, developers are able to reuse existing Java libraries directly from within JavaFX, tapping into the vast community of existing Java developers, vendors, and libraries.

This is an introductory chapter to JavaFX. Use its recipes to get started with the platform. You will find instructions on how to install the SDK and directions on how to set up your IDE. The chapter also provides a high-level introduction to the main features of the JavaFX scripting language such as class creation, variable declaration, data types, JavaFX functional programming support, sequences, and loops.

Before you can start building JavaFX applications, you must ensure that your development environment meets the minimum requirements. As of this writing, the following are the minimum requirements to run the current released version of JavaFX runtime 1.2.

The first step for installing the SDK on you machine is to download it from http://javafx.com/downloads/. Select the appropriate SDK version as shown in the next screenshot.

Once you have downloaded the SDK for your corresponding system, follow these instructions for installation on Windows, Mac, Ubuntu, or OpenSolaris.

$> javafx -version
$> javafx 1.2.3_b36

Version 1.2.x of the SDK comes with several tools and other resources to help developers get started with JavaFX development right away.

The major (and more interesting) directories in the SDK include:

Before you can start building JavaFX applications in the NetBeans IDE, you must ensure that your development environment meets the minimum requirements for JavaFX and NetBeans (see previous recipe Installing the JavaFX SDK for minimum requirements). Version 1.2 of the JavaFX SDK requires NetBeans version 6.5.1 (or higher) to work properly.

As a new NetBeans user (or first-time installer), you can download NetBeans and JavaFX bundled and ready to use. The bundle contains the NetBeans IDE and all other required JavaFX SDK dependencies to start development immediately. No additional downloads are required with this option.

To get started with the bundled NetBeans, go to http://javafx.com/downloads/ and download the NetBeans + JavaFX bundle as shown in the next screenshot (versions will vary slightly as newer software become available).

Installation on Ubuntu Linux and OpenSolaris

Prior to installation, ensure that your Ubuntu or OpenSolaris installation meets the minimum requirements (see recipe Installing the JavaFX SDK).

1. 1. Find the newly downloaded installation package: for Linux, the file will end in *-linux-i586.sh; for OpenSolaris, the file will end in *-solaris-i586.sh.

2. 2. Make the file executable, and run it.

3. 3. Follow the directions from the installer to install NetBeans (default location: $HOME /netbeans-{version-number})

Now that NetBeans is ready, lets create a quick "Hello World" so you can test your JavaFX NetBeans installation. To get started, select New Project from the File menu.

When the New Project wizard opens, select JavaFX from the Categories list and click on the Next button. Enter the location where the project will be saved, and click on the Next button. You will end up with a shell of a JavaFX application ready to run. Update the title and content properties as highlighted in the next code snippet. You can see the full code listing at ch01/source-code/src/hello/HelloJavaFX.fx.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
Stage {
title: "Hello JavaFX"
width: 250
height: 80
scene: Scene {
content: [
Text {
font : Font {size : 16}
x: 10
y: 30
content: "Hello World!"
}
]
}

When you run the code (right-click on the project and select Run Project), NetBeans automatically handles the compilation, packaging, and execution of the code in the JavaFX runtime for you, as shown in the next screenshot.

When you download the bundled NetBeans + JavaFX SDK, it comes with everything needed to start developing JavaFX. The bundle will install the NetBeans IDE and will also automatically download and install the NetBeans plugins required for JavaFX development including the latest SDK. Be aware that if you have downloaded the SDK separately (as explained in the recipe Installing the JavaFX SDK), you will end up with two copies of the SDK on your local machine.

If you already use NetBeans, you can make your IDE JavaFX-ready by downloading the necessary plugins. The plugins contain the JavaFX SDK and all required dependencies to start your JavaFX development immediately, no other download is required. Note that your NetBeans must meet the minimum requirements for JavaFX to work properly (see previous recipe).

Download JavaFX NetBeans plugin

1. 1. Open the Plugins management window (Tools | Plugins) in NetBeans and click on the Available Plugins tab.

2. 2. Do a search for javafx to filter the available plugins list as shown in the previous screenshot.

3. 3. Select the JavaFX Kit and the JavaFX SDK for {Your OS name} bundles as shown in the previous screenshot, and then click on the Install button.

4. 4. Follow the instructions from the NetBeans installer to install the selected plugins.

5. 5. Make sure to select Restart IDE Now to complete the installation.

Before you can start building JavaFX applications in the Eclipse IDE, you must ensure that your development environment meets the minimum requirements for JavaFX 1.2, which requires Eclipse 3.4 (Ganamede) for Java EE developers (or higher). To get the Eclipse plugin to work properly, ensure that you have downloaded and configured the Java JDK and the JavaFX SDK (see the recipe Installing the JavaFX SDK for details).

As with anything else in Eclipse, JavaFX support comes in the form of a plugin. You have to download and configure the plugin to work with your previously installed local JavaFX SDK prior to building your applications. To get started, do the following:

Now that you have Eclipse setup with JavaFX, it makes sense to create a quick Hello World application in Eclipse to test the installation.

To get started, select New from the File menu (you may have to select Other if JavaFX is not listed as a project type).

Edit the sample code by adding the highlighted portion. You can see the full code listing at ch01/source-code/src/hello/HelloJavaFX.fx.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
Stage {
title: "Hello JavaFX"
scene: Scene {
width: 250
height: 200
content: [
Text {
font : Font {size : 16}
x: 10
y: 30
content: "Hello World!"
}
]
}

Once you have updated the code, right-click on the project and select Run As | JavaFX Application. If you are running the application for the first time, you will be prompted to select the application's targeted profile and the main class.

Support for JavaFX in Eclipse comes as separate plugin download. When you install the plugin, it adds the capabilities of JavaFX development to your IDE. Unlike the NetBeans plugin, as of version 1.2, the SDK is not available as part of the plugin download. You must download and have the SDK installed on your workstation. When the plugin is installed, it will look for the SDK on your machine.

To use the SDK tools, you will need to download and install the JavaFX SDK. See the recipe Installing the JavaFX SDK for instructions on how to do it.

Open your favorite text/code editor and type the following code. The full code is available from ch01/source-code/src/hello/HelloJavaFX.fx.

package hello;
import javafx.stage.Stage;
import javafx.scene.Scene
import javafx.scene.text.Text;
import javafx.scene.text.Font;
Stage {
title: "Hello JavaFX"
width: 250
height: 80
scene: Scene {
content: [
Text {
font : Font {size : 16}
x: 10
y: 30
content: "Hello World!"
}
]
}
}

Save the file at location hello/Main.fx.

To compile the file, invoke the JavaFX compiler from the command line from a directory up from the where the file is stored (for this example, it would be executed from the src directory):

javafxc hello/Main.fx

If your compilation command works properly, you will not get any messages back from the compiler. You will, however, see the file HelloJavaFX.class created by the compiler in the hello directory.

If, however, you get a "file not found" error during compilation, ensure that you have properly specified the path to the HelloJavaFX.fx file.

The javafxc compiler works in similar ways as your regular Java compiler. It parses and compiles the JavaFX script into Java byte code with the .class extension.

javafxc accepts numerous command-line arguments to control how and what sources get compiled, as shown in the following command:

javafxc [options] [sourcefiles] [@argfiles]

where options are your command-line options, followed by one or more source files, which can be followed by list of argument files. Below are some of the more commonly javafxc arguments:

If you have used other scripting languages such as ActionScript, JavaScript, Python, or PHP, the concepts presented in this section should be familiar. If you have no idea what a class is or what it should be, just remember this: a class is code that represents a logical entity (tree, person, organization, and so on) that you can manipulate programmatically or while using your application. A class usually exposes properties and operations to access the state or behavior of the class.

Let's assume we are building an application for a dealership. You may have a class called Vehicle to represent cars and other type of vehicles processed in the application. The next code example creates the Vehicle class. Refer to ch01/source-code/src/javafx/Vehicle.fx for full listing of the code presented here.

var make;
var model;
var color;
var year;

function drive () : Void {
println("You are driving a "
"{year} {color} {make} {model}!")
}

var vehicle = Vehicle {
year:2010
color: "Grey"
make:"Mini"
model:"Cooper"
};

class Vehicle {
...
init {
color = "Black";
}
function drive () : Void {
println("You are driving a "
"{year} {color} {make} {model}!");
}
}
var vehicle = Vehicle {
year:2010
make:"Mini"
model:"Cooper"
};
vehicle.drive();

You are driving a 2010 Black Mini Cooper!

Before we look at creating and using variables, it is beneficial to have an understanding of what is meant by data type and be familiar with some common data types such as String, Integer, Float, and Boolean. If you have written code in other scripting languages such as ActionScript, Python, and Ruby, you will find the concepts in this recipe easy to understand.

JavaFX provides two ways of declaring variables including the def and the var keywords.

def X_STEP = 50;
prntln (X_STEP);
X_STEP++; // causes error
var x : Number;
x = 100;
...
x = x + X_LOC;

In JavaFX, there are two ways of declaring a variable:

All variables must have an associated type. The type can be declared explicitly or be automatically coerced by the compiler. Unlike Java (similar to ActionScript and Scala), the type of the variable follows the variable's name separated by a colon.

var location:String;

var location:String;
location = "New York";

var location:String = "New York";

var location;
location = "New York";

var location = "New York";

"The quick brown fox jumps over the lazy dog" or
'The quick brown fox jumps over the lazy dog'

0.01234
100.0
1.24e12

-44
7
0
0xFF

12ms
4s
12h
0.5m

This section discusses concepts that require familiarity with variable bindings as found in other scripting languages. Binding usually refers to the ability to automatically react and handle events caused by resources (or other events) to which handlers are bound.

JavaFX facilitates variable binding using the bind keyword. Let us look at a simple example that shows the ease with which you can bind variables. Note that you can find listings for binding examples at ch01/source-code/src/binding/.

var step = 100;
def locX = bind step;
println ("locX = {locX}");
step = 110;
println ("locX = {locX}");
step = 150;
println ("locX = {locX}");

When you run the application, you will get the following output:

locX = 100
locX = 110
locX = 150

Notice that the value of variable locX is synchronized with the value of variable step. Whenever step is updated, locX changes in value automatically.

The general syntax for binding looks like the following:

def variableX = bind expression

The idea behind binding is to keep variableX, on the left-hand side of the assignment, updated whenever there is a change in the bound expression on the right-hand side. JavaFX supports several forms of expressions which can be used to update the variable on the left-hand side.

var x = 100;
def y = bind x + 10;

var x = 2;
def row = bind if((x mod 2) == 0) "even" else "odd";
for(n in [0..5]){
x = n;
println ("Row {n} is {row}");
}

Row 0 is even
Row 1 is odd
Row 2 is even
Row 3 is odd

var x = 2;
' var y = 2;
y * x;
}
x = 3;
println ( "X = 3, doubled = {xDoubled}");
x = 27;
println ( "x = 27, doubled = {xDoubled}");

function squareIt(x):Number {
x*x;
}
var param = 0;
def squared = bind squareIt(param);
param = 96;
println ("Param = {param}, squared = {squared}");

class Location {
var x:Integer;
var y:Integer;
}
var xLoc = 0;
var yLoc = 0;
def loc = bind Location {
x: xLoc;
y: yLoc;
}
xLoc = 12;
yLoc = 234;
println ("loc.x = {loc.x}, loc.y = {loc.y}");

var xLoc = 0;
var yLoc = 0;
def loc = Location {
x: bind xLoc;
y: bind yLoc;
}

JavaFX offers another event-based mechanism called a trigger. A trigger is a code block that gets executed when the variable it is assigned to is updated. At its simplest form, a trigger is declared as follows

def variable = value on replace [oldValueVarName]{
// code to execute
}

Here, the code block is executed when the variable on the left-hand side of the assignment is updated. The oldValueVarName variable name is optional and holds the value of variable before the update.

def X_BOUND = 10;
var locX = 7 on replace oldX {
if(locX <= X_BOUND) {
println ("{oldX} ==> {locX}, in bound");
}else{
println ("{oldX} ==> {locX}, Out of bound!");
}
}
locX = 12;
locX = 4;

0 ==> 7, in bound
7 ==> 12, out of bound!
12 ==> 4, in bound

The concepts presented here discuss functions as an executable code unit that can be assigned and reused. You are expected to know the general purpose of a function and how to use it. If you have written any code before, you most likely know how to create and use a function.

In JavaFX, A function is a specialized code block preceded by the function keyword. It can accept zero or more typed parameters and always returns a typed value. Here is the declaration of a function type assigned to variable called squareIt, which returns the squared value of the number passed in as parameter. Complete code listing can be found at ch01/source-code/src/javafx/SimpleFunction.fx.

var squareIt : function(:Number):Number;
squareIt = function (x) {
x * x;
}
var square3 = squareIt(3);
println ("3 squared = {square3}");

In JavaFX, a function has a distinct, definable type (similar to String, Number, and Integer). A function type is defined by its parameter signature and its return type. Variables (and parameters) can be assigned a function type. For instance, in the previous snippet, variable squareIt is declared as being a function type. This means that the variable squareIt can be assigned a function that takes one parameter of type Number and returns a value of type Number. squareIt can be used anywhere a function call can be used, as shown in the call var square3 = squareIt(3).

Note that the declaration and definition of the function can be combined in one step, as show next:

function squareIt(x:Number):Number{
x * x;
}

The JavaFX compiler can infer the types associated with a function's parameter signature and return value. Therefore, the function definition can be reduced to:

function squareIt(x) {
x*x;
}

The type inference engine in JavaFX will determine the proper type of the parameter based on value of the parameter at runtime. The return type of the function is based on the type of the last statement in the function or the type of the value used in the return statement.

There are couple more features about functions in which you may be interested.

var f = 10;
bound function increaseIt(a:Number):Number {
a + f;
}
var x = 5;
def y = bind increaseIt(x);

function run() {
println ("I am always called!");
}

This section explore integration techniques between JavaFX and Java. You should have familiarity with the Java language, its libraries, or have the ability to create your own classes or libraries to be called from JavaFX.

The easiest way to see Java and JavaFX interoperate is to create an instance of a Java object and invoke a method on the instance from within JavaFX. Let's go through an example. You can see the full code listing in package ch01/source-code/src/java.

First create and compile this simple class:

public class JavaObject {
private String name;
public JavaObject(String n){
name = n;
}
public void printReverse() {
for(int i = name.length()-1; i >= 0; i--){
System.out.print (name.charAt(i));
}
System.out.println();
}
}

Now create a JavaFX script which creates an instance of JavaObject and invoke the the printReverse() method on the class.

var javaObject = new JavaObject("Hello World!");
javaObject.printReverse();

Java classes and JavaFX classes are binary-compatible. When you compile your JavaFX classes, the JavaFX compiler creates a Java class file (a.class extension file). There are three points that should be made regarding the code snippet in this recipe:

In JavaFX, not only can you instantiate pure Java classes, you can also implement Java interfaces directly. Using this mechanism, you can achieve two-way integration between Java and JavaFX. Again, the full listing of the code presented here can be found in package ch01/source-code/src/java.

interface JavaInterface {
int add(int num1, int num2);
}

public class JavaInterfaceImpl extends JavaInterface {
override function add(num1, num2) {
num1 + num2;
}
}
public function run() {
var adder = JavaInterfaceImpl { }
println(adder.add(1, 2));
}

You should be familiar with the concepts of array, list, and map data types. These are common types found in all popular languages. They are designed to function as a container of other values of arbitrary types.

A sequence type is declared using a non-sequence type followed the square brackets "[ ]". Below are some literal declarations of sequences. You can get full listing of the code from ch01/source-code/src/javafx/SequenceType.fx and Sequence.fx.

var numbers:Number[] = [10.0,5.6,12.3,0.44];
var numbers2 = [0,2,3,4,5,6,7,8];
var notes:String[] = ["Avion","Airplane"];
var timespans = [5s,3m,100s,5m];
var misc = [2,4.0,"messages", 5m];

Sequence types represent a collection of other types in JavaFX. Sequences provide a flat (depth of one) container where you store references to other objects. A sequence is a first-class type in JavaFX. Therefore, it has a return type and can participate in expressions.

JavaFX supports a initialization of sequence types using literal declaration which provides a more natural way of representing the sequence. The literal expression for the sequence shows each item in the sequence separated by a comma as shown below:

var numbers:Number[] = [10.0,5.6,12.3,0.44];

The type inference engine will attempt to determine the type of the sequence variable based on the types of the items within the square brackets.

If all items within the bracket of the literal declaration are of the same type, the variable is coerced into a sequence of that type. For instance, the following example, variable numbers2 is of type Integer[]:

var numbers2 = [0,2,3,4,5,6,7,8];

If items within the brackets are of different types, the inference engine will coerce the variable to be of type Object[]. In the following code snippet, variable misc will be of type Object[] and can receive member of any type:

var misc = [2,4.0,"messages", 5m];

Similar to Java arrays, items in a sequence are referenced using a zero-based positional index. Sequence items are stored in order they are added (or declared) as shown in the snippet below from ch01/source-code/src/javafx/Sequence.fx.

var q1 = ["Jan", "Feb", "Mar"];
println (q1[0]);
println (q1[1]);
println (q1[2]);

Sequences come with several other important features worth mentioning here. Although the literal representations of sequences looks like an array, that is where the similarity ends. Sequences support several data management operations such as insert, union, query, and delete. As you will see below, sequence expressions can also be used as generators in JavaFX loops. The code samples are from script file ch01/source-code/src/javafx/Sequence.fx.

sizeof [1,2,3,4];

println([1,2,3,4] == [4,3,2,1])

println(reverse ["Jan", "Feb", "Mar", "Apr");

var months = ["Jan"];
insert "May" into months;
insert ["Mar","Apr"] before months[1];
insert "Feb" after months[0];

var q1 = ["Jan", "Feb", "Mar"];
var h1 = [q1, ["Apr", "May", "Jun"]];

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
delete "May" from months;
delete months[3];

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

:
months[m|m.startsWith("M")]

for (x0 in seq0 [where {Boolean expression}][, queryn]){}

var points = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];
var evenPoints = for(n in points where n mod 2 == 0) {n}
println (evenPoints);

var doublePoints = for(n in points where n mod 2 == 0,
i in [2,4]){
n * i
}
println (doublePoints);

You should be familiar with the notion of string literals and expressions.

We have already seen how to use String types in other recipes. When creating a String, you simply create a literal or expression to represent the string's content, and use the curly braces to embed expressions as shown below. The full listing for this code can be found in ch01/source-code/src/javafx/StringDemo.fx.

var str1:String = "Hello World!";
var str2 = "Goodbye forever";
var title = "King";
println ("The {title} has arrived!");
var evens = [0, 2, 4, 6, 8];
println("What are the odds {for(d in evens) "{d + 1} "}");
var amount = 445234.66;
println ("Your house is worth ${%,.2f amount}");

Similar to other types, a string can be declared with a literal representation, participate in expressions, and hold a value. The previous snippet shows the literal declaration of a string. Variable str2 is coerced by the type-inference engine into a String type implicitly.

One of the interesting features of the String type in JavaFX is its ability to have embedded expressions (similar to other templating languages) enclosed in curly braces. In the previous code snippet, println ("The {title} has arrived!") will print the string with the value of the variable title embedded in it.

You can also have complex expressions embedded in the string, as is shown from the code snippet println("What are the odds {for(d in evens) "{d + 1} "}") from the recipe. The embedded expression contains a loop that traverses elements from variable evens and outputs the result from the nested string "{d + 1} " with each pass, producing new string What are the odds 1 3 5 7 9.

The JavaFX Sting type has the ability to process string formatting expressions based on Java's java.util.Formatter class. In the previous code snippet, we used format expression %,.2f to format the variable amount which displays Your house is worth $445,234.66. You can find information about supported format expressions at http://java.sun.com/javase/6/docs/api/java/util/Formatter.html.

Before we leave the discussion on String, it's worth taking a look at localization. In JavaFX, the localization mechanism is an extension of the string expression.

var msg1 = ##"Lift the cover";
var msg2 = ##[red button]"Press the red button to destroy";
println (msg1);
println (msg2);

"Lift the cover"="Soulevez le couvercle"
"red button"="Appuyez sur le bouton rouge pour détruire"

Soulevez le couvercle
Appuyez sur le bouton rouge pour détruire