DeckNode Example Converted to JavaFX SDK 1.0

Today, my email in-box contained a pleasant surprise.  Some time ago, Edgar Merino volunteered some simplifications to the code in the Graphical Menu Example post.  Today, a gracious reader named Jase Batchelor sent me code for the DeckNode example converted to JavaFX SDK 1.0, as well as for the Graphical Menu Example that it is dependent upon.  These example are part of a series of posts, based upon an earlier version of JavaFX, that I created to show you how to create custom UI elements in JavaFX.  Today's post is the beginning of a new series, located in the JFX Custom Nodes SDK 1.0 category of this blog, that contains the code from the former series converted to JavaFX SDK 1.0 syntax and APIs.

Today's example features a simple custom node, named DeckNode, that I developed as a way to store a set of Node instances and display one of these nodes at a time.  It is being used to augment the graphical menu example by showing the Node that pertains to a given menu button.  Note that the concept is very similar to the Java CardLayout, so I wouldn't be surprised to see a similar class appear in the javafx.scene.layout package at some point.  There is, by the way, a class with similar functionality in the open source JFXtras project.  Anyway, just for grins, I provided the ability to specify a fade-in duration for the node being displayed.  Here's a screenshot of the example application, with one of the nodes in the "deck" being displayed as the splash page: 

 

One of the goals of JavaFX is for graphics designers and developers to be able to work together effectively in creating great looking applications.  To demonstrate this, a graphics designer at Malden Labs created some graphical mock-ups for the fictitious CD application shown above.  Here's an example mocked-up page in the form of a graphic that is being displayed as a result of pressing the Play button:

If you would like to try today's example out, click the Java Web Start link below:

Here's the code for the DeckNode class, contained in a file named DeckNode.fx:

/*
 *  DeckNode.fx -
 *  A node that shows a deck of nodes one at a time.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at javafxpert.com)
 *  to demonstrate how to create custom nodes in JavaFX
 */

package com.javafxpert.custom_node;


import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;


/**
 *  A node that shows a deck of nodes one at a time.  When the
 *  visibleNodeId attribute is assigned a value, the Node whose
 *  id is the same as the name becomes visible.  Note that the
 *  the id attribute of each Node must be assigned a unique name.
 *  This class also has an attribute in which a fade-in duration
 *  may be specified.
 */
public class DeckNode extends CustomNode {
  /**
   * A sequence that contains the Node instances in this "deck"
   */
  public var content:Node[];

  /**
   * An optional node that will appear in the background of all nodes
   */
  public var backgroundNode:Node;

  /**
   * The id of the node that is to be visible
   */
  public var visibleNodeId:String on replace {
    var nodes = for (node in content where node.id == visibleNodeId) node;
    visibleNodeRef = if (sizeof nodes > 0) nodes[0] else null;
    deckTimeline.playFromStart();
  }

  /**
   * The amount of time to fade-in the new Node
   */
  public var fadeInDur:Duration = 100ms;

  /**
   * This attribute is interpolated by a Timeline, and the opacity
   * attribute of this DeckNode class is bound to it.  This helps
   * enable the fade-in effect.
   */
  var opa:Number;

  /**
   * Override the opacity attribute so that it can be bound to the
   * opa attribute that is interpolated by a Timeline
   */
  override var opacity = bind opa;

  /**
   * A Timeline to control the fade-in behavior
   */

   public var deckTimeline =
    Timeline {
      keyFrames: [
        KeyFrame {
          time: bind fadeInDur
          values: [
            opa => 1.0 tween Interpolator.LINEAR,
          ]
        }
      ]
    };

  /**
   * A reference to the Node in the Node instances that is visible
   */
  protected var visibleNodeRef:Node;

  /**
   * Create the Node
   */
  public override function create():Node {
    Group {
      content: bind [
        backgroundNode,
        visibleNodeRef
      ]
    };
  }
}

Shown below is the main script for this program, in a file named DeckNodeExampleMain.fx:

/*
 *  DeckNodeExampleMain.fx -
 *  An example of using the DeckNode custom node.  It also demonstrates
 *  the MenuNode and ButtonNode custom nodes
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to demonstrate how to create custom nodes in JavaFX
 */
package com.javafxpert.deck_node_example.ui;


import javafx.scene.Group;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import com.javafxpert.custom_node.*;

var deckRef: DeckNode;
var sceneRef: Scene;
var menuRef: MenuNode;

Stage {

  title: 'DeckNode Example'
  width: 500
  height: 400
  visible: true
  scene: sceneRef = Scene {
    fill: Color.BLACK
    content: [
      deckRef = DeckNode {
        fadeInDur: 700ms
        content: [
          Group {
            var vboxRef:VBox;
            var splashFont = Font.font("Sans serif", FontWeight.BOLD, 12)
            id: "Splash"
            content: [
              ImageView {
                image:
                  Image {
                    url: "{__DIR__}images/splashpage.png"
                  }
              },
              vboxRef = VBox {
                translateX: bind sceneRef.width - vboxRef.boundsInLocal.width - 20
                translateY: 215
                spacing: 1
                content: [
                  Text {
                    content: "A Fictitious Audio Application that Demonstrates"
                    fill: Color.WHITE
                    font: splashFont
                  },
                  Text {
                    content: "Creating JavaFX Custom Nodes"
                    fill: Color.WHITE
                    font: splashFont
                  },
                  Text {
                    content: "Application Developer: Jim Weaver"
                    fill: Color.WHITE
                    font: splashFont
                  },
                  Text {
                    content: "Graphics Design: Malden Labs"
                    fill: Color.WHITE
                    font: splashFont
                  },
                ]
              }
            ]
          },
          Group {
            id: "Play"
            content: [
              ImageView {
                image:
                  Image {
                    url: "{__DIR__}images/playlist.png"
                  }
              }
            ]
          },
          Group {
            id: "Burn"
            content: [
              ImageView {
                image:
                  Image {
                    url: "{__DIR__}images/burning.png"
                  }
              }
            ]
          },
          Group {
            id: "Config"
            content: [
              ImageView {
                image:
                  Image {
                    url: "{__DIR__}images/config.png"
                  }
              }
            ]
          },
          Group {
            id: "Help"
            content: [
              ImageView {
                image:
                  Image {
                    url: "{__DIR__}images/help.png"
                  }
              }
            ]
          }
        ]
      },
      menuRef = MenuNode {
        translateX: bind sceneRef.width / 2 - menuRef.boundsInLocal.width / 2
        translateY: bind sceneRef.height - (menuRef.boundsInLocal.height)
        buttons: [
          ButtonNode {
            title: "Play"
            imageURL: "{__DIR__}icons/play.png"
            action:
              function():Void {
                deckRef.visibleNodeId = "Play";
              }
          },
          ButtonNode {
            title: "Burn"
            imageURL: "{__DIR__}icons/burn.png"
            action:
              function():Void {
                deckRef.visibleNodeId = "Burn";
              }
          },
          ButtonNode {
            title: "Config"
            imageURL: "{__DIR__}icons/config.png"
            action:
              function():Void {
                deckRef.visibleNodeId = "Config";
              }
          },
          ButtonNode {
            title: "Help"
            imageURL: "{__DIR__}icons/help.png"
            action:
              function():Void {
                deckRef.visibleNodeId = "Help";
              }
          },
        ]
      }
    ]
  }
}
deckRef.visibleNodeId = "Splash";

Please notice the last line of the listing above is what causes the node that we named "Splash" to be displayed when the application starts. 

The code for the other custom nodes used in this program from the Graphical Menu Example post was converted by the gracious reader as well.  Here's ButtonNode.fx:

/*
 *  ButtonNode.fx -
 *  A node that functions as an image button
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at javafxpert.com)
 *  to demonstrate how to create custom nodes in JavaFX
 */

package com.javafxpert.custom_node;

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.input.MouseEvent;
import javafx.scene.effect.Glow;
import javafx.scene.shape.Rectangle;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;


public class ButtonNode extends CustomNode {
  /**
   * The title for this button
   */
  public var title:String;

  /**
   * The Image for this button
   */
  var btnImage:Image;

  /**
   * The URL of the image on the button
   */
  public var imageURL:String on replace {
    btnImage =
      Image {
        url: imageURL
      };
  }

  /**
   * The percent of the original image size to show when mouse isn't
   * rolling over it.
   * Note: The image will be its original size when it's being
   * rolled over.
   */
  public var scale:Number = 0.9;

  /**
   * The opacity of the button when not in a rollover state
   */
  public var opacityValue:Number = 0.8;

  /**
   * The opacity of the text when not in a rollover state
   */
  public var textOpacityValue:Number = 0.0;

  /**
   * A Timeline to control fading behavior when mouse enters or exits a button
   */
  public var fadeTimeline =
    Timeline {
      keyFrames: [
        KeyFrame {
          time: 500ms
          values: [
            scale => 1.0 tween Interpolator.LINEAR,
            opacityValue => 1.0 tween Interpolator.LINEAR,
            textOpacityValue => 1.0 tween Interpolator.LINEAR
          ]
        }
      ]
    };

  /**
   * This attribute is interpolated by a Timeline, and various
   * attributes are bound to it for fade-in behaviors
   */
  var fade:Number = 1.0;

  /**
   * This attribute represents the state of whether the mouse is inside
   * or outside the button, and is used to help compute opacity values
   * for fade-in and fade-out behavior.
   */
  var mouseInside:Boolean;

  /**
   * The action function attribute that is executed when the
   * the button is pressed
   */
  public var action:function():Void;

  /**
   * Create the Node
   */
  public override function create():Node {
    Group {
      var textRef:Text;
      content: [
        Rectangle {
          width: bind btnImage.width
          height: bind btnImage.height
          opacity: 0.0
        },
        ImageView {
          image: btnImage
          opacity: bind opacityValue;
          scaleX: bind scale;
          scaleY: bind scale;
          translateX: bind btnImage.width / 2 - btnImage.width * scale / 2
          translateY: bind btnImage.height - btnImage.height * scale
          onMouseEntered:
            function(me:MouseEvent):Void {
              mouseInside = true;
              fadeTimeline.rate = 1.0;
              fadeTimeline.play();
            }
          onMouseExited:
            function(me:MouseEvent):Void {
              mouseInside = false;
              fadeTimeline.rate = -1.0;
              fadeTimeline.play();
              me.node.effect = null
            }
          onMousePressed:
            function(me:MouseEvent):Void {
              me.node.effect = Glow {
                level: 0.9
              };
            }
          onMouseReleased:
            function(me:MouseEvent):Void {
              me.node.effect = null;
            }
          onMouseClicked:
            function(me:MouseEvent):Void {
              action();
            }
        },
        textRef = Text {
          translateX: bind btnImage.width / 2 - textRef.boundsInLocal.width / 2
          translateY: bind btnImage.height - textRef.boundsInLocal.height
          textOrigin: TextOrigin.TOP
          content: title
          fill: Color.WHITE
          opacity: bind textOpacityValue
          font:  Font.font("Sans serif", FontWeight.BOLD, 16)
        },
      ]
    };
  }
}

And here is the MenuNode.fx listing:

/*
 *  MenuNode.fx -
 *  A custom node that functions as a menu
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to demonstrate how to create custom nodes in JavaFX
 */

package com.javafxpert.custom_node;


import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.effect.Reflection;
import javafx.scene.layout.HBox;

public class MenuNode extends CustomNode {

  /*
   * A sequence containing the ButtonNode instances
   */
  public var buttons:ButtonNode[];

  /**
   * Create the Node
   */
  public override function create():Node {
    HBox {
      spacing: 10
      content: buttons
      effect:
        Reflection {
          fraction: 0.50
          topOpacity: 0.8
        }
    }
  }
}

As always, please leave a comment if you have any questions.

Regards,
Jim Weaver
JavaFXpert.com

Comments

[Damian]

Thanks James for the awesome example, i'm just start with javafx and i want to make an aplication like your example, i want to make to pres a button and display iage gallery second button animation, third button videoplayer but i don know how to do that do :| have you maby a tutorial or exapmle how to make it, i will be greatfull Thanks

[MedSabri]

Thanks James for this post,

I have a problem when i try to run your example
with a MigLayout component from the jfxtras project, i have the following error "java.lang.stackoverflowerror..."
do you have any idea why the deck node generate this error;

thanks a lot for your help.

[pitek71]

sorry James, forget my last post :(

[pitek71]

Thanks James for your great work !
Could you explain us the role of DeckNode::backgroundNode ?
I do not catch it and it is not used. In its definition, I don't see anything that ensure it will be placed and shown as the "background" ?

Thanks,

tibO.