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

Comments

[James Weaver]

"Why you don't deploy your examples like applet? The JNLP version is good but if you want to show that in JavaFX you can do the same cool things like in Flash you must show deploy you examples like applet"

Farhan,

Check out part three of this series, newly created by Dean Iverson. It deploys that completed calculator as a Web Start application and a JavaFX applet:
http://javafxpert.com/weblog/2009/01/javafx-calculator.html

Thanks,
Jim Weaver

[James Weaver]

"Where is part tre what is the use of building something thar has no use, i'm new to programing so a bit more info would be great"

David,
Part three is ready now. Dean Iverson created an excellent concluding post to this series:
http://javafxpert.com/weblog/2009/01/javafx-calculator.html

Thanks,
Jim Weaver

[david Harris]

Where is part tre what is the use of building something thar has no use, i'm new to programing so a bit more info would be great

[James Weaver]

"Hi Jim, "Is FlashFX really ready for business use?", thanks for your reply. I´ve seen on the bug listed unresolved mpeg2 playback issues, and a statement saying the JavaFX 1.0 no longer runs all the video content as per the installed Windows Media player: this is what´s caused me some concern. I´m aiming to develop high-quality media applications that need excellent multi-threaded support to ensure smooth animation on multiple animation objects, and as a C++ engineer I´m not sure on the capabilities of Java or JavaFX. I´ve seen very slow response from JavaFX apps, another area I´m not sure about: performance. The Flicr image animation sample for example needs a background threat to continue animating the rotating images. As it is, when a user selects an image the background animation stutters. Are my expectations for Java and JavaFX on a standard say 1.6GHz PC with WinXP realistic? Many thanks, Robin"

Robin,

I'd say it's time to do quick a proof of concept to confirm/dispel your concerns. Please contact me using the about link in the right sidebar if you'd like my help.

Thanks,
Jim Weaver