Using NetBeans to Develop a JavaFX Desktop Application

Creating the DeltaTitleRect.fx Class

Starting with this section, you will develop the application's graphical components. Every node that represents a graphical component is a JavaFX file, and at this point you know how to create such a file. Per the previous example for creating the DeltaTitleRect.fx file, follow these steps (use this approach to create all the files of the DeltaCars application):

Right-click on the deltacars node and select the New -> Empty JavaFX File option (from the same contextual menu, you can choose to create a new JavaFX Class or a JavaFX Stage).

In the New Empty JavaFX File wizard, type DeltaTitleRect as the file name (don't type the .fx extension).

Press the Finish button.

Now the DeltaTitleRect.fx file is located under the deltacars node. Open DeltaTitleRect.fx in the editor, where you will transform it into a JavaFX Node. Because a graphical component is just an element in a scene graph, it has to extend the CustomNode class. You accomplish this task from the Applications Palette by dragging a CustomNode item on the editor surface under the comment "place your code here." You should see something like Figure 3.

The next step is implementing the graphical design of the DeltaTitleRect.fx class. This class should map some text (Text node) and two colored rectangles (Rectangle node). As you can see in Figure 4if you use a little imaginationbefore the Text is set in its final place, it is transformed with the scale and translate transformations.

To accomplish these transformations, you will use a keyframe animation. This kind of animation controls changes in properties such as scale, translate factor, or opacity over time by defining the property's values at key times and interpolating the values in between. To define a keyframe animation, you need to define the following objects:

Timeline: This object represents a list of key frames that are controlled through a start function (play) and a stop function (stop). In addition, the animation can be repeated using the repeatCount attribute.

KeyFrame: This object represents a set of end states of various object values at a certain time instant relative to the start of the animation. It uses these values along with interpolation specifications to calculate the in-between values relative to the previous frame.

KeyValue: This object represents a target, which is a reference to an object to animate, a value for the object to take on at the KeyFrame time, and an Interpolator. The supported interpolations types are:

Interpolator.LINEAR (The default): Uses simple linear interpolation.

Interpolator.EASEOUT: Starts changing the value slowly after the KeyFrame.

Interpolator.EASIN: Slows the rate of change as the KeyFrame is reached.

Interpolator.EASEBOTH: Smoothes the rate of change through the KeyFrame.

Now, that you know what a keyframe animation is, follow these steps to implement one in DeltaTitleRect.fx:

Expand the Animation Palette.

Drag a Timeline item right below the create function definition.

Drag a Values item right below the canSkip attribute of the Timeline.

Modify the generated code (the left side of Figure 5 ) to conform to the right side of Figure 5.

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:

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:

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.)

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:

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:

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.

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.

Thanks for your registration, follow us on our social networks to keep up-to-date