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:

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