Developer

Introducing JavaFX: Sun's new family of Java-based products

JavaFX currently consists of JavaFX Script and JavaFX Mobile. 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 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 Microsoft's 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 it's 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 it's not XML-based. In fact, it's 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:

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:

  1. Launch NetBeans 5.5.
  2. From the main menu, go to File | New Project.
  3. In the New Project window, select the General category, select Java Application project, and click Next.
  4. In the New Java Application window, type FXExample in the Project Name text field.
  5. In the same window, use the Browse button to select the location of the project.
  6. Uncheck the Set As Main Project and Create Main Class check boxes and click Finish.
  7. Right-click on the FXExample | Source Packages and select New -| File/Folder.
  8. In the New File window, select the Other category, select the JavaFX File file type, and click Next.
  9. In the New JavaFX File window, type "HelloWorld" for the File Name, type "src" for the Folder, and click Finish.
  10. Copy the code from Listing 1 and paste it in HelloWorld.fx.
  11. Right-click FXExample project and select Properties.
  12. In the Project Properties - FXExample, select the Run node from the Categories pane.
  13. In the Arguments text field, type "Hello World" and click OK.
  14. 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

Figure A

Now I'll 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, I'll 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

Figure B

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");

            }

        },

        Button {

            text: "Clear"

            action: operation() {

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

            }

        },

        ]

    }

    visible: true // makes the frame show

up.

    };

View the code online.

It's 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 can't 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 I've 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 textField's 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 = "";

}

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

            }

        },

        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 TextField's 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 don't 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 can't 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 you'll 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.

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. It's 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 Sun's excellent two-part tutorial:

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!
2 comments
lukysaqi
lukysaqi

i want to discus about the differences of JAVA and JAVAfx, if these both are not same, as i have seen a FX tag at its end. So if i am wrong and have started this discussion in mistake then i am sorry to all of of you. And if i am right then wish to discus the main differences between these two languages.

Editor's Picks