18/06/2009 Introducing JavaFX: Sun's new family

Introducing JavaFX: Sun's new family

of Java-based products
Date: October 31st, 2007
Author: Peter Mikhalenko
Category: Java
Tags: Application, Operation, Sun Microsystems Inc., Window, Sun NetBeans, Value,
JavaFX, JavaFX Script, JavaFX Mobile, FlowPanel

JavaFX is a new family of products and technologies from Sun Microsystems that you can
use to create Rich Internet Applications (RIAs). JavaFX currently consists of JavaFX Script
and JavaFX Mobile; other JavaFX products are planned for release in the future.

JavaFX is anticipated to compete in the space already occupied by Adobe AIR and
Microsofts Silverlight technologies. In a nutshell, Adobe AIR enables Flex and DHTML
developers to build applications for the desktop; Silverlight allows developers to build rich
media applications that run in the browser; and JavaFX Script lets developers build rich UIs
for Java applications.

JavaFX products
JavaFX Mobile is a complete mobile operating and application environment built around
Java and Linux. JavaFX Script is a highly productive scripting language for content
developers to create rich media and content for deployment on Java technology. JavaFX
Script is the core of the JavaFX family, and its the most interesting part of the product set.
(Sun thinks that developers will shorten JavaFX Script to JavaFX in conversations, as long as
JavaFX Script is the core in the JavaFX product family.)

JavaFX Script is intended to simplify the creation of rich UIs for Java clients. JavaFX Script
is implemented in Java, and it uses Java APIs for 2D and 3D graphics as well as UI controls.
JavaFX Script supports a declarative syntax for UI definition that is somewhat similar to the
ones used by Microsoft in XAML and Adobe in MXML, yet its not XML-based. In fact, its a
real programming language not just a markup tool so you can write an entire application
in JavaFX Script.

If you want to write JavaFX applications directly from the IDE, the best way to do that is to
download and install JDK 6.1 with NetBeans 5.5.1 or 6.0 and then install the JavaFX Script
plug-in for NetBeans 5.5.1 or the JavaFX Script plug-in for NetBeans 6.0. There is also a
JavaFX plug-in for Eclipse.

There is a separate initiative called OpenJFX Compiler, which focuses on creating a JavaFX
compiler to translate JavaFX scripts directly into JVM class files (bytecode) without any
intermediate steps. It is still in the very early stages of design and implementation.

Hello World application

This is the typical Hello World application:

com.com/programming-and-devel 1/9
18/06/2009 Introducing JavaFX: Sun's new family
import javafx.ui.*;

Frame {
title: "Hello World JavaFX"
width: 300
height: 100
content: Box {
content:
[Label {
text: "Hello World"
toolTipText: "Tool tip"
font: Font {
size: 18
}
border: EmptyBorder {
top: 10
left: 10
}
background: Color {
blue: 255
green: 255
red: 255
}
}]
}

visible: true
}

View the code online.

In order to run this application in NetBeans 5.5, you need to follow these steps:

Launch NetBeans 5.5.

From the main menu, go to File | New Project.
In the New Project window, select the General category, select Java Application
project, and click Next.
In the New Java Application window, type FXExample in the Project Name text field.
In the same window, use the Browse button to select the location of the project.
Uncheck the Set As Main Project and Create Main Class check boxes and click Finish.
Right-click on the FXExample | Source Packages and select New -| File/Folder.
In the New File window, select the Other category, select the JavaFX File file type, and
click Next.
In the New JavaFX File window, type HelloWorld for the File Name, type src for
the Folder, and click Finish.
Copy the code from Listing 1 and paste it in HelloWorld.fx.
Right-click FXExample project and select Properties.
In the Project Properties - FXExample, select the Run node from the Categories pane.
In the Arguments text field, type Hello World and click OK.
Right-click FXExample project and select the Run Project option.

If everything works, you should see the Hello World application running (see Figure A).

Figure A

com.com/programming-and-devel 2/9
18/06/2009 Introducing JavaFX: Sun's new family

Now Ill go beyond this simple application and create a window with the text field, a couple of
buttons, and some behavior in response to button clicks. To do that, Ill need to add the
equivalent of ActionListeners to my buttons.

Since I need to add buttons, I will have multiple components in this frame. Traditional GUI
programming would have me set up layout managers to accomplish this. For this example, I
can get by with a simplistic layout: FlowLayout; in JavaFX Script, there are convenience
classes called xxPanel that help with this. For a FlowLayout, I have a FlowPanel. This is the
code of the new application, resulting in getting an application window similar to Figure B.
import javafx.ui.*;SSS

var win = Frame {

title: "Second JavaFX application"
width: 200
height: 100
content: FlowPanel { // note1
content: [
TextField {
editable: false
value: "Hello, Text"
width: 100
},
Button {
text: "a"
},
Button {
text: "b"
},
Button {
text: "Clear"
}, // note2
]
} // note1
visible: true // makes the frame show up.
};

View the code online.

All components of the FlowPanel are listed as an array of components, denoted by the [ and ]
symbols. Each component is separated by commas. Note that, the final component can have
a trailing comma, which is ignored (see Figure B).

Figure B

com.com/programming-and-devel 3/9
18/06/2009 Introducing JavaFX: Sun's new family

We want something to happen in response to button clicks, namely that they change the
value of the textfield. You must have the Java Console visible, or you must be running
JavaFX from the command line in order to see the System.out.println results. This is the
new version:
import javafx.ui.*;

import java.lang.System; // note1

var win = Frame {

title: " Second JavaFX application"

width: 200

height: 100

content: FlowPanel {

content: [

TextField {

editable: false

value: "Hello,
Text"

width: 100

},

Button {

text: "a"

action: operation() {

System.out.println("'a' clicked");

},

Button {

text: "b"

action: operation() {

System.out.println("'b' clicked");
com.com/programming-and-devel 4/9
18/06/2009 Introducing JavaFX: Sun's new family

},

Button {

text: "Clear"

action: operation() {

System.out.println("'clear' clicked");

},

visible: true // makes the frame show

up.

};

View the code online.

Its pretty straightforward to add an ActionListener simply define an operation() that does
what you want. However, what I want to do is change the text in the textfield, and I cant get
there just yet. (Also note the import statement tagged with note1 . almost every class must
be explicitly imported. There is no freebie import java.lang.* as there is when coding Java.)

In JavaFX, you are free to define new classes and assign them to variables, as I have been
doing for the frames Ive been creating in the previous examples.

There is also a very exciting feature named binding, which allows you to make the value of
some attributes dependent on others. For example, I can make the textFields text attribute
dependent upon a value that is easier for my buttons to access. This is the new version with
binding and data model added:
import javafx.ui.*;

import java.lang.System;

class TextValue {

attribute value: String;

operation clear(); // note1

operation TextValue.clear() { // note1

value = "";

com.com/programming-and-devel 5/9
18/06/2009 Introducing JavaFX: Sun's new family
}

var model = TextValue { // note2

value: "Hello, Model"

};

var win = Frame {

title: "Second JavaFX applications"

width: 200

height: 100

content: FlowPanel {

content: [

TextField {

editable: false

value: bind model.value //

note3

width: 100

},

Button {

text: "a"

action: operation() {

model.value =
model.value.concat("a");

// note4

},

Button {

text: "b"

action: operation() {

model.value =
model.value.concat("b");

// note4

com.com/programming-and-devel 6/9
18/06/2009 Introducing JavaFX: Sun's new family

},

Button {

text: "Clear"

action: operation() {

model.clear(); // note5

},

visible: true // makes the frame show

up.

};

View the code online.

There are three new entries at the top of the file: a class definition, a method definition, and a
variable declaration. The class definition defines the values present on an object (attributes)
and the methods (operations). The TextFields value attribute (tagged note3) is now a little
different. Rather than specifying its initial value as we declare the text field, I am telling it to
use the value of model.value.

Since I am using the bind keyword, I am telling the text field to update every time that
model.value updates. Also note that the binding is two-way; if the text field were editable,
every change made to it would be reflected in model.value. At the lines tagged note4, I have
made the a and b buttons change the value of the model by concatenating a or b to the end
of the string. Note also that I dont have the convenience of using the + operator it is not
overloaded for string usage.

I am missing one thing from the original specification: Every time the text field changes, I
want to print its contents to standard output. There is no syntax for adding a little code to
the bind instruction; we cant just insert a system output there. So, we can move on to
triggers, a bind-like feature of JavaFX. It allows us to do something when an attribute
changes. Triggers are more sophisticated than shown here this is only a simple usage. Add
the following code and youll get a working trigger:
trigger on TextValue.value[oldValue] = newValue {
System.out.println("old:".concat(oldValue).concat("; new:").concat(newValue));
}

View the code online.

JavaFX Script offers a lot in terms of data binding and component setup. If you really want
to use the framework, you need to be sure to write scripts that can take advantage of data
binding and component setup.

com.com/programming-and-devel 7/9
18/06/2009 Introducing JavaFX: Sun's new family

Conclusion
As Joshua Marinacci, one of the Sun fellows, says, JavaFX Script is a new language designed
from the ground up for animation and graphics. The script part is a bit of a misnomer since it
is statically typed and will soon be compiled straight to JVM bytecode. However, the script-
like concept of quickly tying together components written in other languages (principally
Java) is at the heart of JavaFX Script.

JavaFX Mobile is the next generation of Java on mobile devices. Its an entire mobile stack
written in Java (except the OS kernel). It is derived from JavaSE and features support for
JavaFX Script as well as Swing.

If you want to learn more about the new JavaFX Script programming language, check out
Suns excellent two-part tutorial:

Learning JavaFX Script, Part 1. An Introduction for Java Programmers

Learning JavaFX Script, Part 2. Using JavaFX and RMI to talk to a remote server

Peter V. Mikhalenko is a Sun certified professional who works for Deutsche Bank as a
business consultant.

Get Java tips in your inbox

Delivered each Thursday, our free Java newsletter provides insight and hands-on tips you
need to unlock the full potential of this programming language. Automatically subscribe
today!

People who read this, also read...

JavaOne '08: Sun demos JavaFX platform
Introducing JavaFX: Sun's new family of Java-based products
New Java scripting language is special (FX)
What is Project OpenJFX?
Sun CTO previews JavaFX-powered game

Print/View all Posts

Comments on this blog
Is That The Same as the Simple JAVA? lukysaqi@... | 11/01/07

JavaFX is script & java is Pro Language- javafxworld.net sipoyraj@... | 01/17/08

My Updates
My Contacts

Wou l d y ou l i ke y ou r own dy n a m ic Wor kspa ce on T ech Repu bl i c?

com.com/programming-and-devel 8/9
18/06/2009 Introducing JavaFX: Sun's new family
Take two minutes and set up a TechRepublic member profile.

Wou l d y ou l i ke y ou r own dy n a m ic Wor kspa ce on T ech Repu bl i c?

Take two minutes and set up a TechRepublic member profile.

Popular on CBS sites: iPhone 3G | Fantasy Football | Video Game Reviews | Antivirus
Software | Recipes | E3 2009

About CBS Interactive | Jobs | Advertise | Mobile | Site Map

2009 CBS Interactive Inc. All rights reserved. | Privacy Policy | Terms of Use

com.com/programming-and-devel 9/9