How to Eclipse + JavaFX + fxml + Scene Builder (WYSIWYG designer)

Since JDK 7u6 is JavaFX 2 integrated to JavaSE on all major platforms (Windows, Linux and Mac). I think that it is time to start switch from SWING to JavaFX.
I use Eclipse 4.2 on Ubuntu 12.10 64bit with WindowBuilder Pro installed for SWING WYSIWYG design, but there is no plug-in with JavaFX GUI designer. Don’t worry, there is solution with using e(fx)clipse and JavaFX Scene Builder.

We will develop JavaFX example with using GUI designer and Eclipse in this post.

[wp_ad_camp_1]

Prerequisites

We have installed in computer:

Eclipse configuration

We have to integrate JavaFX Scene Builder into Eclipse first.

  1. Run Eclipse
  2. Menu “Window / Preferences”
  3. “General / Editors / File associatons” in tree
  4. Select “*.fxml” from file extensions list
  5. Click button “Add” in “Associated editors”
  6. Click “External program” and select “JavaFX Scene Builder” from list of external programs or click “Browse” and find program launcher on the disk.
  7. Select “JavaFX Scene Builder” in “Associated editors” and click button “Default”. “JavaFX Scene Builder” should be a default editor for FXML now.

[wp_ad_camp_1]

JavaFX Example

We are ready, let’s create simple JavaFX application.

  1. Create new “JavFX project” and create package “org.korecky.javafxexample” (or another, depends on you)
  2. Create MainForm.java class and implements “javafx.fxml.Initializable” interface in package “org.korecky.javafxexample” (or in your package). Code souhld look:
    package org.korecky.javafxexample;
    
    import java.net.URL;
    import java.util.ResourceBundle;
    
    public class MainForm implements javafx.fxml.Initializable {
    
    	@Override	
    	public void initialize(URL location, ResourceBundle resources) {				
    	}	
    }
  3. Create MainForm.fxml – Java FXML file in package “org.korecky.javafxexample” (or in your package)
  4. Eclipse should auto-open your “MainForm.fxml” in “JavaFX Scene Builder”
  5. Set “Controller class” in “Code” panel to your MainForm.java, in my case “org.korecky.javafxexample.MainForm”. It is very important, this stemp connect your JAVA code with FXML form.
  6. Drag and drop “Button” from “Library” to your form in scene builder. And set button properties:
    fx:id = btnPrintHello
    Text = Print Hello

  7. Drag and drop “Text Field” from “Library” to your form in scene builder. And set text field properties:
    fx:id = txfHello

  8. Save file and close scene builder
  9. Let’s finish binding between FXML and our java class. Create instance of each control by adding line like this one:
    @FXML private TextField txfHello;

    txfHello is fx:id of referenced control.
    Complete code of MainForm.java:

    
    package org.korecky.javafxexample;
    
    import java.net.URL;
    import java.util.ResourceBundle;
    
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.fxml.FXML;
    import javafx.scene.control.Button;
    import javafx.scene.control.TextField;
    
    public class MainForm implements javafx.fxml.Initializable {
    	@FXML
    	private TextField txfHello;
    	@FXML
    	private Button btnPrintHello;
    
    	@Override	
    	public void initialize(URL location, ResourceBundle resources) {		
    		btnPrintHello.setOnAction(new EventHandler() {
    		    @Override public void handle(ActionEvent e) {
    		    	txfHello.setText("Hello!");
    		    }
    		});		
    	}	
    }
    
  10. We have to create no last class for running our JavaFX scene. Create “JavaFX Main Class” named “Main.java” in packge “org.korecky.javafxexample” (or in your package)

[wp_ad_camp_1]

We will open our MainForm by adding these lines to method “start” in the class.


		Parent root;
		try {
			root = FXMLLoader.load(getClass().getResource("MainForm.fxml"));
		} catch (IOException e) {
			e.printStackTrace();
			return;
		}
		Scene scene = new Scene(root);
		primaryStage.setScene(scene);
		primaryStage.sizeToScene();
		primaryStage.show();

Complete code of Main.java:


package org.korecky.javafxexample;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class Main extends Application {
	@Override
	public void start(Stage primaryStage) {
		Parent root;
		try {
			root = FXMLLoader.load(getClass().getResource("MainForm.fxml"));
		} catch (IOException e) {
			e.printStackTrace();
			return;
		}
		Scene scene = new Scene(root);
		primaryStage.setScene(scene);
		primaryStage.sizeToScene();
		primaryStage.show();
	}

	public static void main(String[] args) {
		launch(args);
	}
}
  1. Let’s run our Main class and click on button “Print Hello”!

Download Eclipse project

You can download this example as complete Eclipse project here.
[wp_ad_camp_1]

4 thoughts to “How to Eclipse + JavaFX + fxml + Scene Builder (WYSIWYG designer)”

  1. My spouse and I stumbled ver here from a different web addres and thougt I might as well check things
    out. I like what I see so now i’m following you. Look forwaard to looking at your web page yet
    again.

  2. Having read this I thought it was rather informative.
    I appreciate you spending some time and effort tto put
    this information together. I once again find myself personally spending a lot of time both reading and posting comments.
    But so what, it was still worthwhile!

  3. Hi, I was just taking a look at your site and filled out your feedback form. The feedback page on your site sends you messages like this via email which is why you are reading my message right now right? This is the most important accomplishment with any kind of online ad, making people actually READ your ad and I did that just now with you! If you have something you would like to promote to tons of websites via their contact forms in the US or anywhere in the world let me know, I can even target specific niches and my pricing is super reasonable. Write a reply here: Phungcorsi@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.