10 Minute Tutorial - JavaFX: Hello World at Die, AJAX!

August 23, 2007 No comments

10 Minute Tutorial - JavaFX: Hello World

Over the past couple of months, I wrote a number of Microsoft Silverlight tutorials both to learn Silverlight and help other developers ramp up their Silverlight skills quickly. Now however, I’ll turn my attention to one of Silverlight’s competitors: JavaFX. If you read the JavaFX section of my introductory post, you already know that Sun has taken a very different approach than Microsoft in implementing a framework for developing easily deployed, highly-interactive, “rich” applications. So, I want to jump right in and create an application that will have everyone hanging on the edge of their seat with enthusiasm (or rolling their eyes and groaning in almost physical pain): Hello World.

Since most of my readers use Windows, this tutorial references Windows directories and uses Windows conventions. I imagine most Linux users won’t have a problem translating this to their platform, but if you have questions, leave a comment and I’ll do my best to answer it (I’m actually writing this in OpenOffice running on PCLinuxOS 2007).

Prerequisites

Install the Java 6 JRE (revision Update 2 at the time of this writing)
Download and unpack theJavaFX Source and Binaries

QuickStart

If you want to see the result of this tutorial and you have installed all the prerequisites, then please download the ZIP file below, unzip it, open and edit the HelloWorld.bat to match your directory structure and then run the HelloWorld.bat file.

Hello World Sample (you may read this software’s license here)

You can find a screen shot of the running application, here.

Lesson

Step 1: Create the code

Similar to XAML, JavaFX’s main value lies in its ability to ease object initialization and event wiring. However, rather than use XML, Sun decided to create a scripting language that looks like a long, lost cousin of Java itself. With this being my first JavaFX tutorial, I’ll take my time in building the sample application code so I can provide some additional detail about the language as we go.

First, create a file named HelloWorld.fx. In it, import and declare a simple Frame object, like so:

import javafx.ui.*;

Frame {
}

Believe it or not, this is a complete JavaFX application. Undoubtedly, if you’ve programmed any Java at all, that import statement should look mighty familiar. As you would expect, the import statement makes other classes available for use in your application. And, the “Frame” object we’ve declared behaves similarly to a Swing JFrame object, creating a window with a title, system menu and exit button. Now, let’s assign some values to the attributes of this Frame:

import javafx.ui.*;

Frame {
  title: “Die, Ajax! - Hello World”
  visible: true
}

Every object can have multiple properties or “attributes”, in JavaFX terms. In the highlighted code above, we set both the “title” and “visible” attributes using JavaFX’s name: value syntax. Much less verbose than using Java getter and setter methods.

Learn more about Frame class’ attributes

To make things interesting, let’s add text to the inside of our Frame:

import javafx.ui.*;

Frame {
  title: "Die, Ajax! - Hello World"
  visible: true
  content: Label {
    text: “Hello World!”
  }
}

So, the attribute “content” now contains an instance of the “Label” widget, which unsurprisingly, bears a striking resemblance to the JLabel Swing class. Furthermore, within the declaration of the Label we give the text attribute a value of “Hello World!”. See how easy that hierarchical assignment was? No nasty add() calls cluttering the code. UI declaration happens quickly and remains quite legible…all without paying the angle bracket tax.

Learn more about the Label class

Since, I’m running out of places to shove “Hello World” into this application, let’s move on to compiling it.

Learn more about the JavaFX Script language specification

Step 2: Run it!

But wait, what about compilation?

Well the creators didn’t name it JavaFX Script for nothing. Being a scripting language, it doesn’t need a manual compilation step. That happens for us during run-time, similar to how XAML eventually gets compiled.

As a long time Swing developer, this almost brings me to tears. (tears of joy, that is ).

Anyway, when I first started researching JavaFX, all the tutorials I read leaned heavily on Netbeans to handle the exection of JavaFX applications. While I love NetBeans (if NetBeans 6 lives up to its potential, it may permanently replace Eclipse on my home workstation), I didn’t want to install it just to get a taste of JavaFX. So, after much searching and a little trial and error, I stumbled upon a method of running JavaFX applications from the command line. I should note that, as of right now, most articles highly recommend using an IDE like NetBeans to work with JavaFX.

That said…let’s get to typing.

I’ll walk through this command-line paramter by command-line paramter. First, we’ll start with the java interpreter itself. For a default installation, it resides in the Program Files directory:

"C:\Program Files\Java\jre1.6.0_02\bin\java.exe"

I surrounded the command with quotes so Windows won’t choke on the spaces in the path. I will do this again, later.

Now, we need to set the classpath. Our application will require the three JARs listed below:

swing-layout.jar
javafxrt.jar
Filters.jar

Each of these JARs reside in the trunk/lib directory of the zip/tgz file I had you download in the prerequisites. I unzipped this directory to a folder named OpenJFX inside my Windows “home” folder, so my command line looks like this:

"C:\Program Files\Java\jre1.6.0_02\bin\java.exe" -classpath .;"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\javafxrt.jar";"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\swing-layout.jar";"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\Filters.jar"

Since our application lacks any sort of JavaFX container (e.g. Netbeans, a browser), we need someway to bootstrap it. Luckily, we can use the executable net.java.javafx.FXShell class that resides in the javafxrt.jar to run our script:

"C:\Program Files\Java\jre1.6.0_02\bin\java.exe" -classpath .;"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\javafxrt.jar";"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\swing-layout.jar";"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\Filters.jar" net.java.javafx.FXShell

Finally, as a parameter to the FXShell, we pass our script file:

"C:\Program Files\Java\jre1.6.0_02\bin\java.exe" -classpath .;"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\javafxrt.jar";"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\swing-layout.jar";"C:\Documents and Settings\David Miles\dev\OpenJFX\trunk\lib\Filters.jar" net.java.javafx.FXShell HelloWorld.fx

To make things easier, I put these commands in a .bat file and you can download the same .bat file I used to execute this application in the sample zip archive.

In addition to building the command line ourselves, the JavaFX Source and Binaries package you downloaded in the prerequisites contains a batch file (or shell file, for Linux users) to help speed the process of executing applications. I didn’t like how they organized the Windows javafx.bat file (although the Linux javafx.sh file looks fine), so I wanted to walk through executing a script by hand. I haven’t tried using their .bat file, but in theory, you could have run our application by entering this command from the trunk/bin directory:

javafx.bat HelloWorld.fx

For windows users, if you use their batch file you will need to add the directory containing your JavaFX Script file on the classpath because the FXShell will look there for it. So if the HelloWorld.fx file exists in the directory with javafx.bat, you would add “.;” (sans quotes) to the beginning of the classpath

or for Linux users:

javafx.sh HelloWorld.fx

But that would have been WAY too easy :).

Conclusion

While playing around with JavaFX, I found myself experiencing a sort of Swing-deja vu, but with one small twist: it was fun. Tedious method calling and instantiation get replaced with declarative initialization and event wiring all packaged in an easy to read scripting language. As you’ll see in future posts, easing the initialization of a few Swing-like controls barely scratches the surface of what JavaFX can do. But for now, try creating more complex UIs using the method I outlined above or JavaFXPad, a Java Web Start application that will execute arbitrary (you don’t even need a Frame) JavaFX Script for you. Try not to have too much fun…and I really mean that …for old Java UI developers like me, this is the stuff dreams are made of.