Learning Curve Journals, Part 1: Exploring JavaFX Script

Print-friendly Version

Articles Index

Explore JavaFX Script alongside SDN staff writer and developer John O'Conner, who candidly records his experiences with learning Sun's latest software innovation. This Learning Curve Journal series begins with an introduction to the technology and how to get started using it.

JavaFX Script was announced at the 2007 JavaOne Conference in May. The technology is still very new, but Sun Microsystems and the community are making dramatic progress each week. So it is a good time to get involved with the language. It has progressed enough that you can actually download and use it. Several beautiful demo applications exist, showing the possibilities of this language.

JavaFX Script is a new scripting language that developers can use to create dynamic graphical content. The language provides libraries to help you use the Swing user interface toolkit and Java 2D APIs conveniently. It doesn't replace either Swing or Java 2D; the goal is to make those APIs more accessible to rich content developers. The language provides both procedural and declarative syntax. You can declaratively create a rich user interface, and then you can add event-handling routines and operations.

However, most of us have to start more modestly, and that's the purpose of this article. Its goal is to show you how to get started with JavaFX Script. First, you'll need four things:

• an up-to-date Java Development Kit
• access to accurate, up-to-date information
• the JavaFXPad demo application
• the JavaFX Script plugins for your integrated development environment (IDE)

As a developer, you no doubt have a Java SE Development Kit (JDK) on your system. However, if you haven't updated your system in a while, make sure you have either Java SE 5 or Java SE 6. If you use Solaris, Windows, or Linux, you can download the latest JDK from the Java SE Downloads page of the Sun Developer Network. If you use Mac OS X, you can get Apple's latest release of the Java platform development kit directly from their Java section of the Apple Developer Connection.

When you experiment with a new environment or language, you're going to hit dead-ends and difficult places. That's part of the deal we all make when we adopt leading-edge technology. However, to smooth the learning curve, good documentation and examples are absolutely critical. Along with the JavaFX Technology hub of the Sun Developer Network, the Project OpenJFX web site provides the latest documentation and demo resources you need to get accurate information. Inevitably, there are holes in the documentation, but people are working hard on filling those holes. So bookmark these two sites in your browser, and refer to them early and often:

• JavaFX Technology hub, Sun Developer Network
• Project OpenJFX

Some of you will want to start programming immediately, barely reading a word of the language specification. Others of you will read everything you can before actually using JavaFX Script. Even if you're the type that dives in right away, you have to start with some sort of language specification or tutorial. Before you can scribble out the prototypical "Hello, world," example, you need to know some basic language syntax. These documents are the best places to start:

• The JavaFX Script Programming Language Reference
• Getting Started with the JavaFX Script Language

JavaFXPad is a Java Web Start application that provides a split-pane environment, with a live canvas window above and a simple editor below. As you type script code into the editor, the canvas window shows the interpreted results. It's the fastest, easiest way to experiment with the language when you're just starting out. The user interface shows the immediate results of your code. You're probably not going to use this tool for all your development needs, but it does its job well, which is to provide a quick and easy way to tinker with the scripting language.

After you've read at least some of the language specification document, run the JavaFXPad demo. If you've installed the JDK correctly, you should be able to do this from your browser; just click the link. Alternatively, you can always run the command line utility javaws to launch the application. From the command line, just enter the following:

javaws http://download.java.net/general/openjfx/demos/javafxpad.jnlp

If you've successfully launched the application, you should see a window like this:

Figure 1. JavaFXPad Editor

The JavaFXPad editor provides basic formatting and code completion. Programmers new to JavaFX Script -- that's all of us -- aren't always sure what the language syntax expects, but code completion helps. Pressing the Ctrl + Space keys activates code completion in the editor.

Once you have successfully run JavaFXPad, you can begin experimenting with the language. After clearing the initial demo code, begin your own program. Of course, who can resist starting with "Hello, world!"

Type the following into the empty editor window:

import javafx.ui.Label;

Label {
    text: "Hello, world!"
}

You'll see the output just above the editor:

Figure 2. Your Basic "Hello, world!"

Not impressed? OK, although I'm really just trying to show you how to get set up, I'll stry something a little more interesting. The JavaFX environment implements all of the Swing UI components, so you don't have to limit yourself to a label. You can use other widgets too, like buttons or dialogues.

Here's an example that introduces an event handler on a button. Having seen the action and operation syntax from the language specification, let's try to display a message box when you press a button:

import javafx.ui.Button;
import javafx.ui.MessageDialog;

Button {
    text: "Press me!"
    action: operation() {
        MessageDialog {
            title: "You pressed me"
            message: "Hey, don't do that!"
            visible: true
        }
    }
}

After typing this into JavaFXPad and pressing the button, you'll see something like this:

Figure 3. "Press me!" Button Message

JavaFXPad also has "Open" and "Save" file operations, so you don't have to start from a clean slate every time you use the tool. Although JavaFXPad may not be your long-term development editor, it is convenient and simple, perfect to help you get started. Once you feel comfortable with this tool, you can always use the same files in a different editor or even an integrated development environment (IDE).

When you do decide to tackle JavaFX Script from your IDE, you'll find plugins for at least two popular tools: NetBeans and Eclipse. The plugins enhance editor- and project-support to include JavaFX Script files. The plugins provide the core libraries for the script engine and its libraries as well.

The plugin download instructions on the Project OpenJFX site work well. Use the following links:

• plugin instructions for NetBeans IDE 5.5
• plugin instructions for NetBean IDE 6.0, the next major version of NetBeans
• plugin instructions for Eclipse 3.2.2

The instructions work for the updated NetBeans IDE 5.5.1 too. I did deviate slightly from the Project OpenJFX instructions; I created a new "JavaFX Script" update center in NetBeans instead of overwriting the existing NetBeans Update Center Beta node. After creating a new update center node, I followed the rest of the instructions exactly.

Once you have the update center configured correctly, getting the plugins doesn't take long. Select the Update Center you configured in the instructions, and the Update Center Wizard should eventually present you with the following modules to download:

• JavaFX Editor
• JavaFX UserLibrary
• JavaFX Library
• JavaFX Projects

The wizard will look like this after it finds the plugins at the Update Center:

Figure 4. JavaFX Plugins on Update Center

Once NetBeans downloads the modules, the wizard will prompt you to install them. Select the check boxes beside the module names and continue the installation.

Figure 5. Choosing Modules to Install

Once you have installed the plugins, you can edit and run script files in your IDE. You have two ways to launch scripts from the IDE: use the net.java.javafx.FXShell class or the script-engine support built into Java SE 6. The IDE plugin sets your project's main class to the FXShell, which is a script launcher provided by the JavaFX libraries. To launch a specific script, you must provide the fully qualified script name as an argument to FXShell. In the NetBeans IDE, you do that by configuring the Run settings in your project properties. The following image shows a Run configuration for launching a script named com.sun.demo.javafx.ui.PressMe defined by the file com/sun/demo/javafx/ui/PressMe.fx in my source directory.

Figure 6. PressMe Script

When investigating new technology, starting off correctly is important. Make sure you get started with the right information and tools. The best way to do that is to follow this four-step process

1. Get the latest Java SE Development Kit.
2. Use the Project OpenJFX site and JavaFX Technology hub as your information source.
3. Use the JavaFXPad demo to experiment with your first scripts.
4. Get the development plugins for your IDE.

Part 2 of this series to follow.

DISCLAIMER
This article contains information provided by Sun "as is," as a courtesy only. Sun disavows any endorsement for the accuracy of such information, and disclaims any and all warranties pertaining thereto, including any warranties of merchantability, fitness for a particular purpose, or non-infringement. Sun shall not be liable for any damages whatsoever arising out of or in connection with the use by anyone of such information.