Java Reference Guide

Hello, JavaFX

Last updated May 23, 2008.

With all of the hype surrounding JavaFX at JavaOne 2008, I thought it might be a good idea to get a sneak peek inside a JavaFX application and see how it ticks. And the good news is that you can download and install a JavaFX command line compiler and JVM and build desktop applications today — and those desktop applications will translate to web-based applications tomorrow.

Before I start, let's review what JavaFX is and its target audience. JavaFX attempts to simplify the creation of Rich Internet Applications (RIAs) that will not only run in a Web browser, but also run on the desktop or even on a mobile device. The language itself is a greatly simplified version of Java that will appeal to non-programmers wanting to build RIAs, but your background in Java will give you a huge advantage in putting together JavaFX applications. The reason is that all of the concepts are the same, such as Layout Managers (BorderLayout, FlowLayout, etc.) as well as the user interface elements (such as JTable, JTextField, and JTree). If you can build a Swing application then you can build a JavaFX application, only faster! And while JavaFX is considered a scripting language, if you're already a Java developer (and understand Swing) then it is really just a more efficient way to create objects and define their property values.

The first thing that we always do when exploring a new programming language is to create a "Hello, World!" application (thanks to the brilliance of Kernighan and Ritchie's classic book: C Programming Language), which is a self-contained program that says "Hello" to the world. But instead of starting by building a "Hello, World!" application in JavaFX, I would first like to build the "Hello, World!" application in Java, next build it in JavaFX, and then contrast the two implementations so that you can get an appreciation for all the JavaFX provides for us.

Listing 1 shows the source code for the Swing version of the "Hello, World!" application, followed by a screenshot of the HelloWorld class in action in figure 1.

Listing 1. HelloWorld.java

package com.informit.helloworld;

import java.awt.*;
import javax.swing.*;

public class HelloWorld extends JFrame {

 private JLabel helloMessage = new JLabel( "Hello, Swing!", JLabel.CENTER );

 public HelloWorld() {
  super( "Hello, World!" );
  this.getContentPane().add( helloMessage, BorderLayout.CENTER );
  this.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
  this.setSize( 400, 400 );
  this.setVisible( true );
 }

 public static void main( String[] args ) {
  HelloWorld hw = new HelloWorld();
 }
}

The HelloWorld class extends JFrame, which represents a standalone application frame. The class contains a single JLabel instance with the text: "Hello, Swing!" and is specifically configured to be centered.

The main() method is the Java Virtual Machine entry point for the application: the JVM loads the class into memory and executes its main() method. The main() method creates an instance of the HelloWorld class, which in turn creates the user interface. The constructor sets the title of the window to "Hello, World!" by passing the text to the JFrame class's constructor (invoking the super() method), which could also be accomplished by invoking the setTitle() method. The constructor then obtains a reference to the JFrame's content pane, which is the part of the frame that holds the actual user interface components, and then adds the "Hello, Swing!" label to it. The default layout manager for a JFrame is the BorderLayout, so we did not need to explicitly set it, but note that we specify that the label is added to the CENTER location of the BorderLayout.

Next we tell the JFrame to exit the application when the user closes the frame (typically by clicking on the "X" in the title bar to close the window.) If we don't do this then the JVM will not shut down after the frame has been closed. We then set the size of the window to 400 pixels by 400 pixels and finally make the frame visible.

Listing 2 shows the code for a JavaFX application that accomplishes the same thing, following by a screenshot in figure 2.

Listing 2. HelloWorldFX.fx

package com.informit.helloworld;

import javafx.ui.*;

Frame {
 title: "Hello, World!"
 width: 400
 height: 400
 visible: true
 content:
  BorderPanel {
   center:
    CenterPanel {
     content: 
      Label {
       text: "Hello, JavaFX!"
      }
    }
  }
}

Listing 2 is a little shorter than listing 1, but more importantly, it is extremely easy to understand. We still have a defined package so that we can organize our classes and instead of importing the AWT and Swing classes, we import the javafx.ui classes. The functional equivalent to a JFrame in JavaFX is a Frame, or more specifically a javafx.ui.Frame object. The curly braces delimit the body of the frame and its contents. Instead of calling various setter methods (such as setTitle() or setVisible()) we simply insert the attribute name followed by a colon followed by its value. So the title of the Frame is "Hello, World!", its width and height are 400 pixels each, and it is visible.

Because the javafx.ui.Frame class mimics the behavior of a JFrame, it has a content pane, which is accessible through its "content" attribute. In this case we set the content to a BorderPanel, which is a container that mimics the behavior of the BorderLayout layout manager. The BorderPanel defines five locations in the window that can each contain a single component (or another component that contains multiple components):

• center: this component is placed in the center of the BorderPanel and is resized to fill all available space (width and height). If there are no other components then the center position fills the entire window, otherwise it fills all space that is not occupied by other components
• top: this component is placed on the top of the panel. Its width occupies the entire width of the window, but its preferred height is observed (meaning that the component is stretched the entire width of the window, but its height will be whatever you intend it to be); this is equivalent to the BorderLayout's NORTH position
• bottom: this component exhibits the same characteristics as the top component, only, as its name implies, it is placed at the bottom of the window; this is equivalent to the BorderLayout's SOUTH position
• left: the component is placed on the left side of the window. Its height is stretched to fill all space between the top and bottom components and its preferred width is respected; this is equivalent to the BorderLayout's WEST position
• right: this component exhibits the same characteristics as the left component, only it is placed on the right position on the window; this is the equivalent to the BorderLayout's EAST position

The center of the Frame is filled by a CenterPanel. Centering the text in a label is a little different in JavaFX than in Java: rather than specify the alignment on the JLabel, the javafx.ui.Label is placed inside a CenterPanel, which handles the centering for it. The Label is then added to the content of the CenterPanel. And note that its text is defined through its text attribute.