Getting started with JavaFX and JavaFX Studio plug-in for Eclipse

This short tutorial shows you how to get started with JavaFX and Exadel JavaFX Studio plug-in for Eclipse. You will build an application where you can add users to a list and delete users from a list.

What you need

  1. Download and install JavaFX SKD for your operating system (download)
  2. Download and install Eclipse 3.4.2 – Eclipse IDE or Eclipse IDE for Java EE Developers (download)
  3. Download and install Exadel JavaFX Studio plug-in (download, click on Download, left-side bar). Installation steps

Creating JavaFX project

  1. In Eclipse, select File/New/Other…/JavaFX/JavaFX Project
  2. Click Next
  3. For Project name enter: javafx-users
  4. On the same screen, click Configure to configure JavaFX SDK
  5. Click Add
  6. Point to JavaFX SDK home via Browse…
  7. Click Finish and then OK to go back to new project wizard
  8. Click Finish to finish project creation

Creating JavaFX script

  1. Right-click src folder and select New/Package
  2. For name, enter: example and click Finish
  3. Right-click example and select New/Other/JavaFX/JavaFX Script. Click Next
  4. For name, enter: users. Click Next
  5. Check Generate Stage. Click Finish. This steps adds a small JavaFX application that you can run.
  6. Right click in editor whitespace and select Run As/JavaFX Application. You should see a small window open with Hello World message.

Creating users application

Copy and paste the following JavaFX script over the existing code replacing everything but the package name:

package example;

import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.control.TextBox;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.layout.Tile;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.stage.Stage;

var names : String [];
var textBox : TextBox = TextBox {
        columns: 15
}
Stage {
    title: "Application"
    width: 250 height:350
    scene: Scene {
        content: [
               HBox {
                  layoutX: 3
                  layoutY: 3
                  spacing: 3
                  content: [
                     textBox,
                     Button {
                        text: "Add"
                        style: "base: blue"
                        action: function () {
                           insert textBox.text into names;
                        }
                     }
                  ]
               }
               VBox {
                  layoutX: 3
                  layoutY: 30
                  spacing: 2
                  content: [
                     Tile {
                        columns: 2
                        content: bind for (name in names) { [
                           Text {
                              font: Font { size: 16 }
                              content: name
                           },
                           Button {
                              text: "Delete"
                              style: "base: blue"
                              action: function () {
                                 delete names[indexof name];
                              }
                           }
                        ]
                     }
                  }
              ]
           }
        ]
    }
};

To run, right-click in the editor and select Run As/JavaFX Application. You should get the following:
screenshot48

You can also run as Applet by selecting Run As/JavaFX Application (Applet).
screenshot50

8 thoughts on “Getting started with JavaFX and JavaFX Studio plug-in for Eclipse

  1. Pingback: Learning JavaFX » Another Eclipse plugin

  2. Pingback: JavaFX and Seam with Flaming - Dzone article, part 1 | Maxa Blog

  3. Pingback: JavaFX Studio plug-in for Eclipse updated | Maxa Blog

  4. Pingback: Exadel JavaFX plug-in works with Eclipse 3.5 (Galileo) | Maxa Blog

  5. Pingback: Java desktop links of the week, June 15 | Jonathan Giles

  6. Pingback: Exadel JavaFX Studio plug-in for Eclipse 1.0.2 released | Maxa Blog

  7. Pingback: Exadel JavaFX Studio 1.1 now available | Maxa Blog

  8. OK, your script does work with my JavaFX project. So I feel like creating a more complicated project with the aid of Eclipse. It has taken me some time to properly install Eclipse on Ubuntu but at last everything is working fine.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s