Eclipse JavaFX Plug-in Quick Start Tutorial

Marty
Principal Consultant

Jeff Szeto
Developer and Architect

This tutorial is a quick start guide for the Eclipse JavaFX plug-in.  To kick things off, we start with some background on JavaFX.  If you're anxious to get started, hop down to the "Eclipse JavaFX Plug-in" section. 

1. Introducing JavaFX

Sun's announcement of JavaFX at this year's JavaOne Conference grabbed the attention of many Java developers.  JavaFX is a Sun product family comprised of JavaFX Script and JavaFX Mobile.  JavaFX Script is a language for creating rich media and interactive content and is a GPL'ed open source project.  Java Mobile is Sun's software system for mobile device and uses industry standard API and technologies which can be leveraged across various mobile devices. 

JavaFX Script is designed to compete with Adobe Flex and Microsoft Silverlight which are Rich Internet Application (RIA) development tools.  Abobe's Flash technology has become the standard for streaming video delivery over the web (have you ever used YouTube?).  Flex builds on Flash and is designed for creating and delivering RIA.  Silverlight is Microsoft's ActiveX based offering in the same space.  There is intense competition in the RIA space right now as even Firefox is jumping in and there are also open source offerings such as OpenLaszlo.

The main competition for all of these new RIA tools is Ajax.  Ajax has set a standard high for web applications as users have become accustomed to responsive web applications.  Ajax development is not easy, but there are many frameworks for Ajax that are making life easier for developers (see our review of popular Ajax Frameworks).  Ajax differs from RIA tools in that a browser plug-in is not required.

RIA architecture depends on a client side engine (i.e., a browser plug-in) to handle execution.  The plug-in provides cross browser support and assumes the low-level heavy lifting of rendering the application's user interface and communicating with the server.  The application developer benefits by writing code once in a high level language for deployment to a wide range of client platforms.

Sun's prior offering in this area was Swing delivered over Webstart/JNLP.  This tool chain's downside is a large download size and Swing's complex development model.  JavaFX is intended to address these shortcomings.

Should you drop your current development methodology and implement you next production application with JavaFX?  The current answer is a definite no!  JavaFX development is in the early stage.  The JavaFX announcement is for the alpha release.  The tool-chain is lacking several important pieces such as a graphical GUI builder and the deployment model is not yet clear.  A more reasonable approach is to keep tabs on JavaFX and be ready to adopt it when the technology matures.  With this in mind, we've prepared this tutorial which illustrates getting started with JavaFX and the Eclipse plug-in.

2. Eclipse JavaFX Plug-in 

There is a good tutorial for using the JavaFX plug-in for NetBeans to create a Hello World JavaFX program posted at OpenJFX.  OpenJFX also provides a JavaFX plug-in for Eclipse.  Below we are going to show you how to use the Eclipse plug-in to write a JavaFX Hello World program.

First, On the OpenJFX website, you need to follow the download and installation instructions to install the Eclipse JavaFX plug-in.  As the instructions indicate, Eclipse 3.2.2 and JDK 5.0 are required.  However, JDK 6.0 seems to work fine for me.

Once the plug-in is installed, the first step is to create a Java Project.  This step is no different from creating a regular Java application project.  First, click "New"->"New Project" and select "Java Project":

Next, enter the project name "helloworld" and project location.  Make sure you select "JRE 5.0" for your project JRE.  Then click "Finish".

Up to this point, Eclipse will just create a regular Java project called "helloworld" for you.  There is nothing yet related to JavaFX. 

The next step is to create the actual Hello World JavaFX file.  The JavaFX plug-in adds a new file type called "JavaFX File".  So select "File" -> "New" -> "Others..." and pick "JavaFX File".  By default, .fx is the JavaFX file extension.

Click "Next" and enter HelloWorld.fx as the file name.

Once you click "Finish", the project build path will automatically be configured with JavaFX libraries as shown below:

Next, type in the Hello World JavaFX script (below) which is based on the NetBeans plug-in tutorial:


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
     }
    

To run a JavaFX program from Eclipse, you need to create a JavaFX launch configuration.  Click "Run"->"Run..", select "JavaFX Application" and click on the "New Launch Configuration" button () :

Click on the "Arguments" tab and make sure you enter "HelloWorld" in the "Program arguments" section since the plug-in only sets up the Java main class ("net.java.javafx.FXShell") for you.  Also, you must create a separate launch configuration per JavaFX file in your project.  In this example, I named this launch configuration "HelloWorld JavaFX". Of course, the name of the configuration is your choice.

Finally, click "Apply" and "Run" buttons to run the Hello World program:

It's worth to mention that the Eclipse plug-in comes with an auto-complete editor.  Try pressing "Crtl-Space" to display content assistance:

The Eclipse plug-in for JavaFX works quite the same as the NetBeans plug-in.  The plug-in provides basic editing features and it is currently at the alpha stage, so expect more features to come down the road.


About the authors

  1. Jeff Szeto is a developer and architect with over 15 years of experience in enterprise application development.  He is a Sun Certified Java Architect and Programmer and holds a Masters degree in Computer Science from Virginia Tech.
  2. Marty is a Principal Consultant with Beaver Creek Consulting Corp.  Marty has 10 years of professional experience as a Software Developer and specializes in developing finance and accounting solutions.  Marty is a Sun Certified Java Programmer with expertise in J2EE and database systems.  He holds a Doctorate in Chemical Engineering from the University of Virginia.

This article first appeared at MrBool.com at: http://www.mrbool.com/articles/viewcomp.asp?comp=5549

Last Update: 20070610