Setting the "Stage" for the JavaFX SDK

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
  stage:
    stageRef = Stage {
      fill: Color.WHITE
      content:
        VBox {
          spacing: bind stageRef.height / (rows) * .10
          content:
            for (row in [1..rows]) 
              HBox {
                spacing: bind stageRef.width / (columns) * .10
                content: 
                  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:
                            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!
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Comments

[Jim Weaver]

coffeejolts,

>>I like how the sdk is shaping up. Are there any plans to make the javafx.ext.swing classes Nodes?

Yes, I believe that the plans are to "nodify" some of the Swing classes, which would most like be realized as making them subclasses of Node.

>Also, maybe I am just too used to Swing, but why not just use a Grid Panel and some buttons to achieve the same effect? What is the benefit to laying out everything the way you did it? I see what can be done, but not why it is better.

I believe that the plan is to create node-based versions of some of the layout managers, that both contain graphical nodes and *are* graphical nodes themselves. Like you, I hope that one of these new layout classes acts like a GridPanel. I also hope that there is are node-centric versions of BorderPanel and FlowPanel (to name a couple more).

[coffeejolts]

Jim,

I like how the sdk is shaping up. Are there any plans to make the javafx.ext.swing classes Nodes?

Also, maybe I am just too used to Swing, but why not just use a Grid Panel and some buttons to achieve the same effect? What is the benefit to laying out everything the way you did it? I see what can be done, but not why it is better.

[Thom Theriault]

The entire UI containment hierarchy will evolve to a frame or applet that contains a stage, that in turn contains a hierarchy of graphical nodes. Wow. Resizing?! That is awesome. Looks the the JavaFX team is putting the pedal to the metal.