Introduction to JavaFX Script

by Anghel Leonard
08/01/2007

What Is JavaFX?

In the spring of 2007 Sun released a new framework called JavaFX. This is a generic name because JavaFX has two major components, Script and Mobile, and, in the future, Sun will develop more components for it.

The core of JavaFX is JavaFX Script, which is a declarative scripting language. It is very different from Java code, but has a high degree of interactivity with Java classes. Many classes of the JavaFX Script are designed for implementing Swing and Java 2D functionalities more easily. With JavaFX Script you can develop GUIs, animations, and cool effects for text and graphics using only a few straightforward lines of code. And, as a plus, you can wrap Java and HTML code into JavaFX Script.

The second component, JavaFX Mobile, is a platform for developing Java applications for portable devices. It will eventually be a great platform for JavaFX Script, but for now is largely irrelevant to the content of this article.

Some Examples of JavaFX Applications

Before we start learning a new language, let's see some examples of JavaFX code. A good resource for examples can be found at the official JavaFX site. To download the examples, please click on JavaFX Script 2D Graphics Tutorial. After the download is complete just double-click the tutorial.jnlp file. In a few seconds you should see something like Figure 1 (if you don't see this image, then you have to configure Java Web Start for the .jnlp extension).

Figure 1. Running the tutorial.jnlp tutorial

Take your time looking over these examples and the source code. There are many interesting effects that can be obtained with just a few JavaFX lines.

If you are still skeptical about the utility of JavaFX, take a look at these two demos; they are partial re-creations of StudioMoto and Tesla Motors sites. You can download them demos from Project OpenJFX by clicking JavaFX Script Studiomoto Demo and JavaFX Script Tesla Demo. They require Java Web Start in order to run, but depending on your machine configuration they may start automatically, or you may have to find and run the downloaded .jnlp file.

Download and Install JavaFX

If you are interested in learning to develop JavaFX applications, then you should know that there are at least three methods for working with JavaFX. Also, it is important to know that JavaFX applications are not browser-based. The simplest and quickest method is based on a lightweight tool called JavaFXPad. The major advantage of using this tool is that you can almost immediately see the effect of the changes you are making in the editor. You can download this tool from Project OpenJFX by clicking JavaFX Script JavaFXPad Demo. Again, running this requires Java Web Start (see Figure 2).

Figure 2. Running the JavaFXPad editor

Another way to work with JavaFX is to use the JavaFX Script Plug-in for NetBeans 5.5 or a JavaFX Script Plug-in for Eclipse 3.2 (of course, before downloading and installing any of these plug-ins you must have NetBeans 5.5 or Eclipse 3.2 already installed).

If you decide to start with the JavaFX plug-in for NetBeans 5.5, the instructions on Project OpenJFX for JavaFX for NetBeans will help you. Similarly, if you want to use the JavaFX plug-in for Eclipse, then go to JavaFX for Eclipse. Notice that all the examples from this article were tested with JavaFX plug-in for NetBeans 5.5, but should work in any of the other listed methods.

Testing the Hello World Application with JavaFX Plug-In for NetBeans 5.5

As always when learning a new language, we have to write the obligatory Hello World application:

Listing 1

import javafx.ui.*;
import java.lang.System;
Frame {
    centerOnScreen: true
    visible: true
    height: 50
    width: 350
    title: "HelloWorld application..."
    background: yellow
    onClose: operation() {System.exit(0);}
    content: Label {
        text: "Hello World"
        }
    }

To develop and run this simple example in NetBeans 5.5 follow these steps:

1. Launch NetBeans 5.5.
2. From the main menu select File -> New Project.
3. In the New Project window, select the General category and Java Application project (click Next).
4. In the New Java Application window, type "FXExample" in the Project Name text field.
5. In the same window use the Browse button to select the location of the project.
6. Uncheck the "Set as main project" and "Create main class" checkboxes (click Finish).
7. Right-click on the FXExample -> Source Packages and select New -> File/Folder.
8. In the New File window select the Other category and the JavaFX File file type (click Next).
9. In the New JavaFX File window, type "HelloWorld" for File Name and "src" for Folder (click Finish).
10. Copy the code from Listing 1 and paste it in HelloWorld.fx.
11. Right-click an FXExample project and select Properties.
12. In the Project Properties – FXExample, select the Run node from the Categories pane.
13. In the Arguments text field, type "Hello World" (click OK).
14. Right-click on FXExample project and select Run Project option.

If everything works, you should see a frame like in Figure 3:

Figure 3. Running the Hello World application in NetBeans 5.5

Now you have the software support for developing and running any JavaFX application.

JavaFX Syntax

Before starting with JavaFX, let's go over some of the fine points of the syntax. If you are already familiar with the syntax of the Java language, most of this will look very familiar, but some of it is quite different.

JavaFX Primitive Types

JavaFX supports four primitive types: String (for java.lang.String), Boolean (for java.lang.Boolean), Number (for java.lang.Number) and Integer (for byte,short,int,long,BigInteger).

JavaFX Variables

A JavaFX variable is declared by using the var keyword. See the following examples:

var x:Number = 0.9;
var name:String = "John";
var y:Integer = 0;
var flag:Boolean = true;

var numbers:Number = [1,2,3,4,5];

Pages: 1, 2, 3, 4, 5, 6

Next Page