About This Tutorial

1 Hello World, JavaFX Style

• Construct the Application
• Run the Application
• Where to Go Next

2 Creating a Form in JavaFX

• Create the Project
• Create a GridPane Layout
• Add Text, Labels, and Text Fields
• Add a Button and Text
• Add Code to Handle an Event
• Run the Application
• Where to Go from Here

3 Fancy Forms with JavaFX CSS

• Create the Project
• Create the CSS File
• Add a Background Image
• Style the Labels
• Style Text
• Style the Button
• Where to Go from Here

4 Using FXML to Create a User Interface

• Set Up the Project
• Load the FXML Source File
• Modify the Import Statements
• Create a GridPane Layout
• Add Text and Password Fields
• Add a Button and Text
• Add Code to Handle an Event
• Use a Scripting Language to Handle Events
• Style the Application with CSS
• Where to Go from Here

5 Animation and Visual Effects in JavaFX

• Set Up the Application
• Set Up the Project
• Add Graphics
• Add a Visual Effect
• Create a Background Gradient
• Apply a Blend Mode
• Add Animation
• Where to Go from Here

6 Deploying Your First JavaFX Application

• Deployment Modes
• Packaging the Application in NetBeans IDE
  • Sizing the Application Window
• Running the Application Outside NetBeans IDE
• Deploying the Packaged Files
• Other Ways to Package JavaFX Applications

Gail Chappell

Technical Writer, Oracle

Gail is part of the JavaFX documentation team and enjoys working on cutting-edge, innovative documentation.

Nancy Hildebrandt

Technical Writer, Oracle

Nancy is a technical writer in the JavaFX group. She has a background in content management systems, enterprise server-client software, and XML. She lives on 480 acres in the middle of nowhere with horses, a donkey, dogs, cats, and chickens, and stays connected by satellite.

Figure 5-1 Colorful Circles Application

Figure 5-2 Colorful Circles Scene Graph

Set Up the Application

Set up your JavaFX project in NetBeans IDE as follows:

1. From theFile menu, chooseNew Project.

2. In theJavaFX application category, chooseJavaFX Application. ClickNext.

3. Name the projectColorfulCircles and clickFinish.

4. Open theColorfulCircles.java file, copy the import statements, and paste them into the source file for 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 the Fix Imports command from the Source menu in NetBeans IDE. When there is a choice of import statements, choose the one that starts withjavafx.

Set Up the Project

Delete theColorfulCircles class from the source file that NetBeans IDE generated and replace it with the code inExample 5-1.

public class ColorfulCircles extends Application {     public static void main(String[] args) {        launch(args);    }        @Override    public void start(Stage primaryStage) {        Group root = new Group();        Scene scene = new Scene(root, 800, 600, Color.BLACK);        primaryStage.setScene(scene);        primaryStage.show();    }}

For the ColorfulCircles application, it is appropriate to use a group node as the root node for the scene. The size of the group is dictated by the size of the nodes within it. For most applications, however, you want the nodes to track the size of the scene and change when the stage is resized. In that case, you use a resizable layout node as the root, as described inCreating a Form in JavaFX.

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, then take a look at the code in theColorfulCircles.java file. At this point, the application is a simple black window.

Add Graphics

Next, create 30 circles by adding the code inExample 5-2 before theprimaryStage.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 namedcircles, then uses afor loop to add 30 circles to the group. Each circle has a radius of150, fill color ofwhite, and opacity level of5 percent, meaning it is mostly transparent.

To create a border around the circles, the code includes theStrokeType class. A stroke type ofOUTSIDE means the boundary of the circle is extended outside the interior by theStrokeWidth value, which is4. The color of the stroke iswhite, and the opacity level is16 percent, making it brighter than the color of the circles.

The final line adds thecircles group to the root node. This is a temporary structure. Later, you will modify this scene graph to match the one shown inFigure 5-2.

Figure 5-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 5-3 Circles

Description of "Figure 5-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 inExample 5-3. Add this code before theprimaryStage.show() line.

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

This code sets the blur radius to10 pixels wide by10 pixels high, and the blur iteration to3, making it approximate a Gaussian blur. This blurring technique produces a smoothing effect on the edge of the circles, as shown inFigure 5-4.

Figure 5-4 Box Blur on Circles

Description of "Figure 5-4 Box Blur on Circles"

Create a Background Gradient

Now, create a rectangle and fill it with a linear gradient, as shown inExample 5-4.

Add the code before theroot.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")),}));colors.widthProperty().bind(scene.widthProperty());colors.heightProperty().bind(scene.heightProperty());root.getChildren().add(colors);

This code creates a rectangle namedcolors. 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 oftrue means the gradient is proportional to the rectangle, andNO_CYCLE indicates that the color cycle will not repeat. TheStop[] sequence indicates what the gradient color should be at a particular spot.

The next two lines of code make the linear gradient adjust as the size of the scene changes by binding the width and height of the rectangle to the width and height of the scene. SeeUsing JavaFX Properties and Bindings for more information on binding.

The final line of code adds thecolors rectangle to the root node.

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

Figure 5-5 Linear Gradient

Description of "Figure 5-5 Linear Gradient"

Figure 5-6 shows the intermediate scene graph. At this point, thecircles group andcolors rectangle are children of the root node.

Figure 5-6 Intermediate Scene Graph

Description of "Figure 5-6 Intermediate Scene Graph"

Apply a Blend Mode

Next, add color to the circles and darken the scene by adding an overlay blend effect. You will remove thecircles group and the linear gradient rectangle from the scene graph and add them to the new overlay blend group.

1. Locate the following two lines of code:

   root.getChildren().add(colors);root.getChildren().add(circles);

2. Replace the two lines of code from Step1 with the code inExample 5-5.

   Example 5-5 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 groupblendModeGroup 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 createdcircles group. The second child is the previously createdcolors rectangle.

ThesetBlendMode() method applies the overlay blend to thecolors rectangle. The final line of code adds theblendModeGroup to the scene graph as a child of the root node, as depicted inFigure 5-2.

An overlay blend is a common effect in graphic design applications. Such a blend 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 5-7 shows the results. You will see the full effect of the overlay blend when you animate the circles in the next step.

Figure 5-7 Overlay Blend

Description of "Figure 5-7 Overlay Blend"

Add Animation

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

1. If you have not done so already, addimport static java.lang.Math.random; to the list of import statements.

2. Add the animation code inExample 5-6 before theprimaryStage.show() line.

   Example 5-6 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 animationtimeline.play();

Animation is driven by a timeline, so this code creates a timeline, then uses afor loop to add two key frames to each of the 30 circles. The first key frame at 0 seconds uses the propertiestranslateXProperty andtranslateYProperty to set a random position of the circles 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 5-8 shows the 30 colorful circles in motion, which completes the application. For the complete source code, see theColorfulCircles.java file.

Figure 5-8 Animated Circles

Description of "Figure 5-8 Animated Circles"

Where to Go from Here

Here are several suggestions about what to do next:

• Try deploying your application outside NetBeans IDE. SeeDeploying Your First JavaFX Application.

• Try the JavaFX samples, which you can download from the JDK Demos and Samples section of the Java SE Downloads page athttp://www.oracle.com/technetwork/java/javase/downloads/. Especially take a look at the Ensemble application, which provides sample code for animations and effects.

• ReadCreating Transitions and Timeline Animation in JavaFX. You will find more details on timeline animation as well as information on fade, path, parallel, and sequential transitions.

• SeeCreating Visual Effects in JavaFX for additional ways to enhance the look and design of your application, including reflection, lighting, and shadow effects.

• Try the JavaFX Scene Builder tool to create visually interesting applications. This tool provides a visual layout environment for designing the UI for JavaFX applications and generates FXML code. You can use the Properties panel or the Modify option of the menu bar to add effects to the UI elements. See theProperties Panel section orTable 3-3 in theMenu Bar section of theJavaFX Scene Builder User Guide for information.