Set Up the Application

You can build a JavaFX application using any development tool designed for creating a Java application. The tool used in this Getting Started tutorial is NetBeans IDE. Before you begin, make sure that the version of NetBeans IDE that you are using supports JavaFX 2.0. See the System Requirements for details.

Set up your JavaFX project in NetBeans IDE as follows.

1. From the File menu, choose New Project.

2. In the JavaFX application category, choose JavaFX Application. Click Next.

3. Name the project ColorfulCircles and click Finish.

4. Open the ColorfulCircles.java file, copy the import statements, and paste them into your project, overwriting the import statements that NetBeans IDE generated.

   Or, you can generate the import statements as you work your way through the tutorial by using either the code completion feature or Fix Imports command in NetBeans IDE. When there is a choice of import statements, choose the one that starts with javafx.

Create the Application Basics

Delete the ColorfulCircles class that NetBeans IDE generated and replace it with the code in Example 1. This is the minimum code needed to run a JavaFX application.

public class ColorfulCircles extends Application {
 
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        
        primaryStage.show();
    }
}

The ColorfulCircles class extends the Application class and includes two methods. The first method is the main() method, which calls the launch() method. As a JavaFX best practice, the launch() method is the only method called in the main() method.

Next, the ColorfulCircles class overrides the abstract start() method in the Application class. The start() method takes as an argument the primary stage for the application. The final line of code makes the stage visible.

You can compile and run the ColorfulCircles application now, and at each step of the tutorial, to see the intermediate results. If you run into problems, take a look at the code in the ColorfulCircles.java file.

Add the Scene

Now add the scene and all its contents before the primaryStage.show() line as shown in Example 2.

@Override 
public void start(Stage primarystage) {
    Group root = new Group();
    Scene scene = new Scene(root, 800, 600, Color.BLACK);
    primaryStage.setScene(scene);

    primaryStage.show()

If you ran the application at this point, you would see a completely black scene.

Add Graphics

Next, create 30 circles by adding the code in Example 3 before the primaryStage.show() line.

Group circles = new Group();
for (int i = 0; i < 30; i++) {
   Circle circle = new Circle(150, Color.web("white", 0.05));
   circle.setStrokeType(StrokeType.OUTSIDE);
   circle.setStroke(Color.web("white", 0.16));
   circle.setStrokeWidth(4);
   circles.getChildren().add(circle);
}
root.getChildren().add(circles);

This code creates a group named circles, then uses a for loop to add 30 circles to the group. Each circle has a radius of 150, fill color of white, and opacity level of 5 percent, meaning it is mostly transparent.

To create a border around the circles, the code includes the StrokeType class. A stroke type of OUTSIDE means the boundary of the circle is extended outside the interior by the StrokeWidth value, which is 4. The color of the stroke is white, and the opacity level is 16 percent, making it brighter than the color of the circles.

The final line adds the circles group to the root node. This is a temporary structure. Later, you will modify this scene graph to match the one shown in Figure 2.

Figure 3 shows the application. Because the code does not yet specify a unique location for each circle, the circles are drawn on top of one another, with the upper left-hand corner of the window as the center point for the circles. The opacity of the overlaid circles interacts with the black background, producing the gray color of the circles.

Figure 3 Circles

Description of "Figure 3 Circles"

Add a Visual Effect

Continue by applying a box blur effect to the circles so that they appear slightly out of focus. The code is in Example 4. Add this code before the primaryStage.show() line.

circles.setEffect(new BoxBlur(10, 10, 3));

This code sets the blur radius to 10 pixels wide by 10 pixels high, and the blur iteration to 3, making it approximate a Gaussian blur. This blurring technique produces a smoothing effect on the edge of the circles, as shown in Figure 4.

Figure 4 Box Blur on Circles

Description of "Figure 4 Box Blur on Circles"

Create a Background Gradient

Now create a rectangle and fill it with a linear gradient, as shown in Example 5.

Add the code before the root.getChildren().add(circles) line so that the gradient rectangle appears behind the circles.

Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(),
     new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new 
         Stop[]{
            new Stop(0, Color.web("#f8bd55")),
            new Stop(0.14, Color.web("#c0fe56")),
            new Stop(0.28, Color.web("#5dfbc1")),
            new Stop(0.43, Color.web("#64c2f8")),
            new Stop(0.57, Color.web("#be4af7")),
            new Stop(0.71, Color.web("#ed5fc2")),
            new Stop(0.85, Color.web("#ef504c")),
            new Stop(1, Color.web("#f2660f")),}));
root.getChildren().add(colors);

This code creates a rectangle named colors. The rectangle is the same width and height as the scene and is filled with a linear gradient that starts in the lower left-hand corner (0, 1) and ends in the upper right-hand corner (1, 0). The value of true means the gradient is proportional to the rectangle, and NO_CYCLE indicates that the color cycle will not repeat. The Stop[] sequence indicates what the gradient color should be at a particular spot. The final line of code adds the colors rectangle to the root node.

The gray circles with the blurry edges now appear on top of a rainbow of colors, as shown in Figure 5.

Figure 5 Linear Gradient

Description of "Figure 5 Linear Gradient"

Figure 6 shows the intermediate scene graph. At this point, the circles group and colors rectangle are children of the root node.

Figure 6 Intermediate Scene Graph

Description of "Figure 6 Intermediate Scene Graph"

Apply a Blend Mode

Now add color to the circles and darken the scene by adding an overlay blend effect. This task requires a bit of housekeeping. You will remove the circles group and the linear gradient rectangle from the scene graph and add them to the new overlay blend group.

1. Remove the following two lines of code:

   root.getChildren().add(colors);

   root.getChildren().add(circles);

2. Add the code in Example 6 where you removed the two lines.

   Example 6 Blend Mode

   Group blendModeGroup = 
       new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(),
           Color.BLACK), circles), colors);
   colors.setBlendMode(BlendMode.OVERLAY);
   root.getChildren().add(blendModeGroup);
   

   The group blendModeGroup sets up the structure for the overlay blend. The group contains two children. The first child is a new (unnamed) Group containing a new (unnamed) black rectangle and the previously-created circles group. The second child is the previously-created colors rectangle.

   The setBlendMode() method applies the overlay blend to the colors Rectangle. The final line of code adds the blendModeGroup to the scene graph as a child of the root node, as depicted in Figure 2.

Overlay blends are common effects in graphic design applications. They can darken an image or add highlights or both, depending on the colors in the blend. In this case, the linear gradient rectangle is used as the overlay. The black rectangle serves to keep the background dark, while the nearly-transparent circles pick up colors from the gradient but are also darkened.

Figure 7 shows the results. You will see the full effect of the overlay blend when you animate the circles in the next step.

Figure 7 Overlay Blend

Description of "Figure 7 Overlay Blend"

Add Animation

The final step is to use JavaFX animations to move the circles:

1. If you haven't already, add import static java.lang.Math.random; to the list of import statements.

2. Add the animation code in Example 7 before the primaryStage.show() line.

   Example 7 Animation

   Timeline timeline = new Timeline();
   for (Node circle: circles.getChildren()) {
       timeline.getKeyFrames().addAll(
           new KeyFrame(Duration.ZERO, // set start position at 0
               new KeyValue(circle.translateXProperty(), random() * 800),
               new KeyValue(circle.translateYProperty(), random() * 600)
           ),
           new KeyFrame(new Duration(40000), // set end position at 40s
               new KeyValue(circle.translateXProperty(), random() * 800),
               new KeyValue(circle.translateYProperty(), random() * 600)
           )
       );
   }
   // play 40s of animation
   timeline.play();
   

   Animation is driven by a timeline, so this code creates a timeline, then uses a for loop to add two key frames to each of the 30 circles. The first key frame at 0 seconds uses the translateXProperty and translateYProperty properties to set a random position within the window. The second key frame at 40 seconds does the same. Thus, when the timeline is played, it animates all circles from one random position to another over a period of 40 seconds.

Figure 8 shows the 30 colorful circles in motion, which completes the application. For the complete source code, see the ColorfulCircles.java file.

Figure 8 Animated Circles

Description of "Figure 8 Animated Circles"

Deploy the Application

When you run your application in NetBeans IDE or use the Clean and Build command, your application is packaged for all types of JavaFX deployment, using options that are set as project properties. Go to the dist directory of your ColorfulCircles project directory and double-click each of the following three files:

• ColorfulCircles.jar runs your application in standalone mode.

• ColorfulCircles.jnlp runs your application in Web Start mode.

• ColorfulCircles.html opens a web page containing a Web Start link and also runs the application in the browser.

For more information about deployment, see Deploying JavaFX Applications.

Where to Go from Here

Now that you are familiar with JavaFX, here are several suggestions on what to do next:

• Try out the JavaFX samples, which you can download from http://www.oracle.com/technetwork/java/javafx/downloads/index.htm. Especially take a look at the Ensemble application, which provides best practices for creating JavaFX applications.

• Read the JavaFX documentation at http://docs.oracle.com/javafx/. You'll find documents on everything covered in this tutorial, including details on the scene graph, visual effects, and animation.