Jim has posted 66 posts at DZone. You can read more from them at their website. View Full User Profile

Playing with the JavaFX SDK as it's Being Built

06.09.2008
| 7620 views |
  • submit to reddit

As I mentioned in the JFX and the Way Forward After JavaOne 2008 post, Sun announced at JavaOne that a preview release of the JavaFX SDK is scheduled to be available in July 2008.  As a pleasant surprise over Memorial Day weekend, Sun opened up the development of this preview release SDK.  This development activity is occurring as a part of the OpenJFX Compiler project, so follow the instructions that I gave you in the Obtaining the OpenJFX Script Compiler Just Got Easier post and join the fun!  You'll be playing with the JavaFX SDK as it is being built, so expect changes.  It would also be great if you'd provide input to the process, and help test the SDK as it's being developed.

Write Your First JavaFX Program that Uses the New javafx.gui Classes

Take a look at the JavaFX Script API Documentation and you'll notice that there are two sets of UI-related packages.  The javafx.ui packages contains the older, prototype UI classes, and the javafx.gui packages contain the UI classes that will be in the JavaFX SDK.  The JavaFX code below uses these newer UI classes, and I'll show you how to compile and run this code in a bit.  When the application first starts up, an empty window appears with two buttons:

Blank

When you click the Hello button, the message "You say hello..." from the popular "Hello, Goodbye" Beatles song displays approximately in the center of the window:

Hello

When you click the Goodbye button, the message "and I say goodbye" appears in place of the former message:

Goodbye

Here's the JavaFX code that generated this user interface and functionality:

/*
* HelloGoodbye.fx -
* A "Hello World" style program that demonstrates
* declaratively expressing a user interface.
*/
package beatles;
import javafx.gui.*;

Frame {
var phrase:String
title: "Hello, Goodbye"
height: 300
width: 400
visible: true
content:
BorderPanel {
center:
Canvas {
content:
Text {
x: 50
y: 125
content: bind phrase
font:
Font {
size: 36
}
}
}
bottom:
FlowPanel {
content: [
Button {
text: "Hello"
action:
function():Void {
// The button was clicked
phrase = "You say hello...";
}
},
Button {
text: "Goodbye"
action:
function():Void {
phrase = "and I say goodbye";
}
}
]
}
}
}

 

Compiling and Running the Program

To compile this program, enter the following into the command line:

javafxc -d . HelloGoodbye.fx

As in Java, the -d option causes the CLASS files to be put into a directory corresponding to the package statement subordinate to the specified directory.  To run the program, use the following command:

javafx beatles.HelloGoodbye

Now that you've got access to the JavaFX SDK as it's being built, get involved by writing JavaFX programs that exercise its functionality, and subscribe to one or more of the following mailing lists from this page.

users@openjfx-compiler.dev.java.net

gui@openjfx-compiler.dev.java.net

dev@openjfx-compiler.dev.java.net

JavaFXpert BootCamp in Oslo, Norway, on June 18-20, 2008

If you happen to be in the vicinity of Oslo, Norway later this month, please come to the free JavaFX Script seminar sponsored by Bouvet on June 18, 2008.  I'll be teaching the seminar, followed by a two day JavaFXpert BootCamp.  Contact Bouvet for information on registering for the BootCamp. 

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

Published at DZone with permission of its author, Jim Weaver.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Walter Laan replied on Tue, 2008/06/10 - 3:21am

displays approximately in the center of the window

 

So I tried my first JavaFX today, and I guess you didn't use a Label because the horizontal/verticalTextPosition do not work yet ;).

Label {
horizontalTextPosition: HorizontalAlignment.CENTER
verticalTextPosition: VerticalAlignment.CENTER
text: bind phrase
font: Font { size: 36 }
}

The text is this left aligned (vertical default to center I assume). The static fields look a bit out of place for JavaFX, imo, I expected just 'center' to work.

Jim Weaver replied on Thu, 2008/06/12 - 12:51am

Can you please post your entire program?  The horizontalTextPosition and verticalTextPosition attributes of the Label class controls the text alignment within the Label, not the Label's alignment within the UI container in which it is located.  For example, if the Label's width is greater than the text placed in it, and you set the horizontalTextPosition attribute to HorizontalAlignment.CENTER, the text should be centered within the Label component.

Walter Laan replied on Thu, 2008/06/12 - 2:28am

My mistake, I thought the label would get centered in the border layout center. I checked by making a Swing version and horizontalAlignment: HorizontalAlignment.CENTER fixes it (both in JavaFX as the Swing version ;)).

The only thing different seems to be the font, with the Swing version a bit more bold (on WinXP). 

import java.awt.*;
import java.awt.event.ActionEvent;

import javax.swing.*;

public class TestJavaFX extends JFrame {
private JLabel label;

public TestJavaFX() {
setTitle("Hello, Goodbye");

label = new JLabel();
label.setFont(label.getFont().deriveFont(32f));
label.setHorizontalAlignment(JLabel.CENTER);
label.setHorizontalTextPosition(JLabel.CENTER);

JPanel buttons = new JPanel();
buttons.add(new JButton(new AbstractAction("Hello") {
public void actionPerformed(ActionEvent e) {
label.setText("You say hello");
}
}));
buttons.add(new JButton(new AbstractAction("Goodbye") {
public void actionPerformed(ActionEvent e) {
label.setText("and I say goodbye!");
}
}));

Container content = getContentPane();
content.setLayout(new BorderLayout());
content.add(label);
content.add(buttons, BorderLayout.PAGE_END);
}

public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
TestJavaFX frame = new TestJavaFX();
frame.setDefaultCloseOperation(EXIT_ON_CLOSE);
frame.setPreferredSize(new Dimension(400, 300));
frame.pack();
frame.setVisible(true);
}
});
}
}

 

Walter Laan replied on Thu, 2008/06/12 - 2:37am in response to: Walter Laan

BTW, does JavaFx binding uses BeansBinding (JSR296)? I read BeansBinding a bit in a rut atm*, so I guess not. If it did though the JavaFX effort would help Swing more directly and save some duplicated effort.

 *comments on http://www.pushing-pixels.org/?p=312 

Jim Weaver replied on Thu, 2008/06/12 - 10:54am in response to: Walter Laan

does JavaFx binding uses BeansBinding (JSR296)?

 

Not at the moment.  I'd like to see some sort of POJO binding in JavaFX, but for now it is necessary to wrap the Java object in the JavaFX object to keep them bound.  Of course, JavaFX has very sophisticated binding within itself.

 

 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.