April 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Using NetBeans to Develop a JavaFX Desktop Application, Page 3

  • July 1, 2009
  • By Anghel Leonard
  • Send Email »
  • More Articles »

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):
  1. In the Projects view, expand DeltaCars -> Source Packages and select the deltacars node.
  2. 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).
  3. In the New Empty JavaFX File wizard, type DeltaTitleRect as the file name (don't type the .fx extension).
  4. 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.



Click here for larger image

Figure 3: Creating a JavaFX Node

Next, replace the MyCustomNode class name with your name, DeltaTitleRect, and place the public keyword in front of the class (the public keyword is necessary to increase the class visibility).

Author's Note: All the JavaFX classes developed in the section to follow should extend the CustomNode class and should be declared public.

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.



Click here for larger image

Figure 4: Scale and Translate a Text Node

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:

  1. Expand the Animation Palette.
  2. Drag a Timeline item right below the create function definition.
  3. Drag a Values item right below the canSkip attribute of the Timeline.
  4. Modify the generated code (the left side of Figure 5 ) to conform to the right side of Figure 5.



    Click here for larger image

    Figure 5: Modifying a Generated Timeline

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



    Click here for larger image

    Figure 6: The DeltaMenu.fx Menu

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.





Page 3 of 5



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel