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

[Account Deleted]

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.
4 week cna classes
http://www.bestcertifiednursingassistant.com/cna/attend-4-week-cna-classes-certification/

[sildenafil citrate]

Clockwise from upper left (readers, thanks for providing correct names!): kuih apam, kuih kosui, kueh lapis, kuih seri muka (a cake of glutinous rice cooked with coconut milk, topped with a pandan layer), onde onde (Dave's fave - steamed pandan flavored glutinous rice flour balls with a semi-liquid filling of palm sugar, rolled in grated coconut), a "sandwich" of pulut tai tai (coconut and glutinous rice flour cakes that traditionally get their blue hue from a dye obtained from dried bunga telang, or butterfly pea flowers) with a kaya (rich coconut and egg "jam") filling, a coconuty kueh with a wrinkly "burnt" topping of palm sugar, and kueh talam (a layer of rice and green pea flour flavored with pandan topped with a layer of rice flour and coconut cream).

This was not a typical weekend, but I think it's pretty obvious that I am no longer master of my sweet tooth. I may require detox.

[buy cialis]

There is a inescapable beauty and attraction to the sweet, bizarre music created by Lindsay Powell as Cake Bake Betty. This multi-instrumentalist originally from New Jersey, now resides in Chicago via Nashville and is part of the Infinity Cat collective, the micro-label created by Jake and Jamin Orrall, who also now live in Chicago and perform as JEFF. (Factoid: Jamin was the original drummer of Be Your Own Pet.) If we're lucky, the boys will be backing up Lindsay for her set at Subterranean this Saturday, when she peforms as a part of Bandwidth. More after the jump!!

Lindsay is currently working on recording the follow-up album to her 2006 release Songs About Teeth, which not only delivers what it promises "teeth songs", it is also filled with sad and delightful tracks about desperation, hope, spines, and cannibals. At the heart and soul of this album is Lindsay's piano playing and elegant voice (think Regina Spektor), which she is not afraid of pushing to the limits, but with the help of some friends on cello, violin, mandolin, and drums the captivating sound of Songs About Teeth is achieved. She is armed to the teeth with an arsenal of quirky pop songs chock full of imaginative lyrics that we surely make you smile and squirm.

[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).