vogella.de

JavaFX is a rich client platform for building cross-device applications and content. This article will use JavaFX script, the programming language for JavaFX. The following will use JavaFX as a short term for JavaFX script.

JavaFX script is a programming language from Sun for creating rich media and interactive content which is tightly integrated with Java. With JavaFX it should be easy to develop Rich Internet Applications (RIA).

It is a statically typed language which means that the data types of each variable, return value, etc. is known at compile time. JavaFX uses type inference / implicit typing to identify the type of a variable, e.g. the programmer does not have to specify the type himself. JavaFX is a declarative language, e.g. you describe what the application should do, rather then specifying the control flow of the application yourself. See Declarative programming for details.

The language provides data binding to connect UI elements with model elements.

JavaFX is compiled to Java byte code.

The basis for a JavaFX UI application is the class javafx.stage.Stage. Within this stage you have a hierarchy of graphical elements which are described as part of a javafx.scene.Scene. These graphical elements are called nodes and can be:

Download JavaFX SDK (not the Netbeans bundled version) from http://java.sun.com/javafx/downloads .

JavaFX comes with an automatic installation routine for Windows, for the other platforms please check the installation guides of Sun.

Use the Eclipse update manager to install the JavaFX plugin from http://javafx.com/downloads/eclipse-plugin .

See Using the Eclipse Update Manager for additional information.

Create a new JavaFX project "de.vogella.javafx.first" via selection File -> New -> Project -> JavaFX

Select the empty project and press finish.

Create a package "de.vogella.javafx.first". Right click on the package, select New -> Empty JavaFX Script

Call your new script "MyScript"

Note that the JavaFX perspective offers nice snippets which you can use to build for JavaFX application. Open "Applications" and select Stage.

Drag "Stage" into your source editor window. Change the title to "My first JavaFX program". Press then insert.

Change the code to the following.

				
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;

package de.vogella.javafx.first;


/**
 * @author Lars Vogel
 */
Stage {
    title : "My first JavaFX program"
    scene: Scene {
        width: 200
        height: 200
        content: [ 
         Text {
              font: Font { 
              		size: 12 
              		}
              x: 10, 
              y: 50
              content:"Hello Java FX World!"
              }
         Circle {
                centerX: 100,
              	centerY: 100,
                radius: 40,
                fill: javafx.scene.paint.Color.BLACK
              	}
        
        ]
    }
}
			

Select your script, right mouse click on it and select "Run as -> JavaFX Application"

Here you can define how your program should run. Under Profile select "Desktop profile - Run as Application". Press run.

The result should look like the following.

Congratulations. You created your first JavaFX application.

Change the code to the following to make usage of a timeline which changes the size of the ball. The animation is activated by clicking on the circle.

				
package de.vogella.javafx.first;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Node;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.input.*;
import javafx.animation.*;
import javafx.scene.*;
import javafx.animation.transition.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.transform.*;
import javafx.stage.*;


/**
 * @author Lars Vogel
 */
var size = 30 ; 
var time =  Timeline {
     			repeatCount: Timeline.INDEFINITE,
                keyFrames: [
                 KeyFrame {time: 0s  values: size=> 20 },
                 KeyFrame {time: 5s  values: size=> 100 tween  Interpolator.LINEAR }
   				]
                       
			}
			
Stage {
      
    title : "My first JavaFX program"
    scene: Scene {
        width: 200
        height: 200
        content: [ 
         Text {
              font: Font { 
              		size: 12 
              		}
              x: 10, 
              y: 50
              content:"Hello Java FX World!"
              }
         Circle {
                centerX: 100,
              	centerY: 100,
              	
                radius: bind size,
                fill: javafx.scene.paint.Color.BLACK
                onMousePressed: function(e:MouseEvent) {
                        time.play();
                    }
              	}
        ]
         
         
    }
  
}