Jump into JavaFX, Part 1: JavaFX Preview SDK

Experience JavaFX with NetBeans 6.1 and Project Nile

JavaFX seems like a viable alternative for RIA development, but you need to write, build, and run some scripts to know whether it's for you. In this article (the first in a short series), Jeff Friesen introduces you to the JavaFX Preview SDK. Get installation instructions for JavaFX with NetBeans 6.1, create a Hello World script, and explore scalable vector graphics conversion and rendering using Project Nile. Level: Beginner.

It is remarkable to realize that one year ago we could only explore the JavaFX Script language and various JavaFX APIs via an interpreter and an interactive application called JavaFX Pad. Since that time, Sun Microsystems has evolved the language, has created a compiler to improve runtime performance, and has released the JavaFX Preview SDK for JavaFX programming.

The JavaFX Preview SDK (which will be replaced by the upcoming JavaFX SDK 1.0, expected to be released in November) consists of two components that provide the tools, technologies, and resources for creating RIAs (rich Internet applications) that are based on the JavaFX Script language and its associated APIs:

  • NetBeans IDE 6.1 with JavaFX
  • Project Nile

Learning JavaFX, especially at this early stage in its development, is a big undertaking; but it can also be fun. So we'll take our time getting to know the JavaFX SDK, starting this month with using JavaFX and Project Nile from within the NetBeans 6.1 IDE. We'll install the components and then I'll walk you through some easy RIA development using your new tools. Later articles in the series will explore the JavaFX Script language and its APIs. Tutorials will be based on the JavaFX Preview SDK, which is available now, and on JavaFX SDK 1.0, once it is released.

Getting JavaFX Preview SDK

NetBeans IDE 6.1 with JavaFX provides an environment for developing JavaFX-based RIAs. It includes JavaFX tools (such as a compiler) and plugins for these tools, and is available for Windows and Mac OS X (Intel only). Visit Sun's JavaFX Technology Downloads page to learn about the NetBeans IDE 6.1 with JavaFX system requirements and download the component.

What about Linux users?

Although NetBeans IDE 6.1 with JavaFX officially supports only Windows and Mac OS X (Intel only), developer Weiqi Gao shows you how to get most of the Mac OS X version of the SDK to work on Linux in his blog post "Watch JavaFX SDK Run -- On Linux" (see Resources). If you're holding out hope that Linux will be officially supported at some point, there's a good chance that you will get your wish with JavaFX SDK 1.0, which is due out later this year.

Whether you download the NetBeans IDE 6.1 with JavaFX or just the JavaFX tools (if you have NetBeans IDE 6.1 installed and just need the tools), you should also make sure that you have the Java SE 6 update 7 (or later) SDK installed on your platform. Sun recommends that you install this Java SDK prior to installing NetBeans IDE 6.1 with JavaFX.

I installed Java SE 6u7 on my Windows XP platform, and then installed the NetBeans/JavaFX combo. After downloading the netbeans-6.1-javafx-windows.exe installer file, I proceeded to run this installer. If you've never installed the NetBeans IDE on your platform, you'll find that installation proceeds very smoothly.

The installer first presents a welcome screen, shown in Figure 1.

The welcome screen reveals the size of the NetBeans installation.
Figure 1. The welcome screen reveals the size of the NetBeans installation. (Click to enlarge.)

The installer next presents the license agreement screen, as shown in Figure 2 (it's always a good idea to review a license agreement).

You must accept the license agreement to continue with the install.
Figure 2. You must accept the license agreement to continue with the install. (Click to enlarge.)

Figure 3's screen lets you override the default install location and the JDK used by NetBeans -- remember that it must be at least Java SE 6u7!

Select a JDK by specifying its home directory.
Figure 3. Select a JDK by specifying its home directory. (Click to enlarge.)

The summary screen shown in Figure 4 gives you a chance to change your mind regarding the install location before committing to the install.

Begin the install from the summary screen.
Figure 4. Begin the install from the summary screen. (Click to enlarge.)

When installation finishes, the installer gives you a chance to register your copy of NetBeans, as shown in Figure 5.

Uncheck the checkbox if you choose not to register your copy of NetBeans
Figure 5. Uncheck the checkbox if you choose not to register your copy of NetBeans.

Getting Project Nile

Project Nile provides plugin-based tools for converting Adobe Illustrator and Photoshop graphics to a format that JavaFX-based RIAs can access. Just like NetBeans IDE 6.1 with JavaFX, you can download Project Nile from Sun's JavaFX Technology Downloads page. You can also learn about Project Nile's system requirements and study its release notes there.

I installed the Windows version of Project Nile (it's also available for Mac OS X, Intel only) by downloading and running the project_nile-1_0-pre1-windows-i586.exe installer. This program presents screens similar to those shown in Figures 1 through 5, and selects C:\Program Files\Sun\Project Nile as the default install location. We'll explore this location's contents later in this article.

Using NetBeans IDE 6.1 with JavaFX

After installing NetBeans, start up the IDE (double-click its desktop shortcut on a Windows platform) and wait for its workspace to appear. Figure 6 reveals the NetBeans workspace divided into several windows, which this IDE's help system describes -- select Help Contents from the Help menu to access the help system.

The workspace makes it easy to develop JavaFX software.
Figure 6. The workspace makes it easy to develop JavaFX software. (Click to enlarge.)

At this point, there are no JavaFX projects to access, so we'll have to create one. We can either create a skeletal project, or create a project based on one of the JavaFX samples bundled with NetBeans. In either case, select New Project from the File menu (or click the second button from the left on the toolbar). This activates the New Project wizard (see Figure 7).

NetBeans defaults to the JavaFX project category, which lets you only create JavaFX Script applications.
Figure 7. NetBeans defaults to the JavaFX project category, which lets you only create JavaFX Script applications. (Click to enlarge.)

Hello World! A JavaFX script

Because we'll create a skeletal project, make sure that the project category is set to JavaFX before clicking the Next button. In response, the wizard requests the JavaFX project's name and location on its next screen (see Figure 8). When lowercased, this name also serves as the project's default package name (each project is given its own package and directory).

On a Windows platform, NetBeans defaults to storing its projects in separate directories under the 'C:\Documents and Settings\user name\My Documents\NetBeansProjects' folder.
Figure 8. On a Windows platform, NetBeans defaults to storing its projects in separate directories under the C:\Documents and Settings\ user name \My Documents\NetBeansProjects folder. (Click to enlarge.)

Figure 8 reveals HelloJavaFX as the project's name -- it's traditional to introduce a new technology via some sort of "hello world" program (or script in JavaFX-speak). It also reveals Main as the default name (.fx is the extension) of the script's file, and other default settings. After clicking the Finish button, you'll discover the skeletal source code shown in Figure 9.

The workspace assigns a separate tab to each source file.
Figure 9. The workspace assigns a separate tab to each source file. (Click to enlarge.)

Although the "hello world" script could output its Hello, JavaFX! message to the standard output (which is the workspace's Output window), this option is boring and doesn't reveal what JavaFX is all about. So, instead we'll have this script rotate the message while changing its opacity over a gradient-rendered background. Before we look at the script's output, examine Listing 1.

Listing 1. Main.fx

/*
 * Main.fx
 *
 */

package hellojavafx;

/**
 * @author Jeff Friesen
 */

import java.lang.System;

import javafx.animation.Interpolator;
import javafx.animation.Timeline;

import javafx.application.Frame;
import javafx.application.Stage;

import javafx.scene.Font;

import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;

import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;

class Model
{
    attribute text: String;
    attribute opacity: Number;
    attribute rotAngle: Number
}

var model = Model
{
    text: "Hello, JavaFX!"
}

Frame
{
    title: bind model.text

    width: 300
    height: 300

    var stageRef: Stage
    stage: stageRef = Stage
    {
        fill: LinearGradient
        {
            startX: 0.0
            startY: 0.0
            endX: 0.0
            endY: 1.0
            stops:
            [
                Stop { offset: 0.0 color: Color.BLACK },
                Stop { offset: 1.0 color: Color.BLUEVIOLET }
            ]
        }

        var textRef: Text
        content:
        [
            textRef = Text
            {
                content: bind model.text
                x: bind (stageRef.width-textRef.getWidth ())/2
                y: bind (stageRef.height-textRef.getHeight ())/2
                textOrigin: TextOrigin.TOP

                rotate: bind model.rotAngle
                anchorX: bind textRef.x+textRef.getWidth ()/2
                anchorY: bind textRef.y+textRef.getHeight ()/2

                font: Font
                {
                    name: "Arial"
                    size: 30
                }
                fill: Color.YELLOW
                stroke: Color.ORANGE

                opacity: bind model.opacity
            }
        ]
    }

    visible: true

    // If a function isn't assigned to closeAction, the script automatically
    // terminates. If a function is assigned to this attribute, it must include
    // System.exit() to terminate the script.

    closeAction: function ()
    {
        System.exit (0)
    }
}

var timeline1 = Timeline
{
     autoReverse: true
     repeatCount: Timeline.INDEFINITE

     var begin = at (0s)
     {
         model.opacity => 0.0
     }

     var end = at (4s)
     {
         model.opacity => 1.0 tween Interpolator.LINEAR
     }

     keyFrames: [begin, end]
}
timeline1.start ();

var timeline2 = Timeline
{
     repeatCount: Timeline.INDEFINITE

     var begin = at (0s)
     {
         model.rotAngle => 0.0
     }

     var end = at (5s)
     {
         model.rotAngle => 360.0 tween Interpolator.LINEAR
     }

     keyFrames: [begin, end]
}
timeline2.start ();

//model.text = "I"

If you're new to JavaFX Script, much of Listing 1 will probably look alien to you. This is true even though you should already be familiar with import statements, the single-line comment style, class declaration via the class keyword, and brace character ({}) delimiters -- all being borrowed from Java. What you see in Listing 1 will make more sense after you've explored the JavaFX Script language and associated APIs in the second and third parts of this series.

Rather than trying to figure out how the script works, let's see what it's like to build and run it in NetBeans 6.1 with JavaFX. After replacing Main.fx's skeletal contents (see Figure 9) with Listing 1, compile the source code and run the resulting Java class file by clicking the toolbar's Run Main Project button (the green triangle button). If all goes well, you should see a window that presents identical content to that shown in Figure 10.

The script continuously rotates the message around the center of the window's content area, while also transitioning the message's opacity from invisible to fully visible and vice-versa.
Figure 10. The script continuously rotates the message around the center of the window's content area, while also transitioning the message's opacity from invisible to fully visible and vice-versa.

More sample applications

NetBeans 6.1 includes a variety of samples that primarily demonstrate JavaFX's support for animation, basic geometry, color, images, and mouse interaction. You can even have fun with the somewhat buggy Bounce sample, which presents a simple version of the popular Arkanoid game. If you haven't yet tried out these samples, Figure 11 gives you a glimpse of what's available.

Bounce, Color Wheel, Linear Gradient, Smoke Particle System, and Transparency sample GUIs.
Figure 11. Bounce, Color Wheel, Linear Gradient, Smoke Particle System, and Transparency sample GUIs. (Click to enlarge.)

Before you can play with a sample, you'll have to create a new project. Complete the following steps to accomplish this task:

  1. Activate the New Project wizard.
  2. From the Choose Project section of the wizard's starting screen, expand the Samples category node, followed by the JavaFX and Best Practices nodes in the Categories tree.
  3. Select a directory under Best Practices and highlight the desired project in the Projects list.
  4. Click Next and then Finish.

After you click Finish, the sample becomes the new main project. Click the green triangle button to compile and run its code.

To view the sample project's source code, expand its Source Packages hierarchy on the Projects tab of the workspace's Projects/Files/Services window, and double-click the appropriate .fx filename that's located at the bottom of this hierarchy. A new tab will be created that presents this file's source code.

1 2 3 4 Page
Join the discussion
Be the first to comment on this article. Our Commenting Policies
See more