James Weaver on Quantum Computing and Java

JavaFX Whack-a-Janssen Game for Devoxx :-)

This year I had to miss Devoxx 2008, but really wanted to go. Not only is it a great conference, but this year it is the first major conference since the JavaFX SDK 1.0 was released, so there are some great JavaFX sessions and speakers on the agenda.

 

So, in honor of the Devoxx conference and the excellent leadership that Stephan Janssen provides to it, I've created a game in JavaFX.  I'm not a game programmer nor am I a graphic designer, and I didn't enlist the help of either for this quick effort.  With those disclaimers, and the hope that Stephan Janssen will take this in good-natured fun, I give you: "Whack-A-Janssen", styled loosely after the old "Whac-a-Mole" game.

Click on the Launch icon to run it as a Java Web Start application.  To play the game, simply click the Start Game button and then click on Stephan's faces when they pop up.  While the game is in progress the Start Game button changes to Stop Game.  If all three faces appear, the game is over and the Start Game button reappears.

The Code Behind the Game

This game makes use of the transition convenience classes in the javafx.animation.transition package to achieve animated movement, scaling and fading.  It also uses the Timeline and KeyFrame classes in the javafx.animation package to popup the many faces of Stephen:

/*
 * WhackAJanssen.fx
 *
 * Developed 2008 by James L. Weaver (jim.weaver at javafxpert.com)
 * to demonstrate creating applications using JavaFX SDK 1.0, and for
 * having some good-natured fun with Stephan Janssen of Devoxx.
 */

package javafxpert;

import javafx.animation.*;
import javafx.animation.transition.*;
import javafx.ext.swing.*;
import javafx.scene.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.scene.transform.*;
import javafx.stage.Stage;
import java.lang.Math;

Stage {
  // Transitions for popups
  var popupRefs:Transition[] = [
    ScaleTransition {
      node: bind stephen1Ref
      duration: 1s
      fromX: 0.1
      fromY: 0.1
      toX: 1.0
      toY: 1.0
    },
    TranslateTransition {
      node: bind stephen2Ref
      duration: 1s
      fromY: 0
      byY: -70
      //autoReverse: true
    },
    FadeTransition {
      node: bind stephen3Ref
      duration: 1s
      fromValue: 0.0
      toValue: 1.0
      //autoReverse: true
   }
  ];
  // Transitions for knock-downs
  var knockdownRefs:Transition[] = [
    ScaleTransition {
      node: bind stephen1Ref
      duration: 500ms
      fromX: 1.0
      fromY: 1.0
      toX: 0.1
      toY: 0.1
    },
    TranslateTransition {
      node: bind stephen2Ref
      duration: 500ms
      fromY: -70
      byY: 70
      //autoReverse: true
    },
    FadeTransition {
      node: bind stephen3Ref
      duration: 500ms
      fromValue: 1.0
      toValue: 0.0
      //autoReverse: true
   }
  ];
  var stephen1Ref:ImageView;
  var stephen2Ref:ImageView;
  var stephen3Ref:ImageView;
  // Timeline that causes random Stephens to popup
  var gameTimeline = Timeline {
    keyFrames: [
      KeyFrame {
        time: 2s
        action: function():Void {
          var stephenNum:Integer =
            (Math.random() * sizeof stephensDown) as Integer;
          if (stephensDown[stephenNum]) {
            stephensDown[stephenNum] = false;
            popupRefs[stephenNum].playFromStart();
          }
        }
      }
    ]
    repeatCount: Timeline.INDEFINITE
  }
  // Position that the stephens are in. The trigger evaluates whether
  // the game is over and stops the game Timeline
  var stephensDown:Boolean[] = [true, true, true] on replace {
    var downs = for (stephen in stephensDown where stephen == true) stephen;
    if (sizeof downs == 0) {
      gameTimeline.stop();
    }
  };
  title: "Whack-A-Janssen"
  scene: Scene {
    var btn:SwingButton;
    width: 300
    height: 350
    fill: Color.#010101
    content: [
      ImageView {
        transforms: Translate.translate(24, 56)
        image: Image {
          url: "{__DIR__}images/devoxx250.jpg"
        }
      },
      // Left-most face
      stephen1Ref = ImageView {
        transforms: [
          Translate.translate(63, 99),
        ]
        opacity: 1.0
        image: Image {
          url: "{__DIR__}images/sj_face_small.gif"
        }
        cursor: Cursor.HAND
        onMouseClicked: function(me:MouseEvent):Void {
          stephensDown[0] = true;
          knockdownRefs[0].playFromStart();
        }
      },
      // Middle face
      Group {
        transforms: Translate.translate(120, 20)
        content: [
          Group {
            content: [
              stephen2Ref = ImageView {
                transforms: Translate.translate(0, 90)
                image: Image {
                  url: "{__DIR__}images/sj_head_small.gif"
                }
              },
            ]
            clip: Group {
              content: [
                Polygon {
                  points: [
                   0, 0,
                   0, 46
                   15, 80
                   51, 80,
                   66, 46,
                   66, 0
                  ]
                },
                Arc {
                  centerX: 33
                  centerY: 80
                  startAngle: 180
                  length: 180
                  radiusX: 18
                  radiusY: 10
                }
              ]
            }
          },
          Rectangle {
            width: 66
            height: 98
            fill: Color.TRANSPARENT
            cursor: Cursor.HAND
            onMouseClicked: function(me:MouseEvent):Void {
              stephensDown[1] = true;
              knockdownRefs[1].playFromStart();
            }
          }
        ]
      },
      // Right-most face
      stephen3Ref = ImageView {
        transforms: Translate.translate(190, 95)
        image: Image {
          url: "{__DIR__}images/sj_left_facing.gif"
        }
        opacity: 0.0
        effect: Glow {}
        cursor: Cursor.HAND
        onMouseClicked: function(me:MouseEvent):Void {
          stephensDown[2] = true;
          knockdownRefs[2].playFromStart();
        }
      },
      // Start Game button
      btn = SwingButton {
        transforms: [
          Translate.translate(200, 207),
          Scale.scale(0.7, 0.7),
          Rotate { angle: -4}
        ]
        text: bind if (gameTimeline.running) "Stop Game" else "Start Game"
        foreground: bind if (gameTimeline.running) Color.BLACK else Color.RED
        font: Font {
          name: "Arial Bold"
        }
        action: function():Void {
          if (not gameTimeline.running) {
            stephensDown[0] = true;
            stephensDown[1] = true;
            stephensDown[2] = true;
            knockdownRefs[0].playFromStart();
            knockdownRefs[1].playFromStart();
            knockdownRefs[2].playFromStart();
            gameTimeline.playFromStart();
          }
          else {
            gameTimeline.stop();
          }
        }
      }
    ]
  }
}

Enjoy the conference if you're attending, and this very simple and lame Whack-A-Janssen game!

Regards,

Jim Weaver
JavaFXpert.com

Part Deux of Building a Calculator with the Shiny New JavaFX SDK 1.0

In the first post of this Simple Calculator App series, we took some baby steps toward creating a simple calculator.  We're using the comp, shown below, that graphics designer Mark Dingman of Malden Labs supplied:

For teaching purposes, I'm taking a very incremental and sometimes indirect approach to building this.  For example, in the first post I used the SwingButton class for the calculator keys.  In this post, we'll use a Group that consists of a Rectangle and Text object to create each key.  Also, we'll use a for expression to succinctly create the keys -- a technique that has another benefit related to event handling that you'll see in a moment.  And remember, the calculator in its current state simply displays the keys typed rather than performing any calculations.  We'll create that code when showing you how to define classes, functions, etc. in JavaFX.

Click on the calculator image above to invoke the Simple Calculator JavaFX applet, or the Java Web Start icon below to make the application appear in its own window:

Understanding the Code Behind this JavaFX Applet

Take a look at the code below, and note what has changed since its first incarnation.

/*
 * SimpleCalc2.fx
 *
 * Developed 2008 by James L. Weaver (jim.weaver at javafxpert.com)
 * to demonstrate creating applications using JavaFX SDK 1.0
 */
package javafxpert;

import javafx.ext.swing.*;
import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.scene.transform.*;

/**
 * The "stage" for the application
 */
Stage {
  // The model
  var displayStr:String;
  var keyLabels = ["7", "8", "9", "+",
           "4", "5", "6", "-",
           "1", "2", "3", "x",
           "0", ".", "=", "/"];

  title: "Calculator 2"
  scene: Scene {
    // The gradient on the calculator keys
    var btnGradient = LinearGradient {
      startX: 0.0, startY: 0.0,
      endX: 0.0, endY: 1.0
      stops: [
        Stop {
          offset: 0.0
          color: Color.#a6a6a8
        },
        Stop {
          offset: 1.0
          color: Color.#7a7a7a
        }
      ]
    };
    content: [
      // The rounded rectangle behind the entire calculator
      Rectangle {
        width: 278
        height: 401
        arcWidth: 16
        arcHeight: 16
        fill: LinearGradient {
          startX: 0.0, startY: 0.0,
          endX: 0.5, endY: 1.0
          stops: [
            Stop {
              offset: 0.0
              color: Color.#77747b
            },
            Stop {
              offset: 1.0
              color: Color.#020202
            }
          ]
        },
      },
      VBox {
        transforms: bind Translate.translate(20, 20)
        spacing: 27
        content: [
          // The calculator's display
          TextBox {
            text: bind displayStr
            width: 238
            height: 65
            editable: false
            style: bind "text-fill: #343434; "
                  "background-fill: #f4f4f4; "
                  "font: 28pt Dialog; "
                  "font-weight: bold; "
          },
          // The calculator's keys
          VBox {
            spacing: 2
            content: for (row in [0..3]) {
              HBox {
                spacing: 2
                content: for (column in [0..3]) {
                  Group {
                    var rectRef:Rectangle;
                    var textRef:Text;
                    content: [
                      rectRef = Rectangle {
                        width: 58
                        height: 50
                        fill: btnGradient
                      },
                      textRef = Text {
                        transforms: bind
                          Translate.translate((rectRef.layoutBounds.width -
                                     textRef.layoutBounds.width) / 2,
                                     (rectRef.layoutBounds.height -
                                     textRef.layoutBounds.height) / 2)
                        content: keyLabels[row * 4 + column]
                        textOrigin: TextOrigin.TOP
                        fill: Color.#dedede
                        font: Font {
                          name: "Arial Bold"
                          size: 30
                        }
                      }
                    ]
                    onMouseClicked: function(me:MouseEvent):Void {
                      displayStr = "{displayStr}{textRef.content}"
                    }
                  }
                }
              }
            }
          }
        ]
      }
    ]
  }
}

Notice the for expressions that creates an HBox for each row, and a Group for each calculator key in a row.  The value of a for expression is a sequence (think array) of objects.  More information on the for expression can be found in the JavaFX Language Reference (in development at this writing).

Another noteworthy item is the value of the transforms attribute in the Text object.  The Translate.translate function above causes the Text to be centered horizonally and vertically within the Rectangle.

One of the advantages of using the for expression is that only one event handler is required for all of the keys, rather than one for each key as in the previous Simple Calculator version.  In this case the onMouseClicked attribute is on the Group that contains the Rectangle and Text.

One more item of note is the use of the LinearGradient class to make the application begin looking more like the graphic comp shown above.  Consult the JavaFX API docs for more information on using this class.  By the way, the API documentation is available online as well as being in the JavaFX SDK.

Please leave a comment if you have any questions!  By the way, the third and final part of this series is now ready, written by Dean Iverson.

Regards,

Jim Weaver
JavaFXpert.com

JavaFX SDK 1.0 is Here! Let's Build an App Together!

The long awaited 1.0 release of the JavaFX SDK is available, so I'd like to help you get up to speed by building an application with you.  Some upcoming posts in this blog will continue what we've started today, and along the way we'll work closely with expert graphic designer Mark Dingman of Malden Labs.  First, you need to get the JavaFX SDK:

Obtaining JavaFX SDK 1.0

Everything that you'll need to get started is freely available at javafx.com, so please go there and download the JavaFX SDK 1.0, bundled with NetBeans 6.5.  You can download it without Netbeans, but there are a boatload of examples that you can easily build and run with Netbeans.

Overview of the API Packages

Included in the JavaFX SDK download is the API documentation.  Take a look at this documentation, and then I'd like to give you a brief tour of the more commonly used API packages and classes, especially the ones that we're likely to use in the application that we build together.

The javafx.stage package contains a class named Stage, which is the top level of the UI containment hierarchy for any JavaFX application, regardless of where it is deployed (e.g. desktop, browser, or mobile phone).

The javafx.scene package contains some classes that you'll use often:

• The Scene class is the second level of the UI containment hierarchy for JavaFX applications.  It in turn contains all of the UI elements contained in the application.  These elements are called graphical nodes, or simply nodes.
• The Node class is the base class of all of the graphical nodes in JavaFX.  As you'll see, UI elements such as text, images, media, shapes, and controls (such as text boxes and buttons) are all subclasses of Node.  Take a moment to look at the attributes and functions in the Node class to appreciate the capabilities provided to all of its subclasses, including bounds calculation and mouse and keyboard event handling.
• The CustomNode class enables you to create your own UI elements.  For some examples of creating custom nodes, see the JFX Custom Nodes category of this blog.  Please note that the JavaFX language syntax and API has changed somewhat since those examples were created, but they will serve as good reference for you.
• The Group class is a subclass of the Node class whose purpose includes grouping nodes together into a single coordinate space, and allowing transforms (such as rotate) to be applied to the whole group.  Also, attributes of the group that are changed (such as opacity) apply to all of the nodes contained within the group.

There are several packages that begin with javafx.scene that contain subclasses of Node of various types.  For example:

The javafx.scene.image package contains the Image and ImageView classes, which enables images to be displayed in the Scene.  The ImageView class is a subclass of Node.

The javafx.scene.shape package contains several classes for drawing shapes such as Circle, Rectangle, Line, Polygon and Arc.  The base class of the shapes, named Shape, contains an attribute named fill that enables you to specify a color or gradient with which to fill the shape.

The javafx.scene.text package contains the Text class for drawing text in the scene.  The Font class enables you to specify the font name and size of the text.

The javafx.scene.media package has classes that enable you to play media.  The MediaView class is a subclass of Node that displays the media.

Although it doesn't begin with javafx.scene, the javafx.ext.swing package contains UI controls (such as SwingButton and SwingSlider) that subclass Node.  Many of the Swing "components" are available in this package, and because these components are actually nodes, any of the transforms and other capabilities of Node are available with these classes.  Also, any Swing components that aren't in this package may be used in JavaFX by wrapping them with the wrap function of the SwingComponent class.

The javafx.scene.control package is the way that UI controls in JavaFX are headed.  In the JavaFX SDK 1.0 there is just one control -- the TextBox class, but future versions will have more.  Each UI control will have the ability to be skinned, and styled via CSS.

The javafx.scene.transform package enables you to transform nodes (scale, rotate, translate, shear, and affine).

The javafx.scene.input package contains classes such as MouseEvent and KeyEvent that provide information about these events from within an event handler function such as the Node class' onMouseClicked event.

The javafx.scene.layout package contains a couple of layout nodes named HBox and VBox, which enable you to arrange nodes horizontally or vertically, respectively.  The spacing attribute on these classes specifies the space between the nodes.  I fully expect more layout nodes to be available in future versions of the JavaFX SDK, and you can write your own (like the simple TableNode that I created in an earlier blog post).  Also, there is an initiative underway by Stephen Chin and Keith Combs (the co-conspirators behind the WidgetFX project) called JFXtras.  This initiative will create useful JavaFX classes, including layout classes, that will augment what is available in JavaFX releases.

The javafx.scene.effect and javafx.scene.effect.light packages contain easy to use effects such as Reflection, Glow, Shadow and Lighting.

The javafx.animation and javafx.animation.transition packages contain time-based interpolations typically used for animation, and convenience classes for common transitions, respectively.

The javafx.io.http, javafx.data.pull, and javafx.data.xml packages provide a way to communicate with servers via HTTP, JSON and XML from any JavaFX enabled device (e.g. desktop and mobile phones).

Take a look at the JavaFX API docs again in the light of the information above to get a deeper sense for how you can use its capabilities.  Now let's write some code!

The Humble Beginnings of our Application

I've chosen a simple calculator as a good project to facilitate learning the JavaFX SDK 1.0, and here is the comp from our graphic designer Mark Dingman:

We'll take some baby steps by by writing code that creates some of the basic UI for the calculator.  Subsequent posts in this Simple Calculator App series will build on this one.  Here's a screenshot of the first incarnation of our calculator application, missing a few essential keys.  Click on the Launch icon to run it as a Java Web Start application in its own window.

Note: Before looking at the code for the simple calculator below, please note that some techniques used in this program are for teaching purposes only, and would not be used in a "real" program.  For example, the matrix of SwingButton controls is begging for a "for" expression which will be covered in a future incarnation of this program.

/*
 * SimpleCalc.fx
 *
 * Developed 2008 by James L. Weaver (jim.weaver at javafxpert.com)
 * to demonstrate creating applications using JavaFX SDK 1.0
 * Please note that some techniques used in this program are for teaching
 * purposes only, and would not be used in a "real" program. For example,
 * the matrix of SwingButton controls is begging for a "for" expression
 * which will be covered in a future incarnation of this program.
 */
package javafxpert;

import javafx.ext.swing.SwingButton;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.TextBox;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;

/**
 * The "stage" for the application
 */
Stage {
  var displayStr:String;
  title: "Calculator"
  width: 125
  height: 165
  scene: Scene {
    fill: Color.BLUE
    content: [
      VBox {
        spacing: 5
        content: [
          TextBox {
            columns: 9
            text: bind displayStr
            editable: false
            style: "border-radius:20;"
          },
          VBox {
            content: [
              HBox {
                content: [
                  SwingButton {
                    text: "7"
                    action:
                      function():Void {
                        displayStr = "{displayStr}7";
                      }
                  },
                  SwingButton {
                    text: "8"
                    action:
                      function():Void {
                        displayStr = "{displayStr}8";
                      }
                  },
                  SwingButton {
                    text: "9"
                    action:
                      function():Void {
                        displayStr = "{displayStr}9";
                      }
                  },
                ]
              },
              HBox {
                content: [
                  SwingButton {
                    text: "4"
                    action:
                      function():Void {
                        displayStr = "{displayStr}4";
                      }
                  },
                  SwingButton {
                    text: "5"
                    action:
                      function():Void {
                        displayStr = "{displayStr}5";
                      }
                  },
                  SwingButton {
                    text: "6"
                    action:
                      function():Void {
                        displayStr = "{displayStr}6";
                      }
                  },
                ]
              },
              HBox {
                content: [
                  SwingButton {
                    text: "1"
                    action:
                      function():Void {
                        displayStr = "{displayStr}1";
                      }
                  },
                  SwingButton {
                    text: "2"
                    action:
                      function():Void {
                        displayStr = "{displayStr}2";
                      }
                  },
                  SwingButton {
                    text: "3"
                    action:
                      function():Void {
                        displayStr = "{displayStr}3";
                      }
                  },
                ]
              },
            ]
          }
        ]
      }
    ]
  }
}

Noteworthy Items in the Simple Calculator Program

The Overview of the API Packages section above should help you understand what is going on in the program.  There are a couple of concepts worth focusing on here:

• Binding the UI to the model.  For example, the var named displayStr is a variable to which the text variable of the TextBox control is bound.  When one of the buttons is clicked, the anonymous function assigned to the action attribute of the SwingButton is called, which changes the value of displayStr.  Because of the bind, the text value of the TextBox is immediately updated.
• Strings may contain expressions enclosed in curly braces, which, for example, is how string concatenation occurs in JavaFX Script.

Building the Simple Calculator Application

The JavaFX SDK 1.0 distribution provides for building JavaFX Script applications from the command line, or from the Netbeans 6.5 IDE.  I've been using the IDE approach lately because Netbeans generates the deployment code for you.  Go ahead and create a Netbeans project using the File->NewProject wizard, and cut/paste the code from this post into a file named SimpleCalc.fx in a package named javafxpert.  Then in the Project Properties dialog, shown below, choose the Run category and then an Application Execution Model (such as Run in Browser).  When you run the application, it will run using the chosen execution model. 

You can control the dimensions of a JavaFX applet running a browser by visiting the Application category/page in the dialog above.  In that page you can also make decisions like whether to allow the user to drag the applet out of the browser, and whether to generate Pack200 compressed files that contain your application.

By the way, if you do decide to use the command-line tools, javafxc behaves like javac and javafx behaves like java.  The command-line parameters are the same between JavaFX and their Java counterparts.

Hope I didn't throw too much at you today, but I wanted to give you a jump start in developing JavaFX applications.  Please leave a comment if you have any questions.

Have fun!
Jim Weaver
JavaFXpert.com

A Word from Josh Marinacci of Sun about JavaFX SDK 1.0 Linux and Solaris Support

According to Josh Marinacci, Linux and Solaris for JavaFX SDK 1.0 will be coming soon, but not in time for the JavaFX SDK 1.0 release.  In his blog post, Josh states:

"We are going to support Linux and Solaris. We love both operating systems. Many of us use Linux every day. And Solaris is our own operating system. So we are working on it. And don't mean that in a "yeah, we'll get to it eventually" kind of way. I mean we are actively working on it right now. We have it in our continuous build system. Every time we build for Windows and Mac we are building for Linux and Solaris. We are fixing bugs in it. We are adding new features and testing. We are working on it and want to ship it just as much as you want to download it."

As a side note, Weiqi Gao has provided instructions for using the JavaFX SDK 1.0 on Linux. It may not be completely ready for prime time on Linux, but at least we'll hopefully have the option of experimenting with it on Linux in the meantime.

Thanks Josh and Weiqi,
Jim Weaver
JavaFXpert.com