Lesson 1: Getting Started with JavaFX Script

Print-friendly Version    Download tutorial

The JavaFX Script programming language is based on the Java Platform, and as such, requires JDK 5 or JDK 6 (6 is faster) to be installed on your system. If you have not done so already, download and install JDK 6 or JDK 5 now, before proceeding with this tutorial.

When it comes to choosing a development environment, you have two broad categories of choices: use an Integrated Development Environment (IDE), or use a plain text editor. This choice is entirely a matter of personal taste, but the following summary might help you to make an informed decision.

Generally speaking:

• An IDE provides a complete development environment all in one place. You download one piece of software, or perhaps a plug-in to that software, which provides everything you need to compile/run/debug your application. IDEs present the most commonly used functions as Graphical User Interface (GUI) elements, and offer many useful features, such as automatic code completion and custom source code views. An IDE also gives you immediate feedback on errors and highlights code so that it is easier to understand. The officially supported IDE for the JavaFX Script programming language is NetBeans IDE for JavaFX.
  
  
• A text editor provides simplicity and familiarity. Experienced programmers often rely on their text editor of choice, preferring to work in that environment whenever possible (some editors, like vi, have a rich set of built-in keystroke commands that some programmers simply cannot live without!) If you already have a preferred editor, rest assured that you can download the sample code for each lesson as .fx source files for use in your editor of choice.

The JavaFX Script programming language is a compiled language, which means that any source code you write must first be converted into Java bytecode — the language of the Java Virtual Machine — before it can run on your system. This is true regardless of your development environment (be it command line or IDE). If you download and install NetBeans IDE for JavaFX or the JavaFX Plugin for Eclipse, the JavaFX compiler and runtime will be installed automatically. If you use a different development environment, the easiest way to obtain this software is to download the entire JavaFX SDK, which gives you the compiler, runtime, and a number of other tools.

Another way is to simply download the latest compiler binary from the openjfx project website. The compiler itself is written in the Java programming language; installing the precompiled binary therefore becomes a matter of extracting the downloaded file and adding the javafxc and javafx tools to your path. The complete set of instructions for this approach can be found on the PlanetJFX Wiki.

Finally — if you want to live on the bleeding edge — you can join the OpenJFX Compiler Project, create your own copy of the compiler workspace, and build everything yourself from the compiler source files. (If you choose this approach, you will also need the 1.7.0 version of Apache Ant, plus a recent copy of Mercurial).

If you have chosen the NetBeans IDE as your development environment, you can use the following instructions to create a project for your first script: a simple calculator.

Step 1: Create a New Project

Launch the NetBeans IDE and choose File | New Project.

When the new project wizard appears, choose JavaFX as the category and press Next to continue.

This image has been scaled down to fit your screen. Click to enlarge.

Step 2: Choose a Project Name and Location

Next, type "Calculator" as the project name. The NetBeans IDE will provide a default location on your system for this project. You can keep this suggestion, or specify a new one. Make sure that "Empty Project" and "Set as Main Project" are selected, but do not check the "Create Main File" checkbox. (Checking this box would generate a file named Main.fx, which we are avoiding in this example.) Press the "Finish" button when done.

This image has been scaled down to fit your screen. Click to enlarge.

Step 3: Add a Source File to the Project

The left side of the IDE contains a file browser window as shown below. You can see that the Calculator project exists, but currently has no source files:

To add a source file to the project, choose File | New File. Select JavaFX as the category and Empty JavaFX File as the file type:

This image has been scaled down to fit your screen. Click to enlarge.

Next, type "Calculator" as the file name, but leave the package selection empty. You will see a package warning at the bottom of the screen, but ignore this for now; throughout most of this tutorial, we will be placing code into the default package. Press the "Finish" button when done.

This image has been scaled down to fit your screen. Click to enlarge.

Step 4: Paste Source Code, Compile, and Run the Application!

The file browser now shows Caclulator.fx as part of the the default package. The source code editor (right hand pane) now contains some default code, which you can safely erase:

This image has been scaled down to fit your screen. Click to enlarge.

In its place, paste in the contents of Calculator.fx. Certain keywords are now highlighted, showing that the editor now recognizes the syntax of the JavaFX Script programming language:

This image has been scaled down to fit your screen. Click to enlarge.

Now look for these buttons along the top of the screen:

This image has been scaled down to fit your screen. Click to enlarge.

Press the green button in the center to compile and run the application. If prompted, click OK to set Calculator as the project's main class.

This image has been scaled down to fit your screen. Click to enlarge.

You should see output similar to the above. If so, then congratulations, your project works!

If you will be working from the command line only, save Calculator.fx to a directory of your choice. Assuming that the JDK and JavaFX SDK are already installed and in your path, you should be able to compile this program with the following command:

javafxc Calculator.fx

After compilation, you will find that the corresponding Java bytecode has been generated and placed into a file named calculator.class.

You can now run the compiled class in the Java Virtual Machine with the following command:

javafx Calculator

The output is:

100 + 2 = 102
100 - 2 = 98
100 * 2 = 200
100 / 2 = 50

This application may be small, but it introduces you to some important programming language constructs (discussed in the next lesson). Learning these constructs is your first step towards mastering the JavaFX Script programming language.