JavaUsing NetBeans to Develop a JavaFX Desktop Application

Using NetBeans to Develop a JavaFX Desktop Application

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

In the spring of 2007, Sun released a new framework named JavaFX. The main component of JavaFX is JavaFX Script, which is a declarative scripting language that mixes the best capabilities of the Java platform with classes designed for implementing media functionalities in an easier manner. Now, you can develop GUIs, animations, audio/video players, and cool effects for text and graphics, as well as access web services for the desktop, browser, and mobile platforms with only a few straightforward lines of code. In addition, you can wrap Java and HTML code into JavaFX Script.

In December 2008, Sun unveiled the release of JavaFX 1.0, a new platform that merges form and functionality for building rich Internet applications (RIA) with immersive media and content for web browsers and desktops. Looking forward, the newer NetBeans release contains support for JavaFX 1.0 under the NetBeans IDE 6.5 for JavaFX 1.0 name.

This article explains how to use this NetBeans release to develop a JavaFX Script desktop application.

Download and Install NetBeans 6.5 for JavaFX 1.0

This section presents the prerequisites for following the remainder of the article. You should be in one of the following scenarios:

  • You have a previous NetBeans version and you want the JavaFX plug-in. Use this guide to get the plug-in.
  • You want to download NetBeans 6.5 and JavaFX 1.0 as a bundle. Download it from the NetBeans site and just follow the setup instructions.

For system requirements, check the JavaFX spec page.

A Brief Presentation of the Application

In the following sections, you’ll develop five JavaFX classes (*.fx) that will develop a desktop application named DeltaCars. Basically, the application will mimic a commercial for a company that rents cars. The potential clients can see a video presentation of the company, available cars, prices, contacts, and so on. In principle, four of the five classes will represent individual graphical components and the last class will represent the main class of the application (see Figure 1). This main class will be the application stage. Every class will wrap the graphical capabilities of the represented component, such as transparency, events listeners, translations, interactions, effects, audio/video components, etc.


Now that you have a keyframe animation, it is time to define the graphical components for the DeltaTitleRect.fx class. Both types of components can be added from the Basic Shapes Palette by dragging two Rectangle items and two Text items inside the Group content. After dropping them inside the default Group, you should adjust them to conform to the code in Listing 1 (to add Scale and Translate nodes, use the Transformations Palette).


Creating the DeltaCarLogo.fx Class

Like any serious company, Delta Automotive needs a logo. Their logo features a car image named logoCar.bmp, which is stored in the deltacars/img folder (you can find this image in the source code download for this article). The image will be displayed in the upper-left corner of the Scene through a fade transition. The javafx.animation.transition package contains JavaFX’s transition functionality, which includes path, parallel, rotate, scale, fade, and other transitions.

Before applying the fade transition, you need to define the ImageView node for logoCar.bmp. For this, expand the Basic Shapes Palette and drag-and-drop the Image icon right below the create function definition. In the generated code, modify the URL to {__DIR__}img/logoCar.bmp and then place this code under a JavaFX variable as follows:

var logoCar = ImageView {
image: Image {
url: “{__DIR__}img/logoCar.bmp”
}
}
It is time to implement the fade transition (i.e., create a fade effect animation that spans the duration of the effect). Do this by updating the opacity variable of the node at regular intervals. Unfortunately, NetBeans Palette doesn’t offer a set of transitions, so you have to insert one manually, like this:
FadeTransition {
duration: 20s node: logoCar
fromValue: 0.0 toValue: 1.0
repeatCount:1 autoReverse: true
}.play();
Finally, you add the logoCar Node in the default Group content. The final code of DeltaCarLogo.fx should be:
package deltacars;

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.animation.transition.FadeTransition;

// place your code here
public class DeltaCarLogo extends CustomNode {

public override function create(): Node {

var logoCar = ImageView {
image: Image {
url: “{__DIR__}img/logoCar.bmp”
}
}

FadeTransition {
duration: 20s node: logoCar
fromValue: 0.0 toValue: 1.0
repeatCount:1 autoReverse: true
}.play();

return Group {
content: [logoCar]
};
}
}



Creating the DeltaMenu.fx Class

As you can see from Figure 6, the DeltaMenu.fx class should provide a nice menu for your application. It’s a little hard to explain its design in words, but the main idea is to display a menu made up of:

  • A set of six white rectangles using the fade transition (this time implemented for an array of Nodes)
  • A set of six Text nodes over these rectangles
  • A set of six “wheel” images, which use the path transition with a random cubic curve (the “wheel” image is named wheel.png and is stored in deltacars/img folder—see Figure 6.)


In addition, when the cursor touches the rectangle, the corresponding “wheel” rotates 180 degrees once using a rotate transition.

Start by creating the DeltaMenu.fx class and then declaring the following set of variables:

var rectArray : Rectangle[];           //an array of Rectangle
var wheelArray : ImageView[]; //an array of ImageView
var pathArray : Path[]; //an array of Path
var tranArray : PathTransition[]; //an array of PathTransition
var ycoord=[180,220,260,300,340,380]; //an array of Integer

Next, add an array of six Rectangle nodes and implement mouse-click and mouse-enter events for every Rectangle. While you can add Rectangle nodes from the Basic Shapes Palette, you can add the mouse events from the Actions Palette using drag-and-drop. Encapsulating everything in a for statement, you should get something like this:


for (i in [0..5]) {
insert Rectangle {
x: 10,
y: bind ycoord[i] – 10,
width: 140,
height: 20,
arcWidth: 10,
arcHeight: 10
fill: Color.WHITE

//on mouse clicked
onMouseClicked: function( e: MouseEvent ):Void {
println(“Clicked on: {wheelArray[i]} “);
}

//on mouse enter
onMouseEntered: function( e: MouseEvent ):Void {

var rotTransition = RotateTransition {
duration: 1s
node: wheelArray[i]
byAngle: 180
repeatCount:1
autoReverse: false
}
rotTransition.play();
}
} into rectArray;
}

Next, add a fade transition for the above Rectangle array. You can insert one manually, like this:

for (i in [0..5]) {
var fadTransition = FadeTransition {
duration: 10s fromValue: 0.3 toValue: 1.0 node: rectArray[i]
repeatCount:1 autoReverse: true
}
fadTransition.play();
}
Now, define the wheelArray array elements. This array contains six ImageView nodes, as follows (use the Basic Shapes Palette to insert the ImageView node):

for (i in [0..5]) {
insert ImageView {
image: Image {
url: “{__DIR__}img/wheel.png”
}
} into wheelArray;
}
Next, you have to define six Paths and store them in the pathArray array. Unfortunately, you can’t add a Path through the Palette, so you have to insert them manually. After that, manually define six PathTransition elements (one for every Path) and “play” them:

for (i in [0..5]) {
insert Path {
elements: [
MoveTo {
x: 700
y: rnd.nextInt( 450 ) },
CubicCurveTo {
controlX1: rnd.nextInt( 500 )
controlY1: rnd.nextInt( 500 )
controlX2: rnd.nextInt( 500 )
controlY2: rnd.nextInt( 500 )
x: 40
y: bind ycoord[i]
}
]
} into pathArray;
}

for (i in [0..5]) {
insert PathTransition {
duration: 20s
node: wheelArray[i]
path: AnimationPath.createFromPath(pathArray[i])
orientation: OrientationType.ORTHOGONAL_TO_TANGENT
repeatCount:1
autoReverse: false
} into tranArray;
}

for (trans in tranArray) {
trans.play();
}


Finally, populate the default Group with the defined rectangles and “wheels,” and add some text over the rectangles. Assembling everything and adding the corresponding imports, you should have the DeltaMenu.fx class in Listing 2.

Creating the DeltaAudioVideoPlayers.fx Class

You will complete the application by adding an audio/video player, as shown in Figure 7.

Add Created Nodes to Main.fx

The DeltaCars application is ready! However, nothing happens when you run it because the application nodes, DeltaTitleRect.fx, DeltaMenu.fx, DeltaCarLogo.fx, and DeltaAudioVideoPlayers.fx were not added to the Scene content. Therefore, the final version of Main.fx will look like this (notice how the MediaComponent is embedded in the scene):

package deltacars;
 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;
import com.sun.fxmediacomponent.*;
import javafx.scene.Group;
 
Stage {
    title: "Delta Cars"
    width: 712
    height: 442
    resizable: false   
    
    scene: Scene {
        fill:Color.BLACK
        stylesheets: [
            MediaComponent.css_skins
        ]
        
        content: [ DeltaAudioVideoPlayers.mediaBox,DeltaMenu{},
                   DeltaTitleRect{},DeltaCarLogo{}, DeltaAudioVideoPlayers{}]
    }
}

Running the DeltaCars Application

There is no trick to running the DeltaCars application: just select the Run Main Project option from the Run main menu. The project will compile and you should see an explosion of effects, transitions, fades, and so on. When everything is settled, the application will look like Figure 1.

As you have seen, NetBeans 6.5 for JavaFX 1.0 is an elegant method for developing JavaFX projects. In this article you learned how to develop such a project using the NetBeans support and various JavaFX classes.

Code Download

  • DeltaCars.zip
  • For Further Reading

  • The complete JavaFX 1.0 API Documentation (from Sun Developer Network)

  • About the Author

    Anghel Leonard is a senior Java developer with more than 12 years of experience in Java SE, Java EE, and the related frameworks. He has written and published dozens of articles about Java technologies and two books about XML and Java (one for beginners and one for experts).

    Get the Free Newsletter!

    Subscribe to Developer Insider for top news, trends & analysis

    Latest Posts

    Related Stories