Over a million developers have joined DZone.

Setting the "Stage" for the JavaFX SDK

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

As I mentioned in the JavaFX SDK Packages are Taking Shape post, the JavaFX SDK will have a "node-centric" UI approach.  This approach will make it easier to create UIs that have an "iPhone look and feel" that users will increasingly expect.  The first step that the JavaFX team took in implementing this was to create a javafx.application package and put classes in it (e.g. a new version of the Frame class) that adopt this node-centric philosophy.

Today, in the JavaFX SDK Technology Preview branch, an attribute named stage was introduced into the Window class from which Frame and Dialog are derived, and it was also introduced into the Application class.  This stage attribute holds a reference to a Stage instance, which is also located in the javafx.application package.  According to the JavaFXdocs (shown below), the Stage class is the root area for all scene content, and it contains a sequence of one or more graphical Node instances.


Also shown in the JavaFXdoc screenshot above is a fill attribute so that you can control the background of the stage, and find out its current height and width.  The stage expands to the area of its container, so the stage contained within a Frame, for example, will expand to the size of the usable area of the frame (e.g. minus the title bar).

An Example of Using the Stage Class, and the HBox/VBox Layout Classes

In keeping with the node-centric approach, today's example uses classes from the javafx.scene.layout package, namely HBox and VBox.  I expect that we'll see more classes in this package soon, and these classes will be for the purpose of providing cross-platform layout management of graphical nodes.  These layout classes are graphical nodes, so the entire UI containment hierarchy will (as I understand it) evolve to a frame or applet that contains a stage, that in turn contains a hierarchy of graphical nodes.  My understanding is that components such as buttons and text fields will be "nodified" so that they can be used as nodes, a side benefit of which is having a more consistent API between graphical nodes and components.  Here's a screenshot of today's example, in which resizing the Frame causes the Stage to be resized, which in turn (because of the bind operators) causes the Rectangle instances contained in the HBox and VBox layout nodes to be resized:


Here's the code for this example:

* StageExample.fx -
* An example of using the new Stage class in JavaFX Script
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)

import javafx.application.*;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.geometry.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;

Frame {
var stageRef:Stage
var rows:Integer = 4;
var columns:Integer = 3;
title: "Example of Using the New Stage Class"
width: 350
height: 400
visible: true
stageRef = Stage {
fill: Color.WHITE
VBox {
spacing: bind stageRef.height / (rows) * .10
for (row in [1..rows])
HBox {
spacing: bind stageRef.width / (columns) * .10
for (column in [1..columns])
Group {
var rectRef:Rectangle
var textRef:Text
translateX: bind stageRef.width / (rows) * .10
translateY: bind stageRef.height / (columns) * .10
content: [
rectRef = Rectangle {
fill: Color.BLUE
stroke: Color.WHITE
width: bind stageRef.width / (columns) * .85
height: bind stageRef.height / (rows) * .85
textRef = Text {
content: "{row},{column}"
fill: Color.WHITE
textOrigin: TextOrigin.TOP
x: bind (rectRef.getWidth() / 2) - (textRef.getWidth() / 2)
y: bind (rectRef.getHeight() / 2) - (textRef.getHeight() / 2)
Font {
size: 24
style: FontStyle.BOLD


Running this Example

The JavaFX SDK Technology Preview branch of the compiler build may be downloaded here.  This branch is what will become the JavaFX SDK Preview Release.  After adding the openjfx-compiler-tp1/dist/bin directory to your PATH environment variable, and verifying that you have the Java Runtime Environment (JRE) 6 installed, use the following command at your operating system prompt to compile the program:

javafxc StageExample.fx

To run the program, use the following command:

javafx StageExample

Alternatively, you can take the easy way out and run this application via Java Web Start.  As mentioned in previous posts, installing Java SE 6 Update 10 will cause this application to deploy more quickly.  Also, keep in mind that JRE 6 is required regardless of your platform.  Regarding running this on a Mac, here's a tip that Ken Russell of Sun and Thom Theriault of MaldenLabs passed on to me after the Java Web Start link didn't successfully invoke the program:

  • Launch Applications > Utilitiies > Java > Java Preferences
  • Under Java Application Runtime Settings, drag Java SE 6 (64-bit) to the top of the box as shown below.
  • Save the configuration.


Have fun, and please post a comment if you have any questions!

Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}